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

この実装方法の目的は、ドキュメント内で互いに隣接したテキストとアイコンを使ったリンクが提供されている時に生じる不要な重複を避けることである。

よくあるリンクとして、互いに隣接したテキストとアイコンの両方を用いたリンクがある。 それぞれが視覚的にはわずかに離れていることもあって、そのテキストとアイコンのリンクは別々のリンクであることが多い。視覚的にはそれらは同じ一つのリンクのように見えるが、多くの利用者にとっては二つの別々のリンクであり、それによって混乱させてしまうことがある。これを避けるためには、画像から代替テキストを省略するコンテンツ制作者もいるが、代替テキストがグラフィカルなリンクと同じ目的を果たしていないので、これでは達成基準 1.1.1に不適合になる。これに対処するために好ましい方法は、一つのリンクにテキストと画像を一緒に入れて、テキストと画像の代替テキストの内容が重複しないように画像には空の代替テキストを提供することである。

ページをレイアウトしやすくするために、テキストとアイコンのリンクを隣接したテーブルセルに分けることがある。WCAG 2.0 ではレイアウトテーブルの使用を禁止していないが、HTMLのtable要素に定義されたセマンティックな意味を保持させ、コンテンツから表現を分離するコーティング手法に準拠するためにも、CSSベースのレイアウトが推奨されている。CSSが使用されている場合には、この実装方法を適用して、テキストとアイコンのリンクを一つにまとめることができる。

 <a href="products.html">
   <img src="icon.gif" alt="" />
   製品のページ
 </a>
		

 <a href="foo.htm">
   <img src="house.gif" alt="HOMEページのアイコン"/>
   HOMEページへ戻る
 </a>
		

 <a href="products.html">
   <img src="icon.gif" alt="製品のページ" />
   </a>
 <a href="products.html">
   製品のページ
 </a>
			

 <a href="products.html">
   <img src="icon.gif" alt="" />
 </a>
 <a href="products.html">
   製品のページ
 </a>
			

 <a href="products.html">
   <img src="products.gif" alt="製品のページ"/>
   製品のページ
 </a>
			

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

• HTML 4.01 - how to specify alt text

• G91： リンクの目的を説明したリンクのラベルを提供する
• G94： 非テキストコンテンツに対して、それと同じ目的を果たし、同じ情報を提供する、簡潔な代替テキストを提供する
• H30： a 要素のリンクの目的を説明するテキストリンクを提供する
• C9： CSS を用いて、装飾目的の画像を付加する
• F89： 達成基準 2.4.4、達成基準 2.4.9、及び 達成基準 4.1.2 の不適合事例 － 画像だけがリンクのコンテンツである際に、img要素のalt属性値が空になっている

チェックポイント

img 要素を含む a 要素すべてに対して：

1. 同じ href 属性及び同じリンク先の説明を持つ隣接した a 要素がない。

テーブル内にある a 要素すべてに対して：

1. 同じ href 属性及び同じリンク先の説明を持つ a 要素が隣接したテーブルセルにない。

判定基準

• 上記の全てを満たしている。

注意： この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。