レベルNGの解説

画像には、画像の代わりとなるテキストを用意しなければなりません。トップページだけでなく、どのページにも多くの画像が使用されていますが、代わりのテキストがまったく用意されていません。

代わりのテキストがないと大変困る例が、このページにあります。画面の上の方にある『国内最大の水族館「フォーバレー」にようこそ』という文章は、一部が画像になっています。画像が表示されないブラウザや視覚障害者が利用する読み上げソフトでこの部分を読むとどうなるでしょうか。　『国内最大のにようこそ』となってしまい意味が通じません。

画像に代わりのテキストを用意することは、ＷＥＢの作者本人にしかできません。ＷＥＢを作るときには、この問題の重要性をよく理解しておく必要があります。

パソコンにスピーカーを取り付けている人は気が付いたと思いますが、このトップページを開くと、水族館の特徴を説明した音声が流れます。スピーカーを取り付けていない人や聴覚障害者は、テキストでこの水族館の特徴を紹介したページがないため、全く理解することができません。

また、画面中央には動く画像があり、白クマやエビなどの絵の上にマウスを乗せると、解説文が表示されると同時に、詳しい説明のページにリンクする仕掛けになっています。

この動く画像は、「FLASH（フラッシュ）」という技術で作られており、最近では比較的多く利用されている技術です。しかし、ブラウザによってはこのフラッシュの画像を表示できませんし、動いている画像にうまくマウスを乗せられない人もいるでしょう。このような動画など、インタラクティブな機能を提供する場合は、利用できない人のことを考えて、他の方法でも同じ情報が得られるように配慮しなければなりません。

画面の下の方に４つの魚の画像があり、それぞれ色分けされています。それぞれの色は、水族館の４つの展示ゾーンに対応しているのですが、その対応は色だけが頼りです。

もし、このページを白黒画面で見ていたら、魚の画像と水族館の展示ゾーンとの関係を理解することができるでしょうか。

また、一般のWEBページでは文章の一部を強調するときに、文字の色を赤などの色で表現することがよく行われています。しかし、色の情報がなければ強調していることが伝わりません。このように、色だけで意味の違いを表現することは避けなければいけません。

このページで注目しておきたいのは、表の画像です。順位のデータを画像にしたため、画像の代わりとなるテキストや補足説明を加えなければ順位の情報は伝わりません。

このようにデータを示す場合は、画像ではなくテーブルを利用すべきです。ＷＥＢページの情報を、テーブルなど基本的なHTMLで表現することは、大切なことです。基本的なHTMLで書かれたＷＥＢページは、障害者や高齢者が利用するアクセス支援ソフトで、障害の種類や程度にあわせた表現形式に変換することが容易です。

なお、データをあらわす表では見出しや表題をつける必要があります。（5.1.2）【優先度1】

入場料の料金表は、一見わかりやすく並んでいます。ところが、視覚障害者用の音声読み上げソフトでは、セルを順に読み上げるため、見出しと金額の対応がつきにくい可能性があります。

表の中で、どれが見出しであるかを示しておくことは、音声読み上げソフトなどを利用した場合でも、表の正しい意味を伝えるためには重要なことです。

このページでは、水族館の所在地を示すために地図が用意されています。しかし、「地図はこちら」というリンクをクリックすると、新しいウィンドウが開き、地図の画像が表示されます。

新しいウィンドウが開いたり、すでに表示されている別ウィンドウの内容が変わったりすると、その変化を視覚的に認識できない場合に、内容が伝わらない可能性があります。

このページでは、文章をニ段にレイアウトするために、テーブルを利用しています。一見しただけでは問題ないように見えますが、テーブルの組み方が文章の途中で行われており、音声読み上げソフトなどを利用した場合は、正しく表現されない可能性があります。

レイアウトの目的でテーブルを利用することは、現在でもよく行われていますが、少なくとも文章の意味が通るよう配慮することが必要です。