アクセシビリティを劇的に改善するための3つのポイント

Web上の95％の情報は文字情報だと言われています。
もちろん、残りの5％もデザイナーとしては無視できないものかもしれません。
しかし、まずはテキスト情報をWCAG 2.0のガイドラインの基準に合わせていくことが重要になります。

ここでは、アクセシビリティを劇的に改善するための5つのポイントをご紹介していきます。

1. テキストコントラストを最適化する

テキストコントラストとは、背景と文字色とのコントラスト比のことです。
背景が白で文字が黒という最も色の差が大きい組み合わせだと21：1に、背景と文字が同じ色で、まったく見えないという場合には1：1という数値が出ます。
この計算で出た比が大きいほど、基本的には読みやすいということになります。

UIパーツや意図的に装飾されたテキストやロゴタイプなどは基本的には対象外ですが、基本的には12ptのレギュラーフォントで7：1、14ptの太字と18ptのレギュラーフォントで4.5：1がWCAG 2.0でのAAAの基準となっています(日本のJAS基準でも同様に定められています)。

Color SafeのようなWebアクセシビリティに対応したカラーピッカーを使えば、テキストコントラストを比較することができるので、大変便利です。

Color-Changes.png
Credit: Digital Telepathy

上図のように、色の組み合わせをピックアップし、コントラスト比を確認してみましょう。
もしテキストコントラストがイマイチであれば、若干の色味を変えるだけでもアクセシビリティが向上することがあります。

download.jpg

また、ChromeベースのブラウザVivaldiでは、ページアクションと呼ばれる機能があり、画面を白黒にしたり、色味を変更してアクセシビリティを確認する機能があります。
この機会に利用してみてはいかがでしょうか。

2. セマンティックなHTMLにする

セマンティックとは、*「文法上意味を持つ言語体系にする」*という意味です。
HTMLで言えば、imgタグにalt属性を入れたり、aタグにrel属性やaccesskey属性などを設定することです。

また、「受付はこちら」など、リンク上意味を持たないテキストにリンクを貼らないということも重要です。
聴覚障碍のある方は、ブラウザの読み上げ機能を利用することになりますが、そうした方々にとっても使い勝手のよいホームページにするには、「セマンティックな」ホームページにするのが一番有効な手段です。

3. フォームを最適化する

フォームに関しても、セマンティックかつ使い勝手のよいアクセシビリティの高い設計にすることが求められます。

例えば、フォームのコントローラーにid属性を付し、labelタグをつけることで、labelのfor属性と他のコントローラーのidタグが一致し、利便性の高いフォームになります。
また、ラジオボタンは小さくて非常にクリックしにくいので、アクセシビリティの観点ではあまり利用しないほうがいいとされています。

また、フォームの入力が不十分で警告を出す場合にも、わかりやすい色や文字の大きさを保つことが重要です。
何をどう直したほうがいいのかが分からなければ、結局はページの離脱にもつながります。