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

現在の位置:

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

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

レベルAの解説

このWEBサイトは、ウェブヘルパーの点検結果の「優先度1」の問題を中心に修正しました。

 → レベルAのサンプルへ

見た目にはあまり変化がありませんが、すべての画像に代わりのテキストを用意することなど、以下のような修正を行うことで、最低限のアクセシビリティは確保されました。

なお、基本的なHTMLで表現が可能なところは、なるべく基本的なHTMLを利用しシンプルな表現にするように修正しました。

通常では見ることができませんが、フレームに対応していないブラウザでも、情報を取得できるように、フレームセットファイルに「NOFRAMES(ノーフレームス)」を用意しました。(サンプルのメニューにある「フレーム非対応用ページ」から、フレームに対応していないブラウザで閲覧したときのページを確認することができます。)

a. 各ページの修正箇所と修正方法

1 全体

  • すべての画像にalt属性を指定し、適切な代替テキストを付与した。また、無意味な画像にはスペース(あるいはヌルや"*"等)を入れた(1.1.1)
  • すべてのページにTITLE要素を設定した(13.2.1)

2 フレームセットファイル

  • 各フレームにタイトルを用意した(12.1.1)
  • フレームに対応していないブラウザを使用している場合でも、内容が伝わるように、NOFRAMES要素を設定した(6.5.1)

3 メニュー(左側)

  • リンク先をプルダウンで選択するスクリプトを取りやめ、通常のリンクに変更した(1.1.10)

4 トップページ(右側)

  • 動画(FLASH)の内部で使用されているリンクに、代わりとなるテキストを用意した(1.1.9)
  • 音声で再生される内容と同じ内容のものを、テキストで用意した(6.3.1)
  • 魚のアイコンは、色とリンク先の対応関係が明確になるよう、下にリンク先を表示した(2.1.1)
  • 館内配置図に画像を補う内容のテキストをつけた(注2)

5 ニュース

  • 「人気お魚ランキング」は、データテーブルを用いて表現した(1.1.1)
  • 「人気お魚ランキング」のテーブルに見出しタグを適切に設定した(5.1.2)
  • 文章の途中では、画像化した文字を用いないようにした(注1)

6 営業案内

  • スクリプトで勝手に小さな別画面に表示させることをやめ、別の通常のブラウザ画面で表示されるように変更し、そのことを明示した(10.1.2)
  • 料金表のテーブルを、読み上げソフトでもわかりやすい形で構成しなおした(5.2.1)
  • 料金表のテーブルに見出しタグを適切に設定した(5.1.2)
  • 文章の途中では、画像化した文字を用いないようにした(3.1.1:注1)
  • 地図に道順を補足するテキストを用意した(注2)

7 飼育日記

  • 音声読み上げソフトなどで意味の誤解が生じないように、レイアウトテーブルの中の文章の順序を修正した(5.3.1)

注1:
ウェブヘルパーでは自動検出できませんが、画像化された文字は、サイズが小さい場合でも、多くの場合ブラウザ側ではサイズを変えられませんので注意しましょう。
注2:
ウェブヘルパーでは自動点検されませんが、画像内容を充分に補足するテキストを用意し、把握が容易になるよう配慮しています。
本文おわり:

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


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


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