WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

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

達成方法に関する重要な情報

これらの達成方法(参考)の使用法及び、それらが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を参照。

事例

事例 1: リンクに追加情報を提供する

この例は、画面に表示されるリンクテキストが、リンクに対するアクセシブルな名前の最初に使用されることを意図している。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>

事例 2: 複数のソースからのリンクテキストを連結する

制作者は、参照したいコードのセクションを囲むタグを配置することもあるだろう。

注記: 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属性を持つ各リンクに対して:

  1. aria-labelledby属性の値に含まれる各IDが、リンクの目的の一部として使用されるテキスト要素のIDと一致する。

  2. aria-labelledby属性に含まれる1つ以上のIDによって参照されるテキストを合成した値が、link要素の目的を適切に説明している。

判定基準

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。