複数のテキストノードをつなげて一つのラベルにするために、aria-labelledby を使用する

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

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

適用 (対象)

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

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

解説

aria-labelledbyプロパティは、すべての視覚的オブジェクトをラベル付けするために使用できる。入力に適用する場合、aria-labelledby プロパティは、div contenteditable="true" によって構築されるカスタムテキスト入力のような非ネイティブ要素だけでなく、ネイティブの入力に対するラベル付けにも利用することができる。

aria-labelledby の特有の用途のひとつは、意味のあるラベルが複数のラベル文字列から構成される状況における、テキスト入力のためのものである。

コンテンツ制作者は、input 要素のラベルとして連結されるために、ラベル文字列に一意の id を割り当てる。aria-labelledby 属性の値は、参照されたラベル文字列がスクリーンリーダーで読みあげられるべき順序に並べられた、全 id のスペース区切りのリストである。サポートするユーザエージェントは、参照されたラベル文字列を連結して、入力欄の一つの連続したラベルとして読みあげる。

ラベル文字列の連結は、さまざまな理由で便利である。事例 1 において、入力欄は完全な一文のコンテキスト内に含まれている。望ましいスクリーンリーダーの出力は、"Extend time-out to [ 20 ] minutes - edit with autocomplete, selected 20" である。テキスト入力の id は aria-labelledby で参照される id の文字列に含まれているので、入力の値は連結されたラベルの正しい位置に含まれる。

aria-labelledby の別の応用は、入力欄の隣に視覚的なラベルを提供するためのスペースが存在しない場合、又はネイティブラベルの使用が不必要な冗長性を生む場合である。このとき、aria-labelledby を使用すると、ページ上の可視要素をそのような入力のラベルとして関連付けることができる。この方法は事例 2 において示されており、テーブルの列及び行の見出しが連結されて、テーブル内部のテキスト入力要素のラベルとなっている。

注記

ARIA accessible name and description calculation は、aria-labelledbyで指定された文字列が、プロパティを有する要素のコンテンツに追加されるのではなく、置換するべきと規定している。よって、aria-labelledby プロパティをネイティブラベルに追加する場合、ラベル自体が aria-labelledbyid のシーケンスの一部として参照されていない限り、そのラベル内のテキストコンテンツが置換されるべきである。

事例

例 1: 連結されたラベルをもつタイムアウト入力フィールド

テキスト入力欄があり、タイムアウトが発生する前に、利用者がデフォルトの時間を延長することを可能にしている。

文字列 "Extend time-out to" は、ネイティブの label 要素に含まれており、id="timeout-duration" により入力に関連付けられる。このラベルは、ARIA をサポートしないユーザエージェント上においてのみ、for/id 関連付けを使用してこの入力に関連付けられる。ARIA をサポートするユーザエージェント上では、for/id 関連付けは無視され、入力用のラベルは、HTML to Platform Accessibility APIs Implementation Guide における accessible name and description calculation に従って、aria-labelledby のみによって提供される。

テキスト入力上の aria-labelledby 属性は、三つの要素を参照する: (1) ネイティブのラベルを含む span、(2) デフォルトテキスト'20'を含むテキスト入力 (この入力が、ラベルテキストに関連する for/id でラベル付けされないことを思い起こすこと)、(3) span に含まれる文字列 'minutes'。これらの要素は、テキスト入力に対する完全なラベルを提供するために連結されるべきである。

注記

span 要素上の tabindex="-1" の使用は、スクリプトによってフォーカスをサポートすることを意味するものではない――ここでは、単に一部のブラウザ (IE9、IE10) がアクセシビリティツリーに span 要素を含めることを保証するためのものであり、その結果、aria-labelledby による参照に利用できるようになる。詳細については、Accessible HTML Elements を参照。

<form>
<p><span id="timeout-label" tabindex="-1"><label for="timeout-duration">Extend time-out to</label></span>
<input type="text" size="3" id="timeout-duration" value="20" 
    aria-labelledby="timeout-label timeout-duration timeout-unit">
<span id="timeout-unit" tabindex="-1"> minutes</span></p>
</form>

動作例 連結されたラベルをもつタイムアウト入力フィールド は、Marco Zeheによってまとめられた Easy ARIA tip #2: aria-labelledby and aria-describedby から翻案した。

例 2: テキスト入力を含む単純なデータテーブル

テキスト入力を含む単純なデータテーブルがある。入力ラベルは、それぞれの列及び行のヘッダーを参照する aria-labelledby を通して連結される。

<table>
	<tr>
		<td></td>
		<th id="tpayer">Taxpayer</th>
		<th id="sp">Spouse</th>
	</tr>

	<tr>
		<th id="gross">W2 Gross</th>
		<td><input type="text" size="20" aria-labelledby="tpayer gross" /></td>
		<td><input type="text" size="20" aria-labelledby="sp gross" /></td>
	</tr>
	
	<tr>
		<th id="div">Dividends</th>
		<td><input type="text" size="20" aria-labelledby="tpayer div" /></td>
		<td><input type="text" size="20" aria-labelledby="sp div" /></td>
	</tr>
</table>

動作例 テキスト入力をもつ単純なテーブルに対する aria-labelledby を使用するは、Jim Thatcher による例に基づく。

例 3: 会議ワークショップ予約テーブル

二つの同時進行のトラックをもつ会議ワークショップ予約テーブルがあり、利用者が参加したいワークショップを選択することを可能にしている。テーブル内のチェックボックス入力の間をタブ移動するとき、トラック (1 又は 2)、タイトル、及び隣接するチェックボックスのラベル "Attend" に続くワークショップのスピーカーは、aria-labelledby を介してチェックボックスに対する連結ラベルとして提供される。

一部のブラウザ/スクリーンリーダーの組み合わせ (たとえば Mozilla Firefox と NVDA) は、さらに関連するテーブルセルのヘッダーを伝える。

<h1>Dinosaur Conference workshops timetable Thursday, 14.  & Friday, 15. March 2013</h1>
<table>
<caption>Dinosaur Conference workshop booking table</caption>
<tbody><tr>
	<td rowspan="2"></td>
	<th colspan="2" scope="colgroup">Thursday</th>
	<th colspan="2" scope="colgroup">Friday</th>
</tr>

<tr>
	<th scope="col" id="am1">9 to 12 AM</th>
	<th scope="col" id="pm1">2 to 5 PM</th>
	<th scope="col" id="am2">9 to 12 AM</th>
	<th scope="col" id="pm2">2 to 5 PM</th>
</tr>

<tr>
	<th id="track1" scope="row">track 1</th>
	<td>
		<h2 id="title-TM1">The Paleozoic era </h2>
		<p>2 places left</p>
		<p><input type="checkbox" id="TM1" aria-labelledby="title-TM1 track1 am1 TM1-att">
                <label id="TM1-att" for="TM1">Attend</label></p>
	</td>
	
	<td>
		<h2 id="title-TA1">The Mesozoic era overview</h2>
		<p>2 places left</p>
		<p><input type="checkbox" id="TA1" aria-labelledby="title-TA1 track1 am2 TA1-att">
                <label id="TA1-att" for="TA1">Attend</label></p>
	</td>
	
	<td>
		<h2 id="title-FM1">The Triassic period, rise of the dinosaurs</h2>
		<p>1 place left</p>
		<p><input type="checkbox" id="FM1" aria-labelledby="title-FM1 track1 pm1 FM1-att">
                <label id="FM1-att" for="FM1">Attend</label></p>

	</td>
	
	<td>
		<h2 id="title-FA1">The Jurassic period</h2>
		<p>11 places left</p>
		<p><input type="checkbox" id="FA1" aria-labelledby="title-FA1 track1 pm2 FA1-att">
                <label id="FA1-att" for="FA1">Attend</label></p>
	</td>
</tr>


<tr>
	<th id="track2" scope="row">track 2</th>
	<td>
		<h2 id="title-TM2">The Cretaceous period</h2>
		<p>18 places left</p>
		<p><input type="checkbox" id="TM2" aria-labelledby="title-TM2 track2 am1 TM2-att">
                <label id="TM2-att" for="TM2">Attend</label></p>
	</td>
	
	<td>
		<h2 id="title-TA2">The end of the dinosaurs</h2>
		<p>2 places left</p>
		<p><input type="checkbox" id="TA2" aria-labelledby="title-TA2 track2 am2 TA2-att">
                <label id="TA2-att" for="TA2">Attend</label></p>
	</td>
	
	<td>
		<h2 id="title-FM2">First discoveries of dinosaurs</h2>
		<p>2 places left</p>
		<p><input type="checkbox" id="FM2" aria-labelledby="title-FM2 track2 pm1 FM2-att">
                <label id="FM2-att" for="FM2">Attend</label></p>
	</td>
	
	<td>
		<h2 id="title-FA2">Emerging scholarship</h2>
		<p>19 places left</p>
		<p><input type="checkbox" id="FA2" aria-labelledby="title-FA2 track2 pm2 FA2-att">
                <label id="FA2-att" for="FA2">Attend</label></p>
	</td>
</tr>
</tbody>
</table>

動作例: 会議ワークショップ予約時間表

参考リソース

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

検証

手順

aria-labelledby を使用する入力に対して:

  1. aria-labelledby で参照される id が一意であり、かつ組み合わせてラベルを提供するテキストノードの id と一致することを確認する
  2. aria-labelledby によって参照される要素を連結したコンテンツが、ラベル付けされた要素の目的又は機能に対する説明であることを確認する

期待される結果

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

    これが達成基準に対して十分な達成方法である場合、このテスト手順を失敗しても、この達成方法がうまく実装されず適合性を主張するために使用できないだけであり、達成基準が他の方法で満たされていないことを必ずしも意味するものではない。