文字サイズ「小・中・大」と配色「A・B・C」変更ボタンはつけてはいけない

公共系のウェブサイトでこのようなボタンを目にする機会は多い。

しかしながらこのようなボタンは意図通りに機能することはなく、むしろ必要な人には気づかれず、不要な人には目障りなものだ。つけてはいけない。

文字の大きさや配色は OS で変更している

その理由は実際に目の悪い人がどのように PC を使用しているか想像してみればすぐに分かる。

Windows では20年も前の Windows 95 (1995年発売) の頃から、画面の文字を一括で大きくしたり、配色を変更する機能がついている。視力の低い人の間ではこのような機能を使用するのは常識と考えるのが普通ではないだろうか。

参考までに、ここに一個人の例ではあるが詳細に記述された貴重な記事がある。

文字を大きくしても、ハイコントラストモードでも見やすいか？

そのような利用者にとっては、文字サイズや配色の変更ボタンが不要なこと以上に、そのボタンの存在が必要な情報への到達を阻害する可能性すらある。

たとえば現在の Windows にはハイコントラストモードというものがあり、ウェブサイトの配色も一括で黒地に白文字にできる。その状態で石川県ホームページを表示した画面がこちら。

はたして文字サイズや配所の変更ボタンはどう見えるだろうか。

アクセシビリティのためにつけているとしたら、早くそんなものを取っ払うことを奨めたい。

制作者ができること

大きな文字サイズに対応する

文字サイズを大きくすると画面の仮想的な幅（情報が入る量）が小さくなる。つまり、情報の内容としては小さな画面で見ているのと同じことになる。

ここで現在のブラウザは、表示を拡大したとき、小さな画面を拡大したものとして表示する。CSS のメディアクエリもそれに従うので、レスポンシブデザインのページは表示を拡大していくとそれに応じてレイアウトも変化するはずだ。

すなわち正しく設計されたレスポンシブデザインのウェブページは、視力が低くて文字を拡大している利用者にもやさしい。

ハイコントラストモードに最適化する

Windows のハイコントラストモードを使用してウェブサイトを閲覧すると、背景が黒、文字と枠線 (border) は白、背景画像は無効となり、画像は色が反転される。

いくつかのサイトを見てみると、適切に枠線が使われたページは見やすいと感じる。見出しなどの意味の区切りとなるところでは border を使うのが望ましい。もし通常の表示で視覚的に不要なら、背景と同色にしたり、透明にすることもできる。

また、Internet Explorer 10-11 や Edge では CSS のメディアクエリ -ms-high-contrast を使うことで、ハイコントラストモードでの表示を制御することができる。標準化はされていないが、ブラウザのシェアの大きさを考えると有効だろう。

@media (-ms-high-contrast: active) {
    h1 {
        color: #f00;
    }
}

参考