WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

ARIA14: 可視ラベルが使用できない場合に不可視ラベルを提供するために、aria-label を使用する

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

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

適用(対象)

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

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

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

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

解説

目の見える利用者の場合、要素のコンテキスト及び外観は目的を決定するために十分な手がかりを提供できる。一例は、ポップアップのdiv(ライトボックス)を閉じるためのコントロールを示すために、このdivの右上隅でよく使用される'X'である。

設計手法やレイアウトによって、可視のラベルが存在しないが、コンテキストと視覚的な外観によってコントロールの目的が明確になっているような場合、要素には、アクセシブルな名前を提供するために、aria-label属性を与えられることがある。

この他、ネイティブHTMLラベル要素がコントロールでサポートされない場合、要素には、アクセシブルな名前を提供するために属性aria-labelが与えられることがある――たとえば、よりリッチなテキスト編集体験を提供するために、divcontentEditableに設定され、input type="text"textareaなどのネイティブフォーム要素の代わりに使用される場合である。

事例

事例 1: ポップアップボックスにおける閉じるボタン(X)

ページ上で、リンクは追加情報をもつポップアップボックス(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>

実装例: 閉じるボタンの例

事例 2: 複数のフィールドを持つ電話番号

<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を使用する要素に対して:

  1. 利用者の入力が要求される場所でaria-label属性の値が適切に要素の目的を説明している

判定基準

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