Webアクセシビリティ
障害や利用環境の違いによらず、Webの情報や機能を利用できるようにすること。色や形だけに依存せず、意味を伝えるテキストや適切な文書構造を備える。
イマシルちゃんの解説
案内板が赤と緑の印だけだったら、区別しづらい人もいるよね。
「入口」「出口」と文字も添えてあれば、別の手がかりになるんだ。
目で見ずに案内を聞く人や、指先だけで使う人もいるよ。
いろんな受け取り方でも、同じ場所へたどり着けるようにするんだ。
この解説はわかりやすかったですか？
より深い解説
見た目だけに依存しない
「赤い項目を直してください」「右の丸いボタンを押してください」のような指示だけでは、色や形、配置を利用できない人に伝わらない。対象を識別できる名称や説明を併用する。
| 情報 | 配慮の例 |
|---|---|
| 入力エラー | 色に加えて、項目名と修正方法を示す |
| グラフ | 色だけで系列を分けず、ラベルや模様を加える |
| 意味のある画像 | 目的に合う代替テキストを付ける |
| 装飾だけの画像 | 不要な読み上げを省く |
画像の説明は、見えているものをすべて列挙するのではなく、その場所で伝えるべき内容に合わせる。
文書の構造とタイトル
ページのタイトルは、そのページの主題や目的を示す。サイト内の全ページを同名にすると、タブや履歴から区別しにくい。
見出し、リスト、表などには意味に合ったHTML要素を使う。スクリーンリーダーは、画面の情報を音声などで伝える支援技術であり、意味のある構造を使って移動できる。表は行列の関係を示すために使い、単なる配置のために使うことを避ける。
機能の使い方をそろえる
| 項目 | 確認すること |
|---|---|
| キーボード | マウスがなくても主要機能を操作できるか |
| フォーカス | 現在の選択位置が見えるか |
| ナビゲーション | 繰り返し現れる案内の順序や位置が一貫しているか |
| 入力項目 | 読み上げでも名前と入力欄の対応が分かるか |
空き場所に合わせてメニューを毎回移すと、利用者は同じ機能を探し直すことになる。見た目の整い方だけで判断しない。
確認方法
自動検査は、代替テキストの欠落などを発見するのに役立つが、説明の適切さまで自動で保証できない。キーボード操作、読み上げ、拡大表示などでも確認する。
使いやすさを示すユーザビリティと関係が深いが、対象や評価の観点は同一ではない。多数の人が速く使えても、特定の人が機能を利用できなければ改善が必要である。