aria-details

グローバルなaria-details 属性は、オブジェクトに関連する追加情報を提供する要素を識別します。

解説

aria-details 属性は、オブジェクトに追加情報や複雑な説明を提供するために使用できます。コンテンツが現在のドキュメント内にあるか、追加のアセットへのリンクであるかに関わらず、より詳細な情報を提供することで、支援技術ユーザーにコンテンツについて知らせるために使用されます。

同様の目的を持つ HTML および WAI-ARIA 属性が他にもあります。HTML の<label> 要素とaria-label およびaria-labelledby 属性は、オブジェクトの短いラベルを提供するために使用されます。HTML のtitle 属性とaria-description およびaria-describedby 属性は、オブジェクトのより長いプレーンテキストの説明を提供します。ただし、オブジェクトに関連する追加情報、複雑な説明、またはナビゲート可能なコンテンツが必要で、それらが利用可能な場合は、aria-details 属性を使用する必要があります。

この属性は、サポート不足と誤用により非推奨となった、HTML で完全にサポートされたことのないlongdesc 属性（置き換えられた要素のコンテンツへの長い説明の URL）と同様の目的を果たします。

aria-details 属性は、より詳細な情報を取得するための要素のid、またはスペースで区切られたid のリストを値として受け取ります。aria-details が要素に含まれている場合、支援技術は追加の情報が利用可能であることをユーザーに通知し、ユーザーが参照先のコンテンツに移動できるようにします。

aria-details によって参照される要素には、通常aria-describedby を介して提供される情報よりも多くの情報が含まれることが意図されています。

aria-detials によって参照される要素は、全てのユーザーに表示される必要があります。aria-detailsは、画面を見て説明コンテンツが利用可能であることをすぐに判断できない可能性があるユーザーに、説明的なコンテンツが利用可能であることを通知します。

メモ:aria-details はアクセシブル説明には影響しません。

aria-describedby とは異なり、aria-details によって参照される要素は、アクセシブル説明では使用されず、支援技術ユーザーに表示されるときにプレーンな文字列に変換されません。関連付けられているコンテンツが長すぎず、参照される要素のコンテンツを単純なテキスト文字列に平坦化しても情報が失われない場合は、代わりにaria-describedby を使用することを検討してください。ただし、要素にaria-details に加えて、aria-describedby もしくはaria-description のいずれかで説明が指定されていることは有効です。

例

definition ロールと term ロールについて、aria-details はdefinition ロールの要素のid を持つterm ロールの要素に含まれます。

html

<p>The <strong>cubic-bezier()<strong> functional notation defines a cubic  <span role="term" aria-details="bezier bezImg">Bézier curve</span>. As  these curves are continuous, they are often used to smooth down the start and  end of the curve and are therefore sometimes called easing functions.</p><p role="definition">A <strong>Bézier curve</strong>, (Pronounced \ ˈbe-zē-ˌā \) <i aria-description="English pronunciation">BEH-zee-ay</i>) is a mathematically described curve used in computer graphics and animation. The curve is defined by a set of control points with a minimum of two. Web related graphics and animations use Cubic Béziers, which are curves with four control points P<sub>0</sub>, P<sub>1</sub>, P<sub>2</sub>, and P<sub>3</sub>.</p><a href="bezierExplanation.html"  aria-label="Explanation of Bézier curve in CSS easing functions">  <img alt="Animated Bézier curve showing 4 control points." src="bezier.gif"></a>