適用 (対象)
Accessible Rich Internet Applications (WAI-ARIA)をサポートするウェブコンテンツ技術。
これは、次の達成基準に関連する達成方法である:
- 達成基準 2.4.4: リンクの目的 (コンテキスト内) (書かれていない達成方法を満たす慣習的な達成方法)
- 達成基準 2.4.9: リンクの目的 (リンクのみ) (十分な達成方法)
解説
この達成方法の目的は、aria-label 属性を使用して、リンクの目的を説明することである。オブジェクトを説明する可視要素がページ上に存在しない場合、aria-label 属性は、リンクのようなオブジェクトに説明的なテキストラベルを配置する方法を提供する。説明的な要素がページ上で可視である場合、aria-label ではなく、aria-labelledby 属性が使用されるべきである。説明的なテキストラベルを提供することで、利用者は、そのリンクと、ウェブページ内にあるリンク先の異なるリンクとを区別できるようになり、リンクをたどるかどうかを判断する助けとなる。一部の支援技術において、aria-label の値は、実際のリンクテキストの代わりにリンクの一覧に表示される。
Accessible Name and Description Computation 及び HTML to Platform Accessibility APIs Implementation Guide にあるように、aria-label テキストは、リンク内で与えられたテキストを上書きする。このように与えられたテキストは、支援技術によってリンクテキストの代わりに使用される。このため、aria-label で使用されるテキストは、リンク内で使用されているテキストから始めることが推奨されている。これは、利用者間で一貫性のあるコミュニケーションを可能にする。
事例
事例 1: aria-label を使用して、HTML 内のリンクの目的を説明する
場合によっては、デザイナーが、ページ上のリンクの見た目をコンパクトにするために、"read more" のような短く、繰り返されるリンクテキストを選択することがある。こういった状況は、より単純で非説明的な "read more" というページ上のテキストを、より説明的なリンクのラベルで置き換えることができるという点で、aria-label の望ましいユースケースとなる。単語 "read more" は、利用者間の一貫性のあるコミュニケーションを可能にするために (元のアンカーテキスト "[Read more...]" を置き換える) aria-label の中にも繰り返される。
<h4>Neighborhood News</h4> <p>Seminole tax hike: Seminole city managers are proposing a 75% increase in property taxes for the coming fiscal year. <a href="taxhike.html" aria-label="Read more about Seminole tax hike">[Read more...]</a> </p> <p>Baby Mayor: Seminole voters elect the city's youngest mayor ever by voting in 3 year old Willy "Dusty" Williams in yesterday's mayoral election. <a href="babymayor.html" aria-label="Read more about Seminole's new baby mayor">[Read more...]</a> </p>
参考リソース
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
検証
手順
aria-label 属性を使用するリンク要素に対して:
aria-label属性の値が link 要素の目的を正確に説明していることを確認する。
期待される結果
- 1. の結果が真である。