Techniques for WCAG 2.0

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

-

H30: a 要素のリンクの目的を説明するリンクテキストを提供する

適用(対象)

リンク(<a href> 要素)を含むHTML及びXHTMLドキュメント

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

解説

この実装方法の目的は、リンク先を説明するテキストをa 要素のコンテンツとして提供することにより、リンクの目的を説明することである。 その説明により、利用者はこのリンクとウェブページ内にある他のリンクとの違いが区別でき、利用者がリンクをたどるかどうかを決定するのを助ける。 一般的に、遷移先のURIでは、そのリンクの目的を説明したことにはならない。

画像がリンクの唯一のコンテンツであるとき、画像の代替テキストがそのリンクに固有の機能を説明している。

リンクのコンテンツがテキスト及び一つ又はそれ以上の画像を含むとき、テキストがリンクの目的を十分に説明しているならば、画像の代替テキストは空にする。(H67: 支援技術が無視すべき画像の img 要素で、alt 属性値を空にして、title 属性を付与しない (HTML)を参照。) 画像がリンクの目的以外にも情報を伝えるときには、画像に適切な代替テキストも付与しなければならない。

事例

事例 1

a HTMLにおいて、a要素のテキストコンテンツを用いてリンクの目的を説明する。

コード例:

<a href="routes.html">
  ボールダーズクライミングジムでの現状のルート
</a>

事例 2

画像のリンクの目的を説明するために、img 要素に alt 属性を使用する。

コード例:

<a href="routes.html">
   <img src="topo.gif" alt="ボールダーズクライミングジムでの現状のルート" /> 
</a> 

事例 3

アンカー (a) 要素が img 要素に加えてリンクの目的を説明するテキストを含むときは、空のalt属性を使用する。 リンクテキストはページ上で画像の隣りに表示されることに注意する。

コード例:

<a href="routes.html">
  <img src="topo.gif" alt="" />
  ボールダーズクライミングジムでの現状のルート
</a>

事例 4

リンクがアイコンとテキストを含み、サイトのヘルプはアイコンを参照する。 img はサイトのヘルプのアイコンで使用する名前の代替テキストを持つ、 それはHOMEページのアイコンをクリックすることを説明している。【訳注:あまり適切な例ではないので、WCAGワーキンググループに改善提案中】

コードの例:

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

事例 5

リンクはテキスト及びアイコンを含み、アイコンはリンク先についての追加情報を提供している。

Example Code:

<a href="WMFP.pdf">
ウッドエンドミュージックフェスティバルのプログラム
<img src="pdficon.gif" alt="PDFファイル"/>
</a>

参考リソース

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

検証

チェックポイント

この実装方法を使用したコンテンツのそれぞれのリンクに対して:

  1. テキスト又は非テキストコンテンツの代替テキストが a 要素に含まれている。

  2. img 要素だけが a 要素のコンテンツである場合、img要素の代替テキストがリンクの目的を説明している。

  3. a 要素が一つ又はそれ以上の img 要素を含み、img 要素の代替テキストが 空の場合、リンクのテキストがリンクの目的を説明している。

  4. a 要素がテキストのみを含んでいる場合、テキストがリンクの目的を説明している。

判定基準

日本語訳における注記:

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