レベルNGの解説
レベル0：
このWEBサイトは、アクセシビリティに全く配慮していない「よくない例」です。一見、問題なさそうなこのWEBサイトには、多くの問題が隠れています。障害者や高齢者を含め、あらゆる立場の人が同じ内容の情報を得られるWEBサイトを作るには、こうした隠れた問題点を発見することが重要になるのです。
みなさんは、このWEBサイトの問題点がわかりますか？ ウェブヘルパーは、WEBページのアクセシビリティを点検し問題点を指摘してくれます。ウェブヘルパーの点検結果を参考にしながら、このサンプルサイトの問題点を探してみましょう。
主な問題点を理解できたら、これらの問題がどのように修正されたかを、アクセシビリティの実現レベルごとに比較してみましょう。
トップページの主な問題点
ウェブヘルパーでの点検結果を見てみましょう。
- フレームセットの点検結果
- メニュー（左側）の点検結果
- 本文（右側）の点検結果
主な問題点を理解できたら、これらの問題がどのように修正されたかを、アクセシビリティの実現レベルごとに比較してみましょう。
1）画像の代わりとなるテキストが用意されていません（1.1.1）【優先度1+】
画像には、画像の代わりとなるテキストを用意しなければなりません。トップページだけでなく、どのページにも多くの画像が使用されていますが、全く代わりのテキストが用意されていません。
代わりのテキストがないと大変困る例が、このページにあります。画面の上の方にある『国内最大の水族館「フォーバレー」にようこそ』という文章は、一部が画像になっています。画像が表示されないブラウザや視覚障害者が利用する読み上げソフトでこの部分を読むとどうなるでしょうか。 『国内最大のにようこそ』となってしまい意味が通じません。
画像に代わりのテキストを用意することは、WEBの作者本人にしかできません。WEBを作るときには、この問題の重要性をよく理解しておく必要があります。
2）スクリプトやアプレット、その他のプログラムの内容に代わるテキストや、内容の代わりとなるテキストを記述したファイルへのリンクが用意されていません（6.3.1）【優先度1+】
パソコンにスピーカーを取り付けている人は気が付いたと思いますが、このトップページを開くと、水族館の特徴を説明した音声が流れます。スピーカーを取り付けていない人や聴覚障害者は、テキストでこの水族館の特徴を紹介したページがないため、全く理解することができません。
また、画面中央には動く画像があり、白クマやエビなどの絵の上にマウスを乗せると、解説文が表示されると同時に、詳しい説明のページにリンクする仕掛けになっています。
この動く画像は、「FLASH（フラッシュ）」という技術で作られており、最近では比較的多く利用されている技術です。しかし、ブラウザによってはこのフラッシュの画像を表示できませんし、動いている画像にうまくマウスを乗せられない人もいるでしょう。このような動画であったり、インタラクティブな機能を提供する場合は、利用できない人のことを考えて、他の方法でも同じ情報が得られるように配慮しなければなりません。
3）意味の違いが色の違いだけで区別されています（2.1.1）【優先度1+】
画面の下の方に4つの魚の画像があり、それぞれ色分けされています。それぞれの色は、水族館の4つの展示ゾーンに対応しているのですが、その対応は色だけが頼りです。
もし、このページを白黒画面で見ていたら、魚の画像と水族館の展示ゾーンとの関係を理解することができるでしょうか。
また、一般のWEBページでは文章の一部を強調するときに、文字の色を赤などの色で表現することがよく行われています。しかし、色の情報がなければ強調していることが伝わりません。このように、色だけで意味の違いを表現することは避けなければいけません。
このページのトップへ戻る↑
ニュースのページの主な問題点
ウェブヘルパーでの点検結果を見てみましょう。
このページで注目しておきたいのは、表の画像です。順位のデータを画像にしたため、画像の代わりとなるテキストや補足説明を加えなければ順位の情報は伝わりません。
このようにデータを示す場合は、画像ではなくテーブルを利用すべきです。WEBページの情報を、テーブルなど基本的なHTMLで表現することは、大切なことです。基本的なHTMLで書かれたWEBページは、障害者や高齢者が利用するアクセス支援ソフトで、障害の種類や程度にあわせた表現形式に変換することが容易です。
なお、データをあらわす表では見出しや表題をつける必要があります。（5.1.2）【優先度1+】
このページのトップへ戻る↑
営業案内ページの主な問題点
ウェブヘルパーでの点検結果を見てみましょう。
このページでは2つの問題点に注目します。
1）表に見出しが用意されていません（5.1.2）【優先度1+】
表に、見出しタグが正しく使用されていません（5.2.1）【優先度1】
入場料の料金表は、一見わかりやすく並んでいます。ところが、視覚障害者用の音声読み上げソフトでは、セルを順に読み上げるため、見出しと金額の対応がつきにくい可能性があります。
表の中で、どれが見出しであるかを示しておくことは、音声読み上げソフトなどを利用した場合でも、表の正しい意味を伝えるためには重要なことです。
2）アプレットやスクリプト（プログラム）により、新しいウィンドウが開くように指定されています（10.1.2）【優先度2】
このページでは、水族館の所在地を示すために地図が用意されています。しかし、「地図はこちら」というリンクをクリックすると、新しいウィンドウが開き、地図の画像が表示されます。
新しいウィンドウが開いたり表示されているウィンドウの内容が変わったりすると、その変化を視覚的に認識できない場合に、内容が伝わらない可能性があります。
このページのトップへ戻る↑
飼育日記のページの主な問題点
このページでは、次の問題点に注目します。
1）レイアウトテーブルの各セルは、意味の通る順序で配置されていません（5.3.1）【優先度2】
このページでは、文章をニ段にレイアウトするために、テーブルを利用しています。一見しただけでは問題ないように見えますが、テーブルの組み方が文章の途中で行われており、音声読み上げソフトなどを利用した場合は、正しく表現されない可能性があります。
レイアウトの目的でテーブルを利用することは、現在でもよく行われていますが、少なくとも文章の意味が通るよう配慮することが必要です。
このページのトップへ戻る↑
