WAI-ARIA 1.1 の aria-describedat が aria-details に置き換わるらしい

投稿

2013年9月に最初の草案が出されたWAI-ARIA 1.1(W3C)は、 WAI-ARIA 1.0 （2014年3月に勧告）からの大きな変更点として aria-describedat の追加がありました。ところが、このプロパティは現在使用するべからずとされ、最新の Editor's Draft 版では代わりに aria-details が定義されています。

この記事では、関連する aria-describedby も含めた3つのプロパティを整理します。

aria-describedby

§

WAI-ARIA 1.0 から定義されています。

こんな感じで同一文書内にある要素の ID を指定します。

<p><img src="foo" alt="代替テキスト" aria-describedby="foo_description"/></p>
<p id="foo_description">詳細な説明文</p>

なお、指定できる値は「ID参照リスト」とされているので、スペース区切りで複数のIDを指定することもできるようです。

aria-describedat

§

WAI-ARIA 1.1 で定義されています。

aria-describedby と異なり URI を指定しますが、フラグメント識別子のみを記述して同一文書内の箇所を指すこともできます。

<p><img src="foo" alt="代替テキスト" aria-describedat="#foo_description"/></p>
<p id="foo_description">詳細な説明文</p>
<p><img src="foo" alt="代替テキスト" aria-describedat="http://example.com/foo_description"/></p>
  • ただし、このプロパティは次回更新で削除されるので、実装すべきではない（SHOULD NOT implement(W3C)）とされています。

aria-details

§

WAI-ARIA 1.1 の Editor's Draft 版で2016年2月25日に追加され、代わりに aria-describedat は削除されました。

基本的な考え方は aria-describedat と変わらないように思えますが、指定できる値は URI でなく ID となり、とくに外部リソース参照時の書き方が大きく変わっています。

<p><img src="foo" alt="代替テキスト" aria-details="foo_description"/></p>
<p id="foo_description">詳細な説明文</p>
<p><img src="foo" alt="代替テキスト" aria-details="foo_description_link"/></p>
<p><a href="http://example.com/foo_description" id="foo_description_link">詳細な説明文へのリンク</a></p>

なお、aria-describedby と aria-details が両方指定されたときは、aria-details の指定が優先されるとあります。

あわせて読みたい

§

Amazon で買う