WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

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

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

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

適用(対象)

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

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

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

ARIA16 に関するユーザエージェントサポートノート (英語)を参照のこと。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: 例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. 参照される要素又は複数要素のテキストが正確にユーザインタフェースコントロールにラベル付けする。

判定基準

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