アクセシビリティと視覚デザインを分けない

アクセシビリティの基本

Webアクセシビリティでは、情報が知覚できること、操作できること、理解できること、技術的に堅牢であることが重視されます。

スクリーンリーダー対応、キーボード操作、代替テキスト、見出し構造、フォームラベル、色のコントラストなどは、基本的な確認項目です。

見える人にとってのアクセシビリティ

アクセシビリティは、全盲者だけの問題ではありません。弱視者、高齢者、スマートフォン利用者、一時的に片手が使えない人、明るい屋外で画面を見る人など、多くの人に関係します。

文字が小さすぎる、色の差が弱すぎる、ボタンが小さい、余白が足りない、情報が詰まっている、といった問題は、見える利用者にも負担を与えます。

色とコントラスト

文字色と背景色の差が弱いと、見える人にも文字が読みにくくなります。特に薄い灰色の文字、淡い背景に淡い文字、画像の上に置いた文字は注意が必要です。

コントラストは、自動チェックツールで確認できます。ただし、ツールで合格しても、実際の画面で見やすいとは限りません。目視確認も必要です。

フォーカス表示

キーボードで操作するとき、現在どのリンクやボタンにいるかを示す表示をフォーカス表示といいます。

見えるキーボード利用者にとって、フォーカス表示が見えない画面は非常に使いにくいです。スクリーンリーダー利用者だけでなく、視覚的なキーボード利用者も考慮します。

確認チェックリスト

• 見出しの順序が自然である。
• リンク名だけで移動先が分かる。
• ボタン名だけで操作内容が分かる。
• フォーム項目にラベルがある。
• エラーが色だけで示されていない。
• キーボードだけで操作できる。
• フォーカス位置が見える。
• 文字と背景の差が十分である。
• スマートフォンで横スクロールが発生しない。

読み上げ品質と目視品質は別の確認軸である

スクリーンリーダーで順番に読めることは重要です。しかし、それだけでは見える利用者にとって良い画面とは限りません。読み上げ上は正しくても、見た目では「まとまりが分からない」「ボタンが遠い」「文字が小さい」「重要な情報が埋もれている」という問題が起こります。