このページは、ホームページ製作者のかたへの
弊社からの提案です。
プロローグ
弊社はボイス・サーフィンの動作確認をするため、企業・個人のホームページを問わず、これまで多くのホームページを見てきました。
そこで気がついたのは、ボイス・サーフィンのようなホームページ読み上げソフトに とって、わかりずらいホームページが非常に多いということです。 某大手企業のホームページは実にひどい状況でした。
企業・個人を問わず、ほとんどのホームページ製作者は、全盲の人が ホームページを閲覧するなどとは想像すらしないでしょう。それ以前に、パソコン を使うこと自体、信じられないのかもしれません。 ここでは、そんなホームページ製作者の方々に、少しでもホームページを 読み上げやすいものにしてほしいという思いから、ホームページ読み上げソフトにとって「やさしいホームページとはどのようなものか」を解説します。 ただし、これは弊社独自の提案によるものです。 ホームページの読み上げは、そのソフトの仕様によって若干の差はあるものの、 基本的な考えは一緒です。
文字と文字の間に空白をむやみに入れない
良い例：函館 → ハコダテと読み上げる
悪い例：函 館 → ハコカンと読んでしまう（ボイス・サーフィンの場合）
上記の例のように文字と文字の間にスペースを入れると、読み上げが違ってしまう 場合があります。
これは、そのソフトが使用している読み上げエンジンにもよるのですが、 一般には好ましいものではありません。
体裁を整えるためにスペースを入れている場合が見受けられますが、可能な限り避けるべきです。
【参考】読み上げソフトは「読み上げ辞書」を持っていますが、 文字と文字の間にスペースを含んだ文字列は、辞書に登録できないことがあります。 そのため、できる限り上記のような記述は避けるべきなのです。
静止画像には説明文を付ける？
目の見えない人には画像がどんなものであるかわからないため、基本的に 静止画像には説明用の文字列（代替え文字列）を付けることが望ましいとされています。
説明用の文字列とはIMGタグのALT属性のことです。 市販されているホームページ読み上げソフトは、このALT属性の文字列を取り出して読み上げるようになっています。
したがって、ALT属性を適切に記述すれば、よりわかりやすいホームページとなるわけです。
ALT属性のことを「画像の説明」と書いている解説書もあるようですが、適当な表現とは思えません。
例えば、以下は悪い例です。
悪い例１：
悪い例２：
このような説明文を付けるなら、あえて付ける必要はないでしょう。 音声だけを頼りに閲覧している視覚障害者にとって、混乱を招く可能性が高いと 推測できるからです。
それでは、どのようにしたらいいのか？ 一言で言うと「前後の文章を考えて説明文を付ける」ことが望ましいと考えます。
例えば、このページは前後の文章を意識して画像に説明文をつけています。
もちろん、説明文をつける必要がない場合も考えられます。
静止画像を多用するのは避ける
ホームページ読み上げソフトによっては、アクセスしたページの全てを取り込んで から読み上げを開始するものがあります。
したがって、画像を多用すると 読み上げが開始されるまでの待ち時間が長くなるわけです。
ですから、むやみに静止画像やアニメーション画像を多用するのは避けるべきです。
マルチフレーム・ページはできるだけ避ける
現状、マルチフレーム・ページは、ホームページ読み上げソフトにとってあまり得意なページだとはいえない状況です。
もちろん、ホームページ読み上げソフトの仕様にもよりますが、視覚障害者にとって、わかりにくいページになりがちです。
マルチフレーム・ページで多く見かけるのが、縦方向に２つのフレームに分割された ページです。
このようなページは、左フレームにはメニュー（目次）が表示され、右フレームには、選択したメニューの内容が表示されることが多いようです。
見た目では、どのフレームの内容が変わったかがわかりますが、ホームページ読み上げソフトの場合、フレームの内容が変わったかどうかは読み上げてみなければわからないのです。
場合によってはテキストのみのページを設ける
前述した静止画像やマルチフレームの件を考慮すると、場合によってはテキストのみの ページを別途作成する場合も必要であると考えます。
フォーム要素にはラベルをつける
投稿ページのような入力フォームのあるページを多く見かけます。
見た目では、どの文字列がどのフォーム要素に対応しているかわかるのですが、ＨＴＭＬソースコードレベルでは、対応づけがなされていないページがほとんどです。
上記の例を見てください。例１と例２は同じように見えますが、ＨＴＭＬソースコードレベルでは違います。
ほとんどの場合、例１のような記述ですが、例２のＨＴＭＬソースコードを見てわかるとおり、フォーム要素には対応するラベルを定義することができるのです。
ボイス・サーフィンでは、対応するラベルとフォーム要素を組み合わせて読み上げるため、例１より例２のほうがいいわけです。
ちなみに、LABELタグはアクセスビリティーの向上を図るため、HTML4.0から追加されたものです。