アクセシビリティ・サポーテッド(AS)情報:H024

H024: イメージマップのarea要素に代替テキストを提供する

関連する達成基準の実装方法一覧

7.1.1.1非テキストコンテンツに関する達成基準 (等級A)

7.2.4.4文脈におけるリンクの目的に関する達成基準 (等級A)

テストファイル

H024のテストファイル

見解

達成可能

対象

area要素のalt属性

代替もしくは推奨する方法

IE 6、IE 7、IE 8、Firefox、Safari、Google Chromeでは画像を非表示にすると代替テキストが表示されない。そのため、画像非表示に設定しているユーザーを想定する場合には、イメージマップだけでなく、各ホットスポットと同じリンク先へのテキストリンクを提供するとよい。

テスト結果の詳細

ユーザエージェント 検証結果 操作手順 備考
Internet Explorer 6.0 × 画像をインターネットオプションのところで「画像を表示しない」に設定して実行。area要素のalt属性は表示されない。 カーソルを持っていくとツールチップでは「カウンター」など表示される。
Internet Explorer 7.0 × 設定を行い画像非表示にすると、画像のアイコンと「図書館のフロアガイドです…」というテキストは表示されるが、「カウンター」「視聴覚室」は表示されない。 ※もともと表示されていた部分にカーソルを当てると代替テキストは表示される
Internet Explorer 8.0 × 設定を行い画像非表示にすると、「富士通ソリューションスクエアの建物配置図です。詳細については各建物を選らんでご覧ください。」というテキストは表示されるが、、area要素のalt属性に記述した代替テキスト「S棟(ソリューション棟)」及び「O棟(オフィス棟)」及び「C棟(共通棟)」は表示されない。
Internet Explorer 9 × 画像を以下のやり方で非表示にした。
ツールメニュー>インターネットオプション>詳細設定>マルチメディア
「画像を表示する」のチェックをオフにする
area要素のalt属性に記述した代替テキストは表示されることを確認
×:ブラウザの設定を画像非表示にした際に、代替テキスト「S棟(ソリューション)棟」及び「O棟(オフィス)棟」及び「C棟(共通)棟」は表示されず、「富士通ソリューションスクエアの建物配置図です。詳細については各建物を選んでご覧ください。」が表示された。
Firefox 3.5 × 画像を以下のやり方で非表示にした。
ツールメニュー>オプション>コンテンツパネル
「画像を自動的に読み込む」のチェックをオフにする
「図書館のフロアガイドです。各エリアの詳細についてはエリアを選んでご覧ください。」と表示されるのみ。
area要素のalt属性に記述した代替テキスト「カウンター」及び「視聴覚室」は表示されなかった
Firefox 4.0 × 1:画像を以下のやり方で非表示にした。
ツールメニュー>オプション>コンテンツパネル
「画像を自動的に読み込む」のチェックをオフにする
area要素のalt属性に記述した代替テキストは表示されることを確認
×:ブラウザの設定を画像非表示にした際に、代替テキスト「S棟(ソリューション)棟」及び「O棟(オフィス)棟」及び「C棟(共通)棟」は表示されず、「富士通ソリューションスクエアの建物配置図です。詳細については各建物を選んでご覧ください。」が表示された。
Firefox 9.0 × 画像を以下のやり方で非表示にした。
ツール>オプション>コンテンツ
「画像を自動的に読み込む」のチェックをオフにする
area要素のalt属性に記述した代替テキストは表示されることを確認
×:ブラウザの設定を画像非表示にした際に、代替テキスト「S棟(ソリューション)棟」及び「O棟(オフィス)棟」及び「C棟(共通)棟」は表示されず、「富士通ソリューションスクエアの建物配置図です。詳細については各建物を選んでご覧ください。」が表示された。
Safari 3.2 × 設定を行い画像非表示にするとテスト開始とテスト終了の間には何もテキストが表示されない。 もともと表示されていた部分にカーソルを当てると矢印の表示がかわるが(ミッキーマウスの手)、代替テキストは出ない。
Safari 5.0.3 × 設定を行い画像非表示にするとテスト開始とテスト終了の間には何もテキストが表示されない。 もともと表示されていた部分にカーソルを当てると矢印の表示がかわるが(ミッキーマウスの手)、代替テキストは出ない。
JAWS for Windows 9.0 ■操作手順
「カウンター イメージマップリンク 画像」と読み上げられる。視聴覚室も同様。
■音声読み上げ
「カウンター イメージマップリンク 画像」
「視聴覚室 イメージマップリンク 画像」
ホームページ・リーダー 3.04 ■操作手順
『テスト開始』、『図書館のフロアガイドです・・・ご覧下さい』の次の→を押すことで『マップの先頭:2項目』の次に『カウンター』『視聴覚室』が読み上げられた。またTabだとテスト対象の前のTabから直接フォーカスがあたる
■音声読み上げ
「図書館のフロアガイドです。各エリアの詳細についてはエリアを選んでご覧ください。マップの先頭:2項目、カウンター、視聴覚室、マップの終わりです。」
PC-Talker XP 3.06 ■操作手順
alt属性に記述した代替テキスト「カウンター リンク」及び「視聴覚室 リンク」が読み上げられた。
■音声読み上げ
「カウンター リンク」、「視聴覚室 リンク」
PC-Talker XP 3.06 + NetReader 1.18 ■操作手順
area要素(ホットスポット)にフォーカスを移動させた際に、alt属性に記述した代替テキスト「S棟(ソリューション棟)」及び「O棟(オフィス棟)」及び「C棟(共通棟)」を読み上げた。
■音声読み上げ
「S 棟 カッコ ソリューション棟 カッコトジ リンク」
「O 棟 カッコ オフィス棟 カッコトジ リンク」
「C 棟 カッコ 共通棟 カッコトジ リンク」
FocusTalk V3 ■操作手順
Tabキーでフォーカスを移動させると、順に「S棟(ソリューション棟)、未訪問のリンク」、「O棟(オフィス棟)未訪問のリンク」、「C棟(共通棟)、未訪問のリンク」と読み上げた。
■音声読み上げ
「S棟(ソリューション棟)、未訪問のリンク」、「O棟(オフィス棟)未訪問のリンク」、「C棟(共通棟)、未訪問のリンク」
NVDA 2010.1j ■操作手順
「テスト開始」と読まれた次の行に下矢印キーを使って移動すると、「S棟(ソリューション棟)」、「O棟(オフィス棟)」、「C棟(共通棟)」の順に読み上げられた。
■音声読み上げ
「画像リンク S棟 ソリューション棟 リンク オフィス棟 既読リンク C棟 共通棟」
NVDA 2011.1 ■操作手順
「テスト開始」と読まれた次の行に下矢印キーを使って移動すると、「S棟(ソリューション棟)」、「O棟(オフィス棟)」、「C棟(共通棟)」の順に読み上げられた。
■音声読み上げ
「画像リンク S棟 ソリューション棟 リンク オフィス棟 リンク C棟 共通棟」