【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集
この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。
リンク (<a href> 要素) を含む HTML 及び XHTML ドキュメント
これは、次の達成基準に関連する達成方法である:
この達成方法の目的は、リンク先を説明するテキストを a 要素のコンテンツとして提供することにより、リンクの目的を説明することである。その説明により、利用者はこのリンクとウェブページ内にある他のリンクとの違いが区別でき、利用者がリンクをたどるかどうかを決定するのを助ける。一般的に、遷移先の URI では、そのリンクの目的を説明したことにはならない。
画像がリンクの唯一のコンテンツであるとき、画像のテキストによる代替がそのリンクに固有の機能を説明している。
リンクのコンテンツがテキスト及び一つ以上の画像を含むとき、テキストがリンクの目的を十分に説明している場合、画像は空のテキストによる代替であってもよい。(H67: 支援技術が無視すべき画像に対して、img 要素の alt テキストを空にして、title 属性を付与しない (HTML) を参照。) 画像がリンクの目的以外にも情報を伝えるときには、画像に適切な代替テキストも付与しなければならない。
訳注: WAIC では H30 に関するアクセシビリティ サポーテッド（AS）情報を提供している。
2020 年 3 月版の アクセシビリティ サポーテッド（AS）情報: H30 も参照されたい。
HTML において、a 要素のテキストコンテンツを用いてリンクの目的を説明する。
コード例:
<a href="routes.html">
Current routes at Boulders Climbing Gym
</a>画像のリンクの目的を説明するために、img 要素に alt 属性を使用する。
コード例:
<a href="routes.html">
<img src="topo.gif" alt="Current routes at Boulders Climbing Gym" />
</a> 訳注: WAIC では H30-2 に関するアクセシビリティ・サポーテッド（AS）情報を提供している。
2014 年 6 月版のアクセシビリティ・サポーテッド（AS）情報: H30-2 では、「達成可能」と評価されている。WAIC はこの達成方法が検証した環境で広く動作すると判断している。
アンカー (a) 要素が img 要素に加えてリンクの目的を説明するテキストを含むときは、空の alt 属性を使用する。リンクテキストはページ上で画像の隣りに表示されることに注意する。
コード例:
<a href="routes.html">
<img src="topo.gif" alt="" />
Current routes at Boulders Climbing Gym
</a>サイトでは、製品の詳細ページの「Feedback」リンクをクリックすることで、利用者がログインしたときに製品に関するフィードバックを提供することができる。他の利用者又は製品メーカーは、フィードバックに応答することができる。フィードバックのリンクは、利用者のフィードバックへの応答が利用可能な場合に、「Feedback」テキストの前にアイコンを表示する。ヘルプ情報は、このアイコンを二重引用符を含む吹き出しとして説明し、アイコン自体を例として示している。 ヘルプテキストにおけるアイコンのテキストによる代替は、「応答受信アイコン」である。複数のモダリティを使用してこのアイコンを識別できるように、製品の詳細ページ (応答が利用可能な場合) で同じテキストによる代替が使用される。
コード例:
<a href="prod_123_feedback.htm">Feedback
<img src="response.gif" width="15" height="15" alt="Response received icon" /></a>リンクはテキスト及びアイコンを含み、アイコンはリンク先についての追加情報を提供している。
コード例:
<a href="WMFP.pdf">
Woodend Music Festival Program
<img src="pdficon.gif" alt="PDF format"/>
</a>訳注: WAIC では H30-5 に関するアクセシビリティ・サポーテッド（AS）情報を提供している。
2014 年 6 月版のアクセシビリティ・サポーテッド（AS）情報: H30-5 では、「要注意」と評価されている。WAIC はウェブ制作者にこの達成方法が一部の環境では動作しないことに注意を促すものである。
MyCorp 社の年次レポートは企業のウェブサイト上から PDF ファイルとして入手でき、年次企業予算は Excel ファイルとして入手できる。
注記: 多くの利用者は、ファイルを開く際に新しいアプリケーションが開く場合は、あらかじめファイルの種類を知りたいので、このような追加情報を含めるのはしばしば便利であると考えられる。 ただし、この達成基準を満たすには必須ではない。
コード例:
<p>
<a href=”2009mycorp_report.pdf”>MyCorp 2009 Annual Report (pdf)</a><br />
<a href=”2009mycorp_budget.xls”>MyCorp 2009 Annual Budget (Excel)</a>
</p>HTML5 においてブロックレベル要素をリンクで囲む。
コード例:
<article>
<a href="news.html">
<h3>Budget Debate Continues in Parliament</h3>
<p class="subhead"><img class="alertimg" src="alerticon.png" alt="Breaking News" height="30" width="30">Members of Parliament continued vigorous debate on three challenging issues surrounding the upcoming year's budget.</p>
<p>Read more</p>
</a>
</article>訳注: HTML5 ではブロックレベル要素は定義されていない。ブロックレベル要素 - HTML: HyperText Markup Language | MDN も参照のこと。
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
訳注: HTML 4.01 は Superseded Recommendation としてマークされ、廃止された仕様である。HTML 5.1§4.7.5.1. Requirements for providing text to act as an alternative for images を代わりに参照できる。
この達成方法を使用したコンテンツのそれぞれのリンクに対して:
テキスト又は非テキストコンテンツのテキストによる代替が a 要素に含まれている。
img 要素だけが a 要素のコンテンツである場合、img 要素のテキストによる代替がリンクの目的を説明している。
a 要素が一つ以上の img 要素を含み、かつ img 要素のテキストによる代替が空の場合、リンクのテキストがリンクの目的を説明していることを確認する。
a 要素がテキストのみを含んでいる場合、そのテキストがリンクの目的を説明していることを確認する。
上記の全ての結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。