そこでユーディットでは、最低限これだけはクリアしておきたいアクセシビリティの6項目を策定した。このガイドラインを参考にしてアクセシブルなウェブの作成を始めて欲しい。そのほか、アクセシビリティに関するリンク集も用意したので参考にして欲しい。
| 【１】 画像にはALT属性を付ける |
視覚障害者がウェブを利用する際に使用する音声ブラウザは、HTML文章を読み上げていく。とはいえ、gifやjpegなどの画像情報を解析し、その内容を説明する機能はない。HTML文章内に画像へのリンクがあっても、読み上げられずに先に進んでしまうので、もし画像に重要な情報が含まれていた場合、音声ブラウザを利用している人にはその内容が伝わらない。試しにブラウザの画像表示をOFFにしてウェブを見てほしい。その状態で内容が伝われば問題ないが、そうでない場合、画像を説明するための文章を用意しなければならない。この説明文を画像のALT属性に書き込んでおけば、音声ブラウザはこの文章を読み上げるので、画像の内容を説明することができる。
| （×）悪い「ALT属性」表記例 |
|
 |
 HTMLソース： IMG SRC="img/sp0906_c5.jpg" WIDTH=37 HEIGHT=17 ALT="写真1" BORDER="0" |
… 「ALT="写真1"」ではどんな写真か内容が分からない。逆に説明文が長すぎるとNetscapeでは横1行で表示するため、画面からはみ出て切れてしまう場合がある。
| （◎）良い「ALT属性」表記例 |
|
| |
HTMLソース： IMG SRC="img/sp0906_c5.jpg" WIDTH=37 HEIGHT=17 ALT="写真1：都庁北展望台からの景色" BORDER="0" |
… 「ALT="写真1：都庁北展望台からの景色"」のように写真の内容が分かる説明文になっている。
| 【２】 リンクボタンになっている画像の全てにALT属性を使ってリンク先を明確にする |
音声ブラウザでリンクを読み上げると「エイチティーティーピーコロンスラッシュスラッシュダブリューダブリューダブリュードット……」と読み上げ始める。これではどこにリンクされているのか分かりにくい。ボタンには必ずリンク先の説明をするAltを付ける必要がある。
| （×）悪い「ALT属性」表記例 |
|
| |
 HTMLソース： IMG SRC="sp0906_c4.gif" WIDTH="37" HEIGHT="17" BORDER="0" |
…「ALT」のタグ自体が入っていないので「エイチティーティーピーコロンスラッシュスラッシュ…」とURLを読み上げてしまう。
| （◎）良い「ALT属性」表記例 |
|
| |
HTMLソース： IMG ALT="トップページへ" SRC="sp0906_c4.gif" WIDTH="37" HEIGHT="17" BORDER="0" |
…altの属性として「ALT="トップページへ"」のようにリンク先ページの説明テキストを入れる。
| （◎）良い「ALT属性」表記例（2） |
|
| |
トップページへ HTMLソース： IMG ALT=" " SRC="sp0906_c4.gif" WIDTH="37" HEIGHT="17" BORDER="0" |
…ただし、画像とテキストで同じリンク先に飛ばす場合は、テキスト情報があるのに、画像のALTに同じ情報を書くと音声ブラウザでは二重読みになってしまう。その場合は、基本的には、「ALT=" "」のように全角スペースを入れておけば良い（「ALT=""」のように属性に何も記入しなくても、音声ブラウザーは画像情報を読み上げないが、「ALT属性の付け忘れではなくあえて読み上げない」ことを示すために全角スペースを入れるほうが望ましい。また、英語等のページは文字化けの原因となるので半角スペースを入れた方がよい）。
| 【３】 日本語のページでは外国語の乱用はせず、誰にでも解る様に配慮する |
ウェブ上では自ずとIT用語が使われるが、初心者や高齢者には分かりにくい。同様に安易な外来語や外国語も避けるべきである。
| 【４】 色によって伝えられる情報は、色がなくても情報が伝わるようにすること |
男性の20人に1人が第二色盲であることを考えれば、緑の背景に赤字といった組み合わせを避けることは当然である。また、音声ブラウザでは文字の色まで気を使って読み上げないので、色分けで情報を伝える事をしてはいけない。
| 【５】 HEADに付けるは内容が解るように適切なタイトルを付けること |
「お気に入り」や「ブックマーク」に登録されるブラウザ左上のタイトルには、「Welcome My Homepage」「top」など後でどこのページか分からない表現や、分かりにくい英語は避ける必要がある。特に音声ブラウザではページの内容を把握する大事な情報なので、内容に合った適切な説明を付ける。
| 【６】 レイアウトのテーブルは、情報が適切に音声ブラウザで読み上げられること |
アクセシビリティを確保するために、テーブルは絶対に使ってはいけないという誤解を時々見受ける。しかし適切な方法で用いれば、アクセシビリティを損ねることは無い。音声ブラウザではテーブル内を左上から右下に向かって読んでいく。これはHTMLに記述されている順番と同じである。表やレイアウトを組むときに、このことに注意しないと、でたらめな順番で読み上げられてしまうので、意味が通じないことが起こる。
■テーブルの読み上げ順序 |
|||||||||||||||||||
|
|
||||||||||||||||||
| 音声ブラウザでテーブルが読み上げられる順番。 出所:ユーディット |
|||||||||||||||||||
