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

<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>

<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>

<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>