display:none;は、アクセシビリティを低下させる要因

アクセシビリティに関する記事で、非常に目に留まった内容があったので和訳を交えながら紹介します。
アクセシビリティに関する情報を公開してくれている456 Berea Streetからの情報です。

原文はこちらから

使っている人もいれば使ってない人もいるかと思いますが、display:none;というプロパティですが、これは、主に要素を非表示に使うものです。

私はよくプリントアウト用のCSSを書くときにしか使わないのですが、人によれば、画像置換やスキップリンクに用いる人もいると思います。

display:none;を用いて要素を隠すのはアクセシビリティを低下させる要因です。

display:none;の意味は、

この要素が存在しないふりをしてください。それを表示しないか、それを印刷しないか、その内容を話さない。

多くのスクリーンリーダーは、display:none;を用いている要素を無視します。これがスキップリンクやナビゲーションや見出しに使っているならば、スクリーンリーダーを使用しているユーザーはこれらを解しません。

オフレフト(ここでは、画像置換と解釈)を用いる場合は、下記のようにすると視覚的にはdisplay:none;と同じ効果を得ます。さらに、スクリーンリーダーのユーザーにとっても、その要素は読み上げられるので、アクセシビリティも確保できます。

.structural {
 position:absolute;
 left:-9999px;
}