【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集
この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。
Accessible Rich Internet Applications (WAI-ARIA)をサポートするウェブコンテンツ技術。
これは、次の達成基準に関連する達成方法である:
ARIA14 に関するユーザエージェントサポートノートを参照のこと。WAI-ARIA 技術ノートも参照。
目の見える利用者の場合、要素のコンテキスト及び外観は目的を決定するために十分な手がかりを提供できる。一例は、ポップアップの div (ライトボックス) を閉じるためのコントロールを示すために、この div の右上隅でよく使用される 'X' である。
設計手法やレイアウトによって、可視のラベルが存在しないが、コンテキストと視覚的な外観によってコントロールの目的が明確になっているような場合、要素には、アクセシブルな名前を提供するために、aria-label 属性を与えられることがある。
この他、ネイティブ HTML ラベル要素がコントロールでサポートされない場合、要素には、アクセシブルな名前を提供するために属性 aria-label が与えられることがある――たとえば、よりリッチなテキスト編集体験を提供するために、div が contentEditable に設定され、input type="text" や textarea などのネイティブフォーム要素の代わりに使用される場合である。
ページ上で、リンクは追加情報をもつポップアップボックス (div) を表示する。その close (閉じる) 要素は、単に文字 'x' を含むボタンとして実装される。プロパティ aria-label="close" は、ボタンにアクセシブルな名前を提供するために使用される。
<div id="box">
This is a pop-up box.
<button aria-label="Close" onclick="document.getElementById('box').style.display='none';" class="close-button">X</button>
</div>実装例: 閉じるボタンの例。
<div role="group" aria-labelledby="groupLabel">
<span id="groupLabel>Work Phone</span>
+<input type="number" aria-label="country code">
<input type="number" aria-label="area code">
<input type="number" aria-label="subscriber number">
</div>この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
aria-label を使用する要素に対して:
利用者の入力が要求される場所で aria-label 属性の値が適切に要素の目的を説明していることを確認する
1. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。