Webアクセシビリティ-2
この記事は約3分で読めます。
Webアクセシビリティの対応方法
視覚障害者への配慮
- 音声読み上げソフト使用時には、alt属性がないと何の画像か分からないため、画像には必ずalt属性を記述する。
更に、音声読み上げソフトは記号をそのまま読み上げてしまうため、表現によっては意味が伝わらなくなってしまう。
- 記号の乱用や、装飾目的で文字と文字の間にスペースを入れたりすることは避ける。
- 音声読み上げソフトの中にはWeb サイト内のリンクのみを抜き出して読む機能を持つものがあるため、リンク先が分かるテキストにリンクを貼るようにする。
色覚障害者への配慮
- 背景色と文字色の組み合わせに気を付ける。
健常者には正常に見える色でも、色覚障害者には違う色に見える。
特に赤と緑の組み合わせを見にくいと感じる人が多いので、こういった色の組み合わせは避けるようにする。
- 強調や意味の違いを色の違いだけで表現しないようにする。
- 文字を追加するなどの配慮をして、色を認識出来なくても意味が伝わるようにすることが望ましい。
聴覚障害者への配慮
- 音声や動画に説明・字幕を付ける。
- 音声や字幕の前後に中身を説明するテキストを用意し、音声を聞かなくても内容を把握出来るようにする。
身体障害者への配慮
- マウス操作以外でも操作出来るようにする。
Tab キーを押すと、Web サイト内のリンクなどのタグを、ソースコードに書かれた順番に移動していく。
これを繰り返し、Web サイトの最初から最後まで移動出来るか確認する。
- ボタンやフォーム等をキーボードで操作出来るか確認する。
- 画像等のクリック出来る範囲が小さすぎないようにしたり、リンクテキストが隣接しすぎないようにして、細かいマウス操作をしなくても済むようにする。
高齢者への配慮
- 複雑な操作を要求しすぎないようにする。
- 新語、英語、IT関係の専門用語の乱用を避け、ページレイアウトを極端に変えないようにする。
- title要素には分かりやすいページタイトルを付ける。
その他の人への配慮
- 機種依存文字を使わない。
機種依存文字とはソフトウェアや OS によっては表示されなかったり、違う文字として表示されたり、文字化けしてしまう可能性のある文字のことである。
様々な利用環境でも同じように表示させるために、機種依存文字は使わないか、または別の文字に置き換えるようにする。
- 文法ミスをなくす。
文法ミスがあると、制作者が意図した表示ではなくなる場合がある。
文法ミスにより思わぬところに表示エラーが発生する場合があるため、このような事態を防ぐためにも文法チェックソフトと目視でしっかりと確認し、文法ミスをなくすようにする。
- 構造的なミスをなくす。
HTML の各タグには構造的な意味があるため、使い方を間違えると正しい意味で伝わらない場合がある。
注意すべき点の例として、見出しタグは h1 から順番に使用することと、テーブルをレイアウト目的に使用しないことが挙げられる。
h1 から順番に使用することで、見出しの重要さを構造的に明示することが出来る。
また、テーブルの枠線を表示させない設定にして Webページをレイアウトすると、見栄えは良くなるが音声読み上げソフトでは表として解釈されるため、正しい順番で読まれず、意味が伝わらなくなってしまう。
構造的なミスは文法チェックソフトでエラーとならない場合が多く、どこが間違っているのか分かりにくい。
しかし、各タグの持つ構造的な意味を理解し、正しく使用することでミスを避けることが出来る。
タイトルとURLをコピーしました