ユーザインタフェース コントロールの名前 (name) を提供するために、aria-labelledby を使用する

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

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

適用 (対象)

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

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

解説

この達成方法の目的は、支援技術によって読み取ることができるユーザインタフェースコントロールの名前を提供することである。WAI-ARIA は、aria-labelledby プロパティを使用して、セクション、描画、フォーム要素、画像などとテキストを関連付けるための方法を提供する。この達成方法では、aria-labelledby 属性を使用して、フォームフィールドなどのユーザインタフェースコントロールと、それをラベル付けするページ上のテキストとを関連付ける。

aria-describedby のように、aria-labelledby は、スペース区切りのリストを使用して、ページの他の要素を指すように複数の ID を受け入れることができる。この機能は、目の見える利用者がコントロールを識別するために周囲のコンテキストからの情報を使用する状況において、aria-labelledby を特に有用にする。複数の語句をつなげて一つのラベルにするために、aria-labelledby を使用するでも、名前がページ上の他の複数のテキスト要素から構成される場合の事例を紹介している。

aria-labelledby の機能はネイティブな HTML の label 要素と似ているように見えるが、いくつか違いがある:

2013 年 12 月の時点で、特に古いブラウザや支援技術で、label のほうが aria-labelledby よりもより良くサポートされていることに注意すること。

事例

事例 1: 単純なテキストフィールドをラベル付けする

以下は、ラベル専用のテキストがないものの、正確にコントロールをラベル付けするためにページ上の他のテキストが使用できる状況で、aria-labelledby を使用して単純なテキストフィールドにラベルを提供している例である。 

<input name="searchtxt" type="text" aria-labelledby="searchbtn">
<input name="searchbtn" id="searchbtn" type="submit" value="Search">

事例 2: スライダーをラベル付けする

以下は、スライダーコントロールにラベルを提供するために aria-labelledby を使用している例である。このケースでは、ラベルテキストが、より長い隣接するテキスト文字列の中から選択される。この例は、単にラベル付けの関係を示すために簡略化されていることに注意すること。カスタムコントロールを実装するコンテンツ制作者は、コントロールが他の達成基準を満たしていることも確認する必要がある。 

<p>Please select the <span id="mysldr-lbl">number of days for your trip</span></p>
<div id="mysldr" role="slider" aria-labelledby="mysldr-lbl"></div>

事例 3: 複数のソースからのラベル

以下は、label 要素を使用した複数の参照を伴う aria-labelledby の例である。aria-labelledby をもつラベルに複数のソースを連結する方法の詳細については、複数の語句をつなげて一つのラベルにするために、aria-labelledby を使用するを参照すること。 

<label id="l1" for="f3">Notify me</label>
<select name="amt" id="f3" aria-labelledby="l1 f3 l2">
  <option value="1">1</option>
  <option value="2">2</option>
</select>
<span id="l2" tabindex="-1">days in advance</span>

注: label 要素を使うことには多くの理由がある。利用者が label 要素のテキストをクリックすれば、対応するフォームフィールドがフォーカスを受け取るため、器用さの問題を持つ人に対してクリックターゲットを大きくすることができる。また、label 要素は常にアクセシビリティ API を介して公開される。span が使われるかもしれない (ただしその場合、span が Internet Explorer のすべてのバージョンでアクセシビリティ API を介して公開されるように、span は tabindex="-1" を与えるべきである)。しかし、span では、クリック可能な領域が大きくなるという利点が失われることになるだろう。

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

手順

aria-labelledby 属性が存在する場合に各ユーザインタフェースコントロール要素に対して:

  1. aria-labelledby 属性の値は、ある要素の id、又はウェブページ上の複数 id のスペース区切りのリストであることを確認する。
  2. 参照される要素又は複数要素のテキストが正確にユーザインタフェースコントロールにラベル付けすることを確認する。

期待される結果

  • 1. 及び 2. の結果が真である。