WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

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

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

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

適用(対象)

リンク(<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

サイトでは、製品の詳細ページの「フィードバック」リンクをクリックすることで、利用者がログインしたときに製品に関するフィードバックを提供することができる。他の利用者又は製品メーカーは、フィードバックに応答することができる。フィードバックのリンクは、利用者のフィードバックへの応答が利用可能な場合に、「フィードバック」テキストの前にアイコンを表示する。ヘルプ情報は、このアイコンを二重引用符を含む吹き出しとして説明し、アイコン自体を例として示している。 ヘルプテキストにおけるアイコンのテキストによる代替は、「応答受信アイコン」である。複数のモダリティを使用してこのアイコンを識別できるように、製品の詳細ページ(応答が利用可能な場合)で同じテキストによる代替が使用される。

コード例:

<a href="prod_123_feedback.htm">Feedback 
<img src="response.gif" width="15" height="15" alt="レスポンス受信アイコン" /></a>

事例 5

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

コード例:

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

事例 6

MyCorp 社の年次レポートは企業のウェブサイト上から PDF ファイルとして入手でき、年次企業予算は Excel ファイルとして入手できる。

注記: 多くの利用者は、ファイルを開く際に新しいアプリケーションが開く場合は、あらかじめファイルの種類を知りたいので、このような追加情報を含めるのはしばしば便利であると考えられる。 ただし、この達成基準を満たすには必須ではない。

コード例:

<p>
<a href=”2009mycorp_report.pdf”>MyCorp 2009 年次レポート (pdf)</a><br />
<a href=”2009mycorp_budget.xls”>MyCorp 2009 年次予算 (Excel)</a>
</p>

事例 7

HTML5 においてブロックレベル要素をリンクで囲む。

コード例:

<article>
<a href="news.html">
<h3>議会で続く予算討議</h3>
<p class="subhead"><img class="alertimg" src="alerticon.png" alt="ニュース速報" height="30" width="30">議会の議員は、来年の予算をめぐる3つの挑戦的な問題について、激しい議論を続けた。</p>
<p>もっと読む</p>
</a>
</article>

ブロックレベル要素をリンクで囲む実例を示す。

参考リソース

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

検証

チェックポイント

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

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

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

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

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

判定基準

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