【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集
この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。
リンク機能を提供する HTML4、HTML5 及び XTHML ドキュメント
これは、次の達成基準に関連する達成方法である:
訳注: WAIC では H2 に関するアクセシビリティ サポーテッド（AS）情報を提供している。
2020 年 3 月版の アクセシビリティ サポーテッド（AS）情報: H2 も参照されたい。
この達成方法の目的は、テキストとアイコンの両方でリンクを提供する際、キーボード利用者や支援技術の利用者にとって混乱や困難を招くような ウェブページを作らないようにすることである。様々な利用者がテキストとアイコンを使いやすいと見出していることから、両方を提供することでリンクのアクセシビリティを向上させることができる。
よくあるリンクとして、テキストとアイコンの両方が互いに隣接しながらも、別々の要素としてレンダリングされているものがある。視覚的にはそれらは単一のリンクのように見えるが、それらを同様のリンクが隣接しているものとして受け取る利用者も多い。キーボード利用者の場合、冗長なリンクを通過していくのは面倒である。支援技術の利用者にとって、連続する同様のリンクに遭遇すると混乱する可能性がある。アイコンのテキストによる代替がリンクテキストの複製である場合、スクリーンリーダーは読み上げを 2 度繰り返すことになる。
制作者がリンク画像の代替テキストを省略した場合、テキストによる代替が視覚的なリンクと同じ目的を果たさないため、達成基準 1.1.1 を満たせなくなる。
この達成方法は、テキストと画像を一つの a 要素にまとめ、画像に空の代替テキストを指定してテキストの重複を排除することによって、混乱や困難がないリンクを提供するものである。このようにすることで、リンクにおける両方の表現が提供されつつも、キーボード利用者にとってリンクは一つだけとなり、ウェブページのリンク先リストを利用者に提供する補助技術も重複リンクを含まなくなる。
ページをレイアウトしやすくするために、テキストとアイコンのリンクを隣接したテーブルセルに分けることがある。WCAG 2.0 ではレイアウトテーブルの使用を禁止していないが、HTML の table 要素に定義されたセマンティックな意味を保持させ、コンテンツから提示を分離するコーティング手法に準拠するためにも、CSS ベースのレイアウトが推奨されている。CSS が使用されている場合には、この達成方法を適用して、テキストとアイコンのリンクを一つにまとめることができる。
アイコンとテキストが同じ a 要素の中にある。(HTML4 又は HTML5)
コード例:
<a href="products.html">
<img src="icon.gif" alt="">
Products page
</a> リンクにアイコンとテキストがあり、サイトのヘルプでそのアイコンの説明をしている。img には、サイトのヘルプで使われている名前であるテキストによる代替があり、ホームページのアイコンをクリックすることが説明されている。(HTML4 又は HTML5)
コード例:
<a href="home.html">
<img src="house.gif" alt="home page icon">
Go to the home page
</a> 訳注: WAIC では H2-2 に関するアクセシビリティ・サポーテッド（AS）情報を提供している。
2014 年 6 月版のアクセシビリティ・サポーテッド（AS）情報: H2-2 では、「要注意」と評価されている。WAIC はウェブ制作者にこの達成方法が一部の環境では動作しないことに注意を促すものである。
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
訳注: HTML 4.01 は Superseded Recommendation としてマークされ、廃止された仕様である。HTML 5.1§4.7.5.1. Requirements for providing text to act as an alternative for images を代わりに参照できる。
この達成方法を適用しているすべての a 要素に対して:
a 要素に含まれるすべての img 要素の alt 属性値が空に設定されていることを確認する。
a 要素に空の alt 属性値又はリンクテキストを補足し画像を説明する値のいずれかを持つ img 要素が含まれていることを確認する
上記の全ての結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。