WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

ARIA15: 画像の説明を提供するために aria-describedby を使用する

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

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

適用(対象)

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

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

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

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

解説

この達成方法の目的は、簡潔な代替テキストがオブジェクトで提供される機能や情報を適切に伝達しない場合に、画像の説明を提供することである。

WAI-ARIAには、aria-describedbyプロパティを使用して、セクション、描画、フォーム要素、画像などと説明テキストを関連付けできる機能がある。これは、利用者が複雑な画像を理解するのを助ける追加情報を提供するのに両者が有用であるという点においてlongdesc属性に似ている。longdescのように、aria-describedbyを使用して提供される説明テキストは、HTMLでalt属性を使用して提供される短い名前とは別のものである。longdescと異なり、aria-describedbyは画像を含むページの外の記述を参照できない。画像と同じページのコンテンツを使用して長い説明を提供する利点は、支援技術を持たない、目の見える人を含め、その代替が誰でも利用できることである。執筆時点(2013年10月)で、一部の支援技術が利用者の操作なしに画像のalt属性情報の直後にaria-describedbyの内容を読みあげることは注目に値する――これは、longdesc属性のほとんどの実装が、追加の説明を読むために利用者の明示的な操作を必要とすることとは対照的である。

aria-labelledbyのように、aria-describedbyは、スペース区切りのリストを使用してページの他の領域を指すための複数のIDを受け入れることができる。この集合を定義するものはIDに限定されている。

事例

事例 1: 画像を説明する

次の例は、テキストの説明が画像と同じページ上にある場所で、長い説明を提供するためにどのようにaria-describedbyが画像に適用されるかを示す。

<img src="ladymacbeth.jpg" alt="Lady MacBeth" aria-describedby="p1">
<p id="p1">This painting dates back to 1730 and is oil on canvas. It was created by 
Jean-Guy Millome, and represents ...</p>

参考リソース

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

検証

チェックポイント

  1. aria-describedby属性が存在する各画像要素を調べる。

  2. そのaria-describedby属性が、その説明として用いられるテキストを含む要素のidを介して、要素とテキストの説明とをプログラム的に関連付けている。

  3. 結合された同等のテキスト及び関連付けられたテキストの説明が、オブジェクトに同等の目的を正確に説明する又は提供している。

判定基準

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