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

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

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

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

これは達成基準 1.1.1: 非テキストコンテンツ (十分) に関する達成方法である。

解説

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

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. 結合された同等のテキスト及び関連付けられたテキストの説明が、オブジェクトに同等の目的を正確に説明する又は提供していることを調べる。

期待される結果

  • #1、#2, 及び #3 が真である。