9.3 アクセシビリティ
ここまで,WEBの設計について一通り解説を行ってきました.最後に,皆さんが制作するWEBサイトが多くの人にとって利用しやすいものとなるために,アクセシビリティの概念について説明します.
アクセシビリティ
WEBページには様々な人が訪れます.お年寄りや小さな子供,視覚や聴覚,手が不自由な人,テキストしか表示できないブラウザを使用している人,母国語が異なる人(日本語が理解できない人)などが皆さんの制作するページを訪れることもあるでしょう.
それゆえに,WEBページを設計する際には,どのような環境にあるユーザにとっても利用しやすいページや構造をデザインする必要があります.すなわち,WEBの使いやすさ(アクセシビリティ)を意識した設計を行う必要があります.
アクセシビリティと言うと,障害者や高齢者だけがその対象であるように思われがちですが,障害者や高齢者などにとって利用しやすいページは,それ以外の訪問者にとっても利用しやすいページであると言えます.
まず,WEBページには以下のような環境にある人が訪れる可能性があることに留意する必要があります.
- 視覚や聴覚に障害がある
- 手などに障害があり,キーボードやマウスを利用しにくい
- 小さなスクリーンを利用している
- 低速な回線を利用してインターネットに接続している
- 記載されている言語を理解することができない
- 古いブラウザや音声ブラウザなど,様々なブラウザを利用している
アクセシビリティのガイドライン
ここでは,一般的なアクセシビリティのガイドラインを簡単に紹介します.全てを完璧に満たす必要はありませんが,少しでも環境の異なる訪問者に優しいページを作るよう心がけましょう.
- HTMLの文法が正しいかどうかチェックしましょう.
- ページタイトルは,ページの内容が一目で理解しやすいようにつけましょう
- 背景色,文字色には十分なコントラストを持たせましょう(薄い無地の背景に濃い色の文字,など)
- 画像には,(特に不必要な場合を除き)alt属性をつけましょう
- リンクボタンになっている画像全てにalt属性をつけ,リンク先を明確にしましょう
- リンクボタンになっている画像は,その画像がリンクボタンであることが分かるようにしましょう
- 色によって伝えられる情報は,色がなくても伝わるように工夫しましょう
- フレームの使用は必要最低限にしましょう
- アニメーションは,それが本当に必要である場合を除き利用を控えましょう
特に,画像のalt属性に関して説明します.画像を表示しないブラウザは,代わりにこの属性で指定された文字列を表示します.画像を表示しない理由としては,画像形式に対応していない,携帯電話のように表示能力が限られている,画像転送に時間がかかり過ぎる,視覚障害者のための専用ブラウザである,などが考えられます.
alt要素の内容は画像を表示しないブラウザで見る人の為に,その画像がどういうものであるのを簡潔に分かりやすく書きましょう.
WEBのアクセシビリティについてのより詳細な情報は,例えば下記のようなページから入手することができます.
● 練習問題
教材であげたアクセシビリティのガイドラインは,それぞれどのような環境にあるユーザを考慮したものであるかについて,上記のページなどを参考にして調べなさい.