テキストブラウザへの配慮や、音声ブラウザへの配慮などを行うことがアクセシビリティの基本です。
重要はことは、「重要な情報は見栄えだけに頼らずに伝えること」です。「ちょっとピンクの方がカワイイかも」といった、特に重要ではないものであれば、<font> を用いて色を変えても、実はそれほど不都合はなかったりします(※1)。逆に、大事なことを画像のみで表現したりなど、HTML4.01 Strict の仕様に従っていてもアクセシビリティを保てないページもできてしまいます。ここでは、アクセシビリティを保つためのちょっとしたコツを紹介します。
※1 とは言っても、<font>は HTML5 では廃止されたこともあり、利用すべきではありません。
画像が無くても充分意味が伝わるように心がけましょう。HTML4.01では、すべての画像に alt属性をつけることを要求しています。画像を表示しないモードのブラウザやテキストブラウザは、画像の代わりに alt属性の内容を表示します。音声ブラウザでも alt属性の内容を読みます。alt属性を指定しない画像の場合、Lynx などのテキストブラウザでは、画像の場所に [INLINE] と表示したりします。周りのテキストとのバランスを充分考慮し、画像に適切な alt属性を指定しましょう。
× <img src="xx.gif"> ○ <img src="xx.gif" alt="○○さんの似顔絵">
逆に、飾りつけなど、見栄えのための画像であって、特に文章的な意味の無い画像には、alt=" " のように、1文字のスペース文字を指定してやるとよいそうです。
○ <img src="xx.gif" alt=" ">
白黒端末や、太字を表示できないブラウザでも、正確に意味が伝わるように心がけましょう。例えば、「下記の赤い文字(太字)の部分が・・・」のような書き方をすると、音声ブラウザでは伝わりません。
× 下記の太字の部分が省略時の値です。 ○ 省略時の値は○○になります。
多くの音声ブラウザは改行(<br> による改行や、HTMLソース中の改行)された位置で文章を区切って発音するため、文章や単語の途中で改行するのは好ましくありません。どうしても改行が必要であれば、文節の区切りで改行するようにしましょう。
○ 文節の区切りで 改行しましょう。 × 文節の区切りで改 行しましょう。
また、同様に、単語の途中に空白文字を入れるのも好ましくありません。下記の例では「たび こう しゃ」と読まれてしまうことがあります。
○ 旅行者 × 旅 行 者
テーブルによるレイアウトを行うことは望ましくないと言われていますが、どうしてもレイアウトに使用する場合は、テーブル情報を無視しても、つまり、テーブルの中身を左上から順番に読み上げていっても、十分に意味が伝わるように心がけましょう。
一時的に <table> を <xtable> など無効なタグ名に書き換えて、ブラウザで表示チェックを行ってみるのも手かもしれません。
JavaScript をサポートしていないとページを渡り歩けないサイトは注意が必要です。JavaScript をサポートしていなくても正常に渡り歩けるようにするか、代替手段を提供しましょう。
(^_^) などの顔文字は「カッコ ハット アンダーバー ハット カッコ」などと読まれたりします。(記号を全体的に読み飛ばすものも多いそうですが)
あと、細かなことですが、「わ~い」と書くと、「わ から い」と読む音声ブラウザが多いそうです。「わーい」と書くと「わーい」と読んでくれます。
実際に、テキストブラウザや、音声ブラウザで、自分のページがどのように表現されるのかをチェックしたい方は、下記のページなどを参照してください。