ページの先頭: ナビゲーションをスキップ

現在の位置:

トップページ > ウェブアクセシビリティとは >  ウェブアクセシビリティ・サンプルサイト > 

本文はじめ: 本文を飛ばす

レベルNGの解説

このWEBサイトは、アクセシビリティに全く配慮していない「よくない例」です。一見、問題なさそうなこのWEBサイトには、多くの問題が隠れています。障害者や高齢者を含め、あらゆる立場の人が同じ内容の情報を得られるWEBサイトを作るには、こうした隠れた問題点を発見することが重要になるのです。

 → レベルNGのサンプルへ

みなさんは、このWEBサイトの問題点がわかりますか? ウェブヘルパーは、WEBページのアクセシビリティを点検し問題点を指摘してくれます。ウェブヘルパーの点検結果を参考にしながら、このサンプルサイトの問題点を探してみましょう。

目次おわり:

a. トップページの主な問題点

ウェブヘルパーでの点検結果を見てみましょう。

  • フレームセットの点検結果
  • メニュー(左側)の点検結果
  • 本文(右側)の点検結果

トップページの問題点のうち、注目したい点が3つあります。

1 画像の代わりとなるテキストが用意されていません(1.1.1)【優先度1】

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

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

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

2 スクリプトやアプレット、その他のプログラムの内容に代わるテキストや、 内容の代わりとなるテキストを記述したファイルへのリンクが用意されていません(6.3.1)【優先度1】

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

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

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

3 意味の違いが色の違いだけで区別されています(2.1.1)【優先度1】

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

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

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


b. ニュースのページの主な問題点

ウェブヘルパーでの点検結果を見てみましょう。

  • ニュースのページの点検結果

1 画像の代わりとなるテキストが用意されていません(1.1.1)【優先度1】

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

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

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


c. 営業案内ページの主な問題点

ウェブヘルパーでの点検結果を見てみましょう。

  • 営業案内ページの点検結果

このページでは2つの問題点に注目します。

1 表に見出しが用意されていません(5.1.2)【優先度1】
表に、見出しタグが正しく使用されていません(5.2.1)【優先度1】

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

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

2 アプレットやスクリプト(プログラム)により、新しいウィンドウが開くように指定されています(10.1.2)【優先度2】

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

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


d. 飼育日記のページの主な問題点

  • 飼育日記のページの点検結果

このページでは、次の問題点に注目します。

1 レイアウトテーブルの各セルは、意味が通る順序で配置されていません(5.3.1)【優先度2】

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

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


本文おわり:

「ウェブアクセシビリティ・サンプルサイト」に戻る(y)


ページの先頭に戻る(z) 


奥付:
(c) 2001-2003 by ウェブアクセシビリティ実証実験事務局,
(c) 2004- by 情報通信研究機構 バリアフリーサイト, all rights reserved. barrierfree@nict.go.jp
ページおわり: ページの先頭に戻る