WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

ARIA9: 複数の語句をつなげて一つのラベルにするために、aria-labelledby を使用する

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

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

適用(対象)

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

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

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

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

解説

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

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

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

ラベル文字列の連結は、さまざまな理由で便利である。事例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属性は、3つの要素を参照する: (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: 会議ワークショップ予約テーブル

2つの同時進行のトラックをもつ会議ワークショップ予約テーブルがあり、利用者が参加したいワークショップを選択することを可能にしている。テーブル内のチェックボックス入力の間をタブ移動するとき、トラック(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によって参照される要素を連結したコンテンツが、ラベル付けされた要素の目的又は機能に対する説明である

判定基準

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