アクセシビリティ・サポーテッド（AS）情報：H24

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

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

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

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

テストファイル

H24のテストファイル

見解

達成可能

対象

イメージマップのarea要素のalt属性

注意点

多くのビジュアルブラウザでは、画像を非表示にしてもarea要素の代替テキストは表示されない。

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

画像を非表示に設定しているユーザーを想定する場合には、イメージマップだけでなく、各ホットスポットと同じリンク先へのテキストリンクを提供するとよい。

テスト結果の詳細

ユーザエージェント 検証結果 操作手順 備考
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 ○ ■操作手順
『テスト開始』、『図書館のフロアガイドです・・・ご覧下さい』の次の→を押すことで『マップの先頭：２項目』の次に『カウンター』『視聴覚室』が読み上げられた。またTabだとテスト対象の前のTabから直接フォーカスがあたる
■音声読み上げ
「図書館のフロアガイドです。各エリアの詳細についてはエリアを選んでご覧ください。マップの先頭：２項目、カウンター、視聴覚室、マップの終わりです。」
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棟 共通棟」
Firefox18.0.1 × 画像を以下のやり方で非表示にした。
ツール＞オプション＞コンテンツ
「画像を自動的に読み込む」のチェックをオフにする
area要素のalt属性に記述した代替テキストは表示されることを確認		 ×：ブラウザの設定を画像非表示にした際に、代替テキスト「S棟（ソリューション）棟」及び「O棟（オフィス）棟」及び「C棟（共通）棟」は表示されず、「富士通ソリューションスクエアの建物配置図です。詳細については各建物を選んでご覧ください。」が表示された。
Google Chrome 25 × 【1】ブラウザの設定を画像非表示にした際に、area要素のalt属性に記述した代替テキスト「S棟（ソリューション棟）」及び「O棟（オフィス棟）」及び「C棟（共通棟）」が表示されるかを確認する。
画像非表示の設定は下記の通り実施
ブラウザ右上のボタン→[コンテンツの設定]→“画像”[すべての画像を表示しない]にチェック		 【1】×
代替テキストが表示されないことを確認した。
Safari 6.0.5 × 画像の非表示はあらかじめ環境設定の詳細で「メニューバーに"開発"メニューを表示」を選択したうえで 開発→イメージを無効にする を選択 画像の表示されていた場所には何も表示されないものの、画像相当の大きさの空白は認められ、またマウスポインタを乗せたときにリンクの存在はポインタ形状の変化により確認できる
NVDA 2012.3 ○ ■操作手順
「テスト開始」と読まれた次の行に下矢印キーを使って移動すると、「S棟（ソリューション棟）」、「O棟（オフィス棟）」、「C棟（共通棟）」の順に読み上げられた。
■音声読み上げ
「画像リンク S棟 ソリューション棟　リンク オフィス棟　リンク C棟 共通棟」
PC-Talker 7 2.12 ○ ■操作手順
Tabキーで移動、またはCtrl＋下矢印キーで行読み
■音声読み上げ
「S棟ソリューション棟　リンク」
Tabキー、またはCtrl＋下矢印キー
「O棟オフィス棟　リンク」
Tabキー、またはCtrl＋下矢印キー
「C棟共通棟　リンク」		 ただし、Ctrl＋下矢印キーの場合はなぜか二巡する
VoiceOver ○ ■操作手順
2本指フリック、1本指フリックともに、alt属性に記載された代替テキストが読み上げられた。
■音声読み上げ
「S棟 ソリューション棟 リンク
O棟 オフィス棟 リンク
C棟 共通棟 リンク」