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

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

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

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

display:none;の意味は、

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

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

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

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