WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

ARIA10: 非テキストコンテンツに対して代替テキストを提供するために、aria-labelledby を使用する

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

これらの達成方法(参考)の使用法及び、それらがWCAG 2.0 達成基準(規定)とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用(対象)セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用(対象)

Accessible Rich Internet Applications (WAI-ARIA)を用いるHTML。

これは、次の達成基準に関連する達成方法である:

ユーザエージェント及び支援技術によるサポート

ARIA10 に関するユーザエージェントサポートノート (英語)を参照のこと。WAI-ARIA技術ノートも参照。

解説

この達成方法の目的は、aria-labelledby属性を使用することで支援技術(AT)によって読み取ることのできる要素に対する短い説明を提供することである。aria-labelledby属性は、ラベル付けする要素のID属性とマッチするID参照値を使用することで、ページ上のどこかで可視になっているテキストと要素とを関連づける。スクリーンリーダーのような支援技術は、aria-labelledby属性値によって特定される要素のテキストを、その属性をもつ要素に対する代替テキストとして使用する。

事例

事例 1: 複雑な図形に短い説明を提供する

この例は、図形が複数の画像要素から構成されている読み取り専用の星評価パターンに対して、どのようにaria-labelledby属性を用いて短いテキストの説明を提供するのかを示している。図形に対するテキストによる代替はラベルであり、ページ内の星パターンのすぐ下に見える形で置かれている。

<div role="img" aria-labelledby="star_id">
<img src="fullstar.png" alt=""/>
<img src="fullstar.png" alt=""/>
<img src="fullstar.png" alt=""/>
<img src="fullstar.png" alt=""/>
<img src="emptystar.png" alt=""/>
</div>

<div id="star_id">4 of 5</div>

実装例: 複雑な図形に短い説明を提供する

参考リソース

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

検証

チェックポイント

  1. aria-labelledby属性が存在してかつ要素がalt属性をサポートしない場合に各要素を検査する。

  2. aria-labelledby属性値がウェブページ上の要素のidである。

  3. aria-labelledby属性によって特定される要素のテキストが、正確に要素をラベル付けする、又はその目的の説明を提供する、又は同等の情報を提供する。

判定基準

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