「アクセシビリティ」とは何でしょうか。
インターネットを通じてHPやブログを閲覧している方は、様々な環境でアクセスされています。
・音声ブラウザでの閲覧
・マウスを使用しないで閲覧
・文字ブラウザ(画像が出ないブラウザ)での閲覧
上記のような環境が思い当たります。
HPを作成していくに当たり、アクセシビリティへの配慮をする事で様々な環境でのブラウジングに対応できます。また業務製作となれば複数の環境を想定して作られている事が理想と言えます。
1、「alt」属性は適切に記入しましょう。
よく画像を挿入する時に「alt」属性を言われますが、これは代替えテキストです。もし画像が映らなかったら、そして文字ブラウザの場合、そんな時にこの「alt」の内容が表示されます。ここにファイル名を入れていても全く意味がありません。ラインなどの画像は代換えテキストを「ライン」などと入れるより、むしろ「””」と空白にしておく方がいいでしょう。
IEにて画像にカーソルを合わせて「alt」の代替えテキストがポップアップされますが、他のブラウザでは出ない事からIE特有のバグと言えます。もし意図的にポップアップとして出したい場合・・例えば「別ページで表示します」などの注釈は、「title」属性を使用するべきです。
2、「tabindex、accesskey」を指定しましょう。
フォームなどを作成する時は、キーボードだけで適切に次の入力項目に「Tabキー」で飛ぶように、「tabindex」を、そしてショートカットで項目に行けるよう「accesskey」の設定をしておきましょう。
「accesskey」は設定するだけでなく、小さめのフォントでも構わないので、入力欄に書き添えてあげると分かりやすくなります。
例: お名前(n) [ ] ← (tabindex=1 accesskey=”n”)
HTMLのタグや属性には意味があります。その意味を確実に使い分ける事が大切です。この意味や使い方は「W3C勧告」に準拠して作っていく事が望ましいとされています。