【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集
この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。
Accessible Rich Internet Applications (WAI-ARIA)をサポートするウェブコンテンツ技術。
これは、次の達成基準に関連する達成方法である:
ARIA7 に関するユーザエージェントサポートノートを参照のこと。WAI-ARIA 技術ノートも参照。
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 を参照。
この例は、画面に表示されるリンクテキストが、リンクに対するアクセシブルな名前の最初に使用されることを意図している。JAWS や NVDA のようなポピュラーなスクリーンリーダーは、これを "Read more ...Stormshit east coast" のように告知し、リンクだけを閲覧することがあるスクリーンリーダーの利用者にとって有益なリンク一覧にも同じテキストを表示する。
<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>制作者は、参照したいコードのセクションを囲むタグを配置することもあるだろう。
注記: span 要素上の tabindex="-1" の使用は、スクリプトによってフォーカスをサポートすることを意味するものではない――ここでは、単に一部のブラウザ (IE9、IE10) がアクセシビリティツリーに span 要素を含めることを保証するためのものであり、その結果、aria-labelledby による参照に利用できるようになる。詳細については、Accessible HTML Elements を参照。
<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>この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
(今のところ、なし。)
aria-labelledby 属性を持つ各リンクに対して:
aria-labelledby 属性の値に含まれる各 ID が、リンクの目的の一部として使用されるテキスト要素の ID と一致することを確認する。
aria-labelledby 属性に含まれる一つ以上の ID によって参照されるテキストを合成した値が、link 要素の目的を適切に説明していることを確認する。
1. 及び 2. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。