適用 (対象)
リンク機能を提供する HTML4、HTML5 及び XTHML ドキュメント。
これは、次の達成基準に関連する達成方法である:
解説
WAIC では H2 に関するアクセシビリティ サポーテッド（AS）情報を提供している。2020 年 3 月版の アクセシビリティ サポーテッド（AS）情報: H2 も参照されたい。
この達成方法の目的は、テキストとアイコンの両方でリンクを提供する際、キーボード利用者や支援技術の利用者にとって混乱や困難を招くような ウェブページを作らないようにすることである。様々な利用者がテキストとアイコンを使いやすいと見出していることから、両方を提供することでリンクのアクセシビリティを向上させることができる。
よくあるリンクとして、テキストとアイコンの両方が互いに隣接しながらも、別々の a 要素としてレンダリングされているものがある。視覚的にはそれらは単一のリンクのように見えるが、それらを同様のリンクが隣接しているものとして受け取る利用者も多い。キーボード利用者の場合、冗長なリンクを通過していくのは面倒である。支援技術の利用者にとって、連続する同様のリンクに遭遇すると混乱する可能性がある。アイコンのテキストによる代替がリンクテキストの複製である場合、スクリーンリーダーは読み上げを 2 度繰り返すことになる。
制作者がリンク画像の代替テキストを省略した場合、テキストによる代替が視覚的なリンクと同じ目的を果たさないため、達成基準 1.1.1 を満たせなくなる。
この達成方法は、テキストと画像を一つの a 要素にまとめ、画像に空の代替テキストを指定してテキストの重複を排除することによって、混乱や困難がないリンクを提供するものである。このようにすることで、リンクにおける両方の表現が提供されつつも、キーボード利用者にとってリンクは一つだけとなり、ウェブページのリンク先リストを利用者に提供する補助技術も重複リンクを含まなくなる。
ページをレイアウトしやすくするために、テキストとアイコンのリンクを隣接したテーブルセルに分けることがある。WCAG 2 ではレイアウトテーブルの使用を禁止していないが、HTML の table 要素に定義されたセマンティックな意味を保持させ、コンテンツから提示を分離するコーティング手法に準拠するためにも、CSS ベースのレイアウトが推奨されている。CSS が使用されている場合には、この達成方法を適用して、テキストとアイコンのリンクを一つにまとめることができる。
事例
例 1
アイコンとテキストが同じ a 要素の中にある。(HTML4 又は HTML5)
<a href="products.html"> <img src="icon.gif" alt=""> Products page </a>
例 2
リンクにアイコンとテキストがあり、サイトのヘルプでそのアイコンの説明をしている。 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 §4.8.4.4 Requirements for providing text to act as an alternative for images を代わりに参照できる。
検証
手順
この達成方法を適用している全ての a 要素に対して:
a要素に含まれる全てのimg要素のalt属性値が空に設定されていることを確認する。a要素に空のalt属性値又はリンクテキストを補足し画像を説明する値のいずれかを持つimg要素が含まれていることを確認する。
期待される結果
- 上記の全ての結果が真である。