弱視の方がパソコンを利用される際に通常の配色では眩しい場合など、画面の配色をハイコントラスト（白黒反転）に設定して利用されることが多いのですが、Windows でハイコントラストに設定すると、背景色や背景画像は表示されなくなります。そのため、通常の配色では見えない配慮が必要になる場合があります。（ちなみに Mac の機能にあるカラー反転は、背景を含めてすべての色が反対色になります。）

まず、配慮以前の問題なのですが、“オフレフト” や “画像置換” などと呼ばれるコーディング手法は致命的な問題が発生します。これは、HTML 上のテキストを text-indent: -9999px などとして画面の外に飛ばし、代わりに画像テキストを背景として配置するというもので、ナビゲーションやタイトル部分など、今でも多くの Web サイトで取り入れられています。

しかし、これをハイコントラスト設定で見ると、当然背景として配置した画像は表示されませんので、その部分は何も見えない真っ黒な空間になってしまいます。

テキスト情報なので SEO にも有利で、スクリーンリーダーでも読み上げられるからアクセシビリティも向上するなどという誤った考え方が広まったこともありますが、これは全くの論外で、装飾目的でない意味のある画像はきちんと代替テキストを伴った img 要素を使って HTML に記述すべきです。

“ハイコントラスト環境への配慮” の続きを読む »