第1章 ホームページ基礎知識

2001年5月6日

6.バリアフリーなホームページについて

ホームページを作成するときの注意点として、バリアフリーなページを作ることがあります。あなたがホームページを作成しているのなら、バリアフリーの扉「i-Checkerへようこそ」でバリアフリー度をチェックしてみて下さい。

情報弱者を作らないことを多くのWebマスターが実践することを望んでいます。例えば、腕や手が不自由な人にとって、例えばマウスは使いやすい機器ではありません。画像やテキストを使ったリンクボタンは大きめにしましょう。

画像をふんだんに使ったWebページも、目の不自由な人にとっては情報量がないに等しいのです。インターネットが社会インフラになりつつある今、このままでは問題があるWebページが多いのが実状です。W3Cが定めた「Web Content Accessibillty」では、視覚障害者がアクセスできるWebページを普及させるため、図や画像情報にはテキストデータを付加する。フレームにはタイトルをつける、などが推奨されています。

視覚障害の方などは画像を見ることができないですし、そういった方は音声や点字などでWebページを見ていると思います。具体的な対応について下記にまとめてみました。

(1)Webページのタイトルをつける

Webページを音声で読み上げるアプリケーションの場合、タイトルがないとURL等を読み上げます。全てのページにタイトルをつけることをお薦めします。

(2)画像にコメントをつける

画像はコメント(ALT属性)を必ずつけて下さい。PageMillの場合は属性パレットの「代替ラベル」です。音声でWebページを読み上げる場合は画像の部分はこの代替ラベルの内容を読み上げます。

(3)フレームについて

ホームページをテキストで読み上げる場合は、フレームの各ページをひとつのWebページとして読み上げます。音声で読み上げるアプリケーションの操作性が煩雑になりますから、できるだけフレームを使わないで下さい。フレームが必要な場合の注意点は、Webページのページ名(Page1.html、Page2.html・・・)という形ではなくそれぞれのページの意味がわかりやすいページにします。通常のWebページと同じように各ページのタイトルは入力してください。

(4)強制改行について

文章の途中に強制改行があると、文の区切りとして読み上げられます。文の途中で強制改行を入れないようにして下さい。PageMillの強制改行はshift + returnで改行された行です。HTMLのソース表示を行うと<BR>と表示されています。

(5)単語間の空白について

よくレイアウトを揃えるために、文字と文字の間に空白をあけていますが、例えば「空白」という単語を「空 白」とした場合。読み上げるときは「くうはく」ではなく「そら、しろ」と読み上げられることがあり、レイアウト優先で単語内に空白の挿入はしないで下さい。

(6)色について

色に頼るだけでなく、色なしで見られることを保証して下さい。例えばマイナス表記のとき赤字で示すことがありますが、こういった表現をマイナス符号をつけることによって対応できますね。また色を正確に判断できにくい方のために背景と文字色を選ぶます。青い背景に水色の文字は僕にも判読が難しいです。

(7)音楽について

Webページを開くと音楽が鳴るようなWebページが時々見かけますが、音声で読み上げる場合重なって聞こえます。どうしても音楽を流したい場合はMIDIファイルにした方がいいと思います。

(8)テーブル(表)使用について

表形式でデータを示す場合は「セル結合」を使用すると読み上げして聞く場合は判別できません。またできるだけ、レイアウトのためのテーブルの使用をやめてCSSでレイアウトしていくようにします。

(9)基本操作の場所を統一します

ナビゲーション「ホームページへ戻る」「前のページへ戻る」の場所を統一します。

(10)長いファイル名は使用しない

読み上げるアプリケーションの一部は長いファイル名には対応していません。12345678.txtのように8文字の英数字小文字と拡張子3文字の組み合わせのファイル名に統一します。

(11)Flashについて

最近では、Flashを使ってWebページをデザインすることが多いです。でも、Flash画像の中にメニューがある場合は、視覚障害の方などは画像を見ることができないですし、そういった方は音声や点字などで見ていますが、Flash内にそれらがあると、まったく読むことができません。ナビゲーションに必要なメニューは、テキストでも別記する方が親切だと思います。

| | | |

Update: Wed, Mar 31, 2004 / 9:26:44 AM