WCAG 2.0 実装方法集

メインコンテンツへスキップ

-

F89: 達成基準 2.4.4、達成基準 2.4.9、及び 達成基準 4.1.2 の不適合事例 - 画像だけがリンクのコンテンツである際に、img要素のalt属性値が空になっている

適用(対象)

リンクを提供するコンテンツ

これは、次の達成基準に関連する不適合事例である:

ユーザーエージェント及び支援技術のサポートに関するメモ

代替テキストがないリンクに対しては、支援技術によってさまざまな修復方法が用いられる。例えばHTMLの場合、支援技術は、a要素の title 属性、又は img 要素の src 属性の値を代替テキストの代わりとして用いることがある。

解説

この文書は、画像のような非テキストコンテンツのみで提供されているリンクに対して、その非テキストコンテンツが支援技術によって無視される方法で実装されている不適合事例について述べている。 リンクはインタラクティブなコントロールであるため、利用者はリンクにタブ移動し、リンクを起動することができる。識別名として用いられるテキストコンテンツがリンク内にない場合、支援技術はリンクに使用する何らかの識別名を見つけるために様々な修復方法を用いる。

ページ上でテキスト及び画像の両方が、同じリンク先にリンクするために用いられることがよくある。 これによって、2つの隣接したリンクが同じ識別名を持つときに音声読み上げでは同じ読み上げが繰り返されるため、コンテンツ制作者は画像に対して空のalt属性を提供することによりその冗長性を排除しようとする。困ったことに、この対応が往々にして問題を悪化させることがある。「H2: 隣り合った画像とテキストリンクを同じリンクの中に入れる」(HTML)は、別々のリンク及び望ましくない冗長性を減少させるのに推奨される方法である。

事例

不適合事例 1: HTML検索結果

検索サイトは、試合のサイトへのテキストリンク及びイメージリンクの両方を含んだ検索結果を返す。 検索結果には既にテキストリンクがあるため、画像の alt 属性は空になっている。 しかし、スクリーンリーダーは画像リンクを無視しないで、リンクの目的が説明されていそうなテキストを見つけるための推測に基づいた修復を試みる。 例えば、スクリーンリーダーは「フットボール ドット ジフ フットボール スコアカード」と読み上げるかもしれない。

コード例:


 <a href="scores.html">
   <img src="football.gif" alt="" />
 </a>
 <a href="scores.html">
   フットボールのスコアボード
 </a>
}
			

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

チェックポイント

  1. リンクが非テキストコンテンツのみを提供している。

  2. 非テキストコンテンツが支援技術により無視される方法で実装されている。

判定基準

日本語訳における注記:

この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。