Techniques for WCAG 2.0

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

-

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

適用(対象)

リンク機能を提供するHTML及びXTHMLドキュメント

これは、次の達成基準に関連する実装方法である

解説

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

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

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

事例

事例 1

アイコンとテキストが同じ a 要素の中にある。

コード例:


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

事例 2

リンクにアイコンとテキストがあり、サイトのヘルプでそのアイコンの説明をしている。img 要素には、サイトのヘルプで使われているアイコンの名前(「HOMEページのアイコン」)が代替テキストとして記述されていて、サイトのヘルプの中では「HOMEページのアイコン」をクリックすることが説明されている。

コード例:


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

不適合事例 3

これは、この実装方法の不適合となる事例である。アイコンとテキストが隣り合っている。画像の代替テキストが隣接しているリンクテキストと同じ内容になっているため、同じリンクが二度読まれてしまうことになる。

コード例:


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

不適合事例 4

これは、この実装方法の不適合となる事例である。アイコンとテキストのリンクが隣り合っている。同じリンクが二度読まれないように、画像の代替テキストは空である。しかし、アイコンの画像に代替テキストがないため、画像のリンク先が不明になってしまっている。

コード例:


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

不適合事例 5

これは、この実装方法を誤って用いた事例である。アイコンとテキストは同じ a 要素の中にある。しかし、リンクテキストと同じ代替テキストをアイコンの画像に記述しているため、同じリンクが二度読まれてしまうことになる。

コード例:


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

参考リソース

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

検証

チェックポイント

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

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

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

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

判定基準

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

日本語訳における注記:

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