リンクの目的を示すために aria-labelledby を使用する

適用 (対象)

Accessible Rich Internet Applications (WAI-ARIA) をサポートするウェブコンテンツ技術。

これは、達成基準 2.4.4: リンクの目的 (コンテキスト内) に関連する達成方法である(書かれていない達成方法としては十分である)。

解説

aria-labelledby 属性を用いることで、コンテンツ制作者は、ページ上の可視テキスト要素を、フォーカス可能な要素 (フォームコントロール又はリンク) のラベルとして使用できる。たとえば、"read more..." のリンクは、リンクの目的を明確にするために、先行するセクションの見出しテキストと関連付けることができるかもしれない (事例 1 を参照)。

aria-labelledby の助けを借りてフォーカス可能な要素にテキストを関連付ける場合、ターゲットのテキスト要素は、フォーカス可能な要素の aria-labelledby 属性値の中で参照される ID によって与えられる。

フォーカス可能な要素のラベルとして、ページ上の複数のテキスト要素を使用することも可能である。使用されるそれぞれのテキスト要素は、aria-labelledby 属性の値において IDs (IDREF) の文字列として参照される一意な ID を与えられなければならない。そして、ラベルテキストは aria-labelledby 属性の値における ID の順序に従って連結されるべきである。

リンクに適用する場合、aria-labelledby は、目の見える利用者に対して直ちに明白かもしれないが、スクリーンリーダーの利用者にはあまり明らかではないリンクの目的を識別するために使用できる。

aria-labelledby の仕様上の動作は、関連付けられたラベルテキストが (リンクテキストに加えられるのではなく) リンクテキストの代わりに告知されるものである。リンクテキスト自身がラベルテキストに含まれるべきである場合、aria-labelledby 属性の値を構成する IDs の文字列の中で、リンクの ID も参照されるべきである。

名前付けの序列の詳細については、ARIA specification 及び HTML to Platform Accessibility APIs Implementation Guide における accessible name and description calculation for links を参照。

事例

<h2 id="headline">Storms hit east coast</h2>

<p>Torrential rain and gale force winds have struck the east coast, causing flooding in many coastal towns.
<a id="p123" href="news.html" aria-labelledby="p123 headline">Read more...</a></p>

<p>Download <span id="report-title" tabindex="-1">2012 Sales Report</span>:
<a aria-labelledby="report-title pdf" href="#" id="pdf">PDF</a> |
<a aria-labelledby="report-title doc" href="#" id="doc">Word</a> |
<a aria-labelledby="report-title ppt" href="#" id="ppt">Powerpoint</a></p>

参考リソース

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

• Accessible Name and Description Computation

検証