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

H2-2: 隣り合った画像とテキストリンクを同じリンクの中に入れる

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

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

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

テストファイル

H2-2のテストファイル

見解

要注意

対象

a要素内にあるimg要素のalt属性

注意点

一つのリンクの中に画像とテキストがあり、その画像のalt属性値に代替テキストが記述されている場合、スクリーンリーダーのPC-Talker XPとNetReader、iOS6のVoiceOverではその代替テキストが読み上げられない。画像が装飾を目的にしていて、そのalt属性値が空の場合には問題ない。

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

可能な場合には、リンクをすべて画像にするか、またはすべてテキストにしたほうがよい。

テスト結果の詳細

ユーザエージェント 検証結果 操作手順 備考
Internet Explorer 6.0 ツール→インターネットオプション→詳細設定で画像の非表示設定を行った。
代替テキスト「富士通株式会社」が表示された。
Internet Explorer 7.0 画像非表示にした際、アイコン画像の代わりに代替テキスト「富士通株式会社」と思われるものが表示されている。
Internet Explorer 8.0 画像非表示にした際、アイコン画像の代わりに代替テキスト「富士通株式会社」が表示されている。
Internet Explorer 9 1:アイコン画像の代わりに、代替テキスト「富士通株式会社」が表示されることを確認
Firefox 3.5 ツール→オプションから、コンテンツタブの画像を自動的に読み込むのチェックを外したところ、画像の部分に「富士通株式会社」と代替テキストが表示される
Firefox 4.0 1:アイコン画像の代わりに、代替テキスト「富士通株式会社」が表示されることを確認
Firefox 9.0 アイコン画像の代わりに、代替テキスト「富士通株式会社」が表示されることを確認
Safari 3.2 × 開発メニューからイメージを無効にする、で画像を非表示にしたところ代替テキストは表示されず、公式サイトのテキストだけが残る もともと画像があった部分にアンダーラインの表示は残っている
Safari 5.0.3 × 画像を非表示にしたところ代替テキストは表示されず、公式サイトのテキストだけが残る。 もともと画像があった部分にアンダーラインの表示は残っている。
JAWS for Windows 9.0 ■操作手順
「富士通株式会社 公式サイト リンク 画像」と読み上げた。
■音声読み上げ
「富士通株式会社 公式サイト リンク 画像」
ホームページ・リーダー 3.04 ■操作手順
リンクにフォーカスを合わせると「富士通株式会社 公式サイト」と読み上げる
■音声読み上げ
「富士通株式会社 公式サイト」
PC-Talker XP 3.06 × 「公式サイト、リンク」とだけ読み上げられた。
■音声読み上げ
「公式サイト、リンク」
富士通株式会社という代替テキストは読み上げられなかった。
PC-Talker XP 3.06 + NetReader 1.18 ■操作手順
リンクにフォーカスを移動させた際に、アイコン画像の代替テキストとリンクテキストが一緒に「富士通株式会社 公式サイト」と読み上げられた。
■音声読み上げ
「富士通株式会社 公式サイト」
テキスト画面で、全文読み上げでフォーカスが移動した際は、「富士通株式会社 公式サイト」と読み上げた。
しかし、(同テキスト画面で)Tabキーでフォーカスを移動させた際は、「富士通株式会社」と読み上げ、「公式サイト」を読み上げなかったため、△とした。
おそらく、同じリンク(ひとつのリンク)として認識されていないのだと思う。
FocusTalk V3 × ■操作手順
Tabを押してリンクにフォーカスを合わせると「公式サイト」と読み上げる
■音声読み上げ
「公式サイト」
NVDA 2010.1j ■操作手順
Kキーなどを用いてリンク項目にフォーカスを移動させたところ、「富士通株式会社公式サイト」と読み上げられた
■音声読み上げ
「画像富士通株式会社公式サイト」
NVDA 2011.1 ■操作手順
リンク項目にフォーカスを移動させたところ、「富士通株式会社公式サイト」と読み上げられた
■音声読み上げ
「画像富士通株式会社公式サイト」
Firefox18.0.1 アイコン画像の代わりに、代替テキスト「富士通株式会社」が表示されることを確認
Google Chrome 25 × 【1】ブラウザの設定を変更して画像非表示にした際、アイコン画像の代わりに、代替テキスト「富士通株式会社」が表示されるかを確認する。
画像非表示の設定は下記の通り実施
ブラウザ右上のボタン→[コンテンツの設定]→“画像”[すべての画像を表示しない]にチェック
【1】×
アイコン画像も代替テキストも表示されないことを確認した。
Safari 6.0.5 × 画像の非表示はあらかじめ環境設定の詳細で「メニューバーに"開発"メニューを表示」を選択したうえで 開発→イメージを無効にする を選択 画像の表示されていた場所には何も表示されないものの、画像相当の大きさの空白は認められる
NVDA 2012.3 ■操作手順
リンク項目にフォーカスを移動させたところ、「富士通株式会社公式サイト」と読み上げられた
■音声読み上げ
「画像富士通株式会社公式サイト」
PC-Talker 7 2.12 ■操作手順
Ctrl+下矢印キーで行読み、Tabキーで移動、またはShiftキーで全文読み
■音声読み上げ(Ctrl+下矢印キーで行読み、またはTabキーで移動の場合)
「富士通株式会社 公式サイト リンク」
Shiftキーの全文読みでは「富士通株式会社 公式サイト」とだけ読み上げる
VoiceOver × ■操作手順
2本指フリック、1本指フリックともに「富士通株式会社 リンク イメージ」のみ読み上げられ、「公式サイト」にはフォーカスが移動しなかった。
■音声読み上げ
「富士通株式会社 リンク イメージ」