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

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

H37-2: img 要素の alt 属性を用いる

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

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

テストファイル

H37-2のテストファイル

見解

要注意

対象

イメージマップ画像のalt属性

注意点

iOS6のVoiceOverでは画像の代替テキストが読まれない。
Safari, Google Chromeでは画像を非表示にすると代替テキストが表示されない。

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

イメージマップ全体を理解するために必要な情報がある場合は、img要素のalt属性を使用するのではなく、通常のテキストとして提供するほうが良い。

テスト結果の詳細

ユーザエージェント 検証結果 操作手順 備考
Internet Explorer 6.0 ツール→インターネットオプション→詳細設定で画像の非表示設定を行った。
「デパートのフロアガイド。各階について詳しくお知りになりたい場合は各階を選択してください。」と表示された。
Internet Explorer 7.0 画像非表示設定にすると、イメージマップ画像の代わりに「デパートのフロアガイド。各階に~」が表示されている。
Internet Explorer 8.0 画像非表示設定にすると、イメージマップ画像の代わりに「デパートのフロアガイド。各階に~」が表示されている。
Internet Explorer 9 画像を以下のやり方で非表示にした。
ツール>オプション>コンテンツパネル
「画像を自動的に読み込む」のチェックをオフにする
caption要素で記述した「3月6日の週の予定」がデータテーブルの表題として表示されるかを確認する
Firefox 3.5 ツール→オプションから、コンテンツタブの画像を自動的に読み込むのチェックを外したところ、「デパートのフロアガイド。各階について詳しくお知りになりたい場合は各階を選択してください。」の代替テキストが表示される
Firefox 4.0 1:画像を以下のやり方で非表示。
ツールメニュー>オプション>コンテンツパネル
「画像を自動的に読み込む」のチェックをオフにする。
画像非表示にして、代替テキスト「デパートのフロアガイド。各階について詳しくお知りになりたい場合は各階を選択してください。」が表示されることを確認
Firefox 9.0 画像を以下のやり方で非表示にした。
ツール>オプション>コンテンツ
「画像を自動的に読み込む」のチェックをオフにする
caption要素で記述した「3月6日の週の予定」がデータテーブルの表題として表示されるかを確認する
Safari 3.2 × 開発メニューからイメージを無効にする、で画像を非表示にしたところ何も表示されなくなる。 枠の下に位置するアンダーラインだけは残っている。
Safari 5.0.3 × 画像非表示にすると何も表示されなくなる。 もともと表示されていた部分にカーソルを当てると矢印の表示がかわるが(ミッキーマウスの手)、代替テキストは出ない。
JAWS for Windows 9.0 ■操作手順
「デパートのフロアガイド。各階について詳しくお知りになりたい場合は各階を選択してください。4階 雑貨 書籍 3階 衣料品 2階 お菓子 その他食品 1階 生鮮食品 リンク 画像」と読み上げた。
■音声読み上げ
「デパートのフロアガイド マル 各階について詳しくお知りになりたい場合は各階を選択してください マル 4階 雑貨 書籍 3階 衣料品 2階 お菓子 その他食品 1階 生鮮食品 リンク 画像」
ホームページ・リーダー 3.04 ■操作手順
リンク音声で「デパートのフロアガイド。各階について詳しくお知りになりたい場合は各階を選択してください。」と読み上げる
■音声読み上げ
「デパートのフロアガイド。各階について詳しくお知りになりたい場合は各階を選択してください。」
PC-Talker XP 3.06 ■操作手順
「リンク」とだけ読み上げる。
■音声読み上げ
「4階雑貨書籍リンク、3階衣料品リンク。。。」
Tab移動で「4階コロン 書籍雑貨 リンク」…などを一つずつ読み上げた。
PC-Talker XP 3.06 + NetReader 1.18 ■操作手順
イメージマップ画像の代替テキスト「デパートのフロアガイド マル 各階について詳しくお知りになりたい場合は各階を選択してください マル フォーエフ 雑貨 書籍 スリーエフ 衣料品 トゥーエフ お菓子 その他食品 ワンエフ 生鮮食品」と読み上げられた。
■音声読み上げ
「デパートのフロアガイド マル 各階について詳しくお知りになりたい場合は各階を選択してください マル フォーエフ 雑貨 書籍 スリーエフ 衣料品 トゥーエフ お菓子 その他食品 ワンエフ 生鮮食品」
FocusTalk V3 ■操作手順
イメージマップ画像にフォーカスが移動すると、「デパートのフロアガイド。各階について詳しくお知りになりたい場合は各階をクリックしてください。、未訪問のリンク」と読み上げられた。
■音声読み上げ
「デパートのフロアガイド。各階について詳しくお知りになりたい場合は各階をクリックしてください。、未訪問のリンク」
NVDA 2010.1j × ■操作手順
「テスト開始」と読み上げられたところで下矢印キーを押したところ、続けて「テスト終了」と読み上げられた。
■音声読み上げ
「テスト開始 テスト終了」
NVDA 2011.1 × ■操作手順
「テスト開始」と読み上げられたところで下矢印キーを押したところ、以下の代替テキストが読み上げられた。
■音声読み上げ
「テスト開始 テスト終了」
Firefox18.0.1 画像を以下のやり方で非表示にした。
ツール>オプション>コンテンツ
「画像を自動的に読み込む」のチェックをオフにする
画像の代わりに代替テキスト「デパートのフロアガイド。各階について詳しくお知りになりたい場合は各階を選択してください。」が表示されるか
Google Chrome 25 × 【1】ブラウザの設定を画像非表示に変更して、イメージマップ画像の代わりに代替テキスト「デパートのフロアガイド。各階について詳しくお知りになりたい場合は各階を選択してください。」が表示されるかを確認する。
画像非表示の設定は下記の通り実施
ブラウザ右上のボタン→[コンテンツの設定]→“画像”[すべての画像を表示しない]にチェック
【1】×
代替テキストト「デパートのフロアガイド。各階について詳しくお知りになりたい場合は各階を選択してください。」が表示されないことを確認した。
Safari 6.0.5 × 画像の非表示はあらかじめ環境設定の詳細で「メニューバーに"開発"メニューを表示」を選択したうえで 開発→イメージを無効にする を選択 画像の表示されていた場所には何も表示されないものの、画像相当の大きさの空白は認められ、またマウスポインタを乗せたときにリンクの存在はポインタ形状の変化により確認できる
NVDA 2012.3 ■操作手順
「テスト開始」と読み上げられたところで下矢印キーを押したところ、「デパートのフロアガイド。各階について詳しくお知りになりたい場合は各階をクリックしてください。4F雑貨 書籍3F衣料品2Fお菓子 その他食品1F生鮮食品」と読み上げられた。
■音声読み上げ
デパートのフロアガイド。各階について詳しくお知りになりたい場合は各階をクリックしてください。4F雑貨 書籍3F衣料品2Fお菓子 その他食品1F生鮮食品
PC-Talker 7 2.12 ■操作手順
Ctrl+下矢印キーで行読み
■音声読み上げ
「デパートのフロアガイド。各階について詳しくお知りになりたい場合は各階を選択してください リンク」
VoiceOver × ■操作手順
2本指フリック、1本指フリックともに、img要素のalt属性値は読み上げられなかった。
■音声読み上げ
「4F 雑貨書籍 リンク
3F 衣料品 リンク
2F お菓子 その他食品 リンク
1F 生鮮食品 リンク」