WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

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

達成方法に関する重要な情報

これらの達成方法(参考)の使用法及び、それらがWCAG 2.0 達成基準(規定)とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用(対象)セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用(対象)

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

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

解説

この達成方法の目的は、テキストとアイコンの両方でリンクを提供する際、キーボード利用者や支援技術の利用者にとって混乱や困難を招くような ウェブページを作らないようにすることである。様々な利用者がテキストとアイコンを使いやすいと見出していることから、両方を提供することでリンクのアクセシビリティを向上させることができる。

よくあるリンクとして、テキストとアイコンの両方が互いに隣接しながらも、別々の要素としてレンダリングされているものがある。視覚的にはそれらは単一のリンクのように見えるが、それらを同様のリンクが隣接しているものとして受け取る利用者も多い。キーボード利用者の場合、冗長なリンクを通過していくのは面倒である。支援技術の利用者にとって、連続する同様のリンクに遭遇すると混乱する可能性がある。アイコンの代替テキストがリンクテキストの複製である場合、スクリーンリーダーは読み上げを2度繰り返すことになる。

制作者がリンク画像の代替テキストを省略した場合、代替テキストが視覚的なリンクと同じ目的を果たさないため、達成基準 1.1.1を満たせなくなる。

この達成方法は、テキストと画像を 1 つの a 要素にまとめ、イメージに空の代替テキストを指定してテキストの重複を排除することによって、混乱や困難がないリンクを提供するものである。このようにすることで、リンクにおける両方の表現が提供されつつも、キーボード利用者にとってリンクは1つだけとなり、ウェブページのリンク先リストを利用者に提供する補助技術も重複リンクを含まなくなる。

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

事例

事例 1

アイコンとテキストが同じ a 要素の中にある。(HTML4 又は HTML5)

コード例:

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

事例 2

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

コード例:

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

参考リソース

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

検証

チェックポイント

この達成方法を適用しているすべての a 要素に対して:

  1. a 要素に含まれるすべての img 要素の alt 属性値が空に設定されていることを確認する。

  2. a 要素に空の alt 属性値またはリンクテキストを補足し画像を説明する値を持つ img 要素が含まれていることを確認する

判定基準

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