Webアクセシビリティ

読み:うぇぶあくせしびりてぃ / 英語表記:web accessibility

障害や利用環境の違いによらず、Webの情報や機能を利用できるようにすること。色や形だけに依存せず、意味を伝えるテキストや適切な文書構造を備える。

イマシルちゃんの解説

Webアクセシビリティは、障害や使う機器の違いにかかわらず、Webの情報や機能を使えるようにするための考え方だよ。
たとえばエラーを赤色だけで知らせると、色を区別しづらい人には伝わらないことがあるんだ。
そこで、どこを直すのかを文字でも伝えるよ。
画面の内容を音声などで伝えるスクリーンリーダーに情報が伝わる文書構造や、マウスを使わずキーボードで扱える作りも大切なの。
見た目を整えるだけでなく、情報の受け取り方や入力の方法が違っても目的を果たせるようにするんだ。

より深い解説

見た目だけに依存しない

「赤い項目を直してください」「右の丸いボタンを押してください」のような指示だけでは、色や形、配置を利用できない人に伝わらない。対象を識別できる名称や説明を併用する。

情報配慮の例
入力エラー色に加えて、項目名と修正方法を示す
グラフ色だけで系列を分けず、ラベルや模様を加える
意味のある画像目的に合う代替テキストを付ける
装飾だけの画像不要な読み上げを省く

画像の説明は、見えているものをすべて列挙するのではなく、その場所で伝えるべき内容に合わせる。

文書の構造とタイトル

ページのタイトルは、そのページの主題や目的を示す。サイト内の全ページを同名にすると、タブや履歴から区別しにくい。

見出し、リスト、表などには意味に合ったHTML要素を使う。スクリーンリーダーは、画面の情報を音声などで伝える支援技術であり、意味のある構造を使って移動できる。表は行列の関係を示すために使い、単なる配置のために使うことを避ける。

機能の使い方をそろえる

項目確認すること
キーボードマウスがなくても主要機能を操作できるか
フォーカス現在の選択位置が見えるか
ナビゲーション繰り返し現れる案内の順序や位置が一貫しているか
入力項目読み上げでも名前と入力欄の対応が分かるか

空き場所に合わせてメニューを毎回移すと、利用者は同じ機能を探し直すことになる。見た目の整い方だけで判断しない。

確認方法

自動検査は、代替テキストの欠落などを発見するのに役立つが、説明の適切さまで自動で保証できない。キーボード操作、読み上げ、拡大表示などでも確認する。

使いやすさを示すユーザビリティと関係が深いが、対象や評価の観点は同一ではない。多数の人が速く使えても、特定の人が機能を利用できなければ改善が必要である。

実際の試験ではここに出る!全1問

テクニカルエンジニア(ネットワーク)

午前

この用語が出てくる記事

↑