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