使用aria-labelledby连接一个标签和多个文本节点

使用`aria-labelledby`连接一个标签和多个文本节点_____20160503

说明

aria-labelledby属性可被用来标记所有视觉对象。aria-labelledby可用于输入控件，可以被用来标记原生输入控件和非原生输入控件，例如contenteditable="true"的自定义输入控件div;

aria-labelledby的一个特殊使用是为文本输入控件提供一个有意义的标签，且该标签包含一个或多个标签文本；

开发者设计不同的标签ids，把这些标签连接起来作为输入元素的标签。aria-labelledby属性的值是使用空格分开的所有id的列表，这样屏幕阅读器就可参考列表顺序读出标签文本。支持该技术的用户代理会将标签文本连接起来，并作为一个连续的标签读出来。

某些情景下，连接标签文本非常有用。在样例1中，一个input元素在一个句子中。期望的屏幕阅读器输出是“延长时间至20分钟——自动完成编辑框，选择20”。因为文本输入控件的id，被包含在aria-labelledby属性列表中，输入元素的值会被包含在右侧的连接标签中。

aria-labelledby的另一个应用是页面中在输入元素旁没有空间提供视觉标签，或者使用原生labels会生成不必要的冗余。这里，使用aria-labelledby为提供页面上其他视觉元素的id作为输入元素的标签，详见样例2。

注意：ARIA无障碍名字和描述计算指出，由aria-labelledby指定的文本应该代替而不是添加到本就有标记功能的元素。所以添加aria-labelledby到原生label中，会代替该label中的文本内容，除非在id引用列表中加入label自身的id。

样例

样例1：连接标签的超时输入区域

一个文本输入控件在时限到达之前允许用户延长默认时间。

字符“延长时间至”被包含在原生label，被链接到id="timeout-duration"的输入元素上。该标签使用for/id链接输入控件，只在不支持ARIA的用户代理中。在支持ARIA的用户代理中，for/id链接会被忽略，输入控件的标签只由aria-labelledby提供。

文本输入元素的aria-labelledby属性引用了三个元素：(1)span包含原生label，(2)文本输入包含默认文本“20”（该输入元素没有使用label的for/id来连接），(3)文本“分钟”被包含在一个span中。这些元素应该连接起来提供文本输入的完全标签。

注意：在span元素上使用tabindex="-1"并不意味着脚本无法聚焦，这只是让一些浏览器（IE9，IE10）将span元素包含在可访问树中，让aria-labelledby引用可获得。详情请见可访问HTML元素。

在线样例

样例2：文本输入的简单数据表格

包含文本输入的简单数据表格。输入标签通过aria-labelledby连接行标题和列标题。

在线样例

样例3：会议工作坊预订表

会议工作坊预定表格包含两个平行的轨道允许用户选择想要参加的工作坊。当tab到表格中复选框，轨道，标题，工作坊的演讲人，后面跟着一个“参加”复选框标签，通过使用aria-labelledby连接为复选框的标签。

一些浏览器/屏幕阅读器组合可能额外读出相关联单元格标题。（例如，Firefox和NVDA）

<h1>恐龙研讨会的时间表星期四，14。星期五，15。月2013</h1>
<table>
<caption>恐龙会议研讨会预订表</caption>
<tbody><tr>
	<td rowspan="2"></td>
	<th colspan="2" scope="colgroup">星期四</th>
	<th colspan="2" scope="colgroup">星期五</th>
</tr>

<tr>
<th id="track1" scope="row">路径1</th>
<td>
<h2 id="title-TM1">古生代 </h2>
<p>剩下两个地方</p>
<p><input type="checkbox" id="TM1" aria-labelledby="title-TM1 track1 am1 TM1-att">
<label id="TM1-att" for="TM1">参加</label></p>
</td>
<td>
<h2 id="title-TA1">中生代概述</h2>
<p>剩下2个地方</p>
<p><input type="checkbox" id="TA1" aria-labelledby="title-TA1 track1 am2 TA1-att">
<label id="TA1-att" for="TA1">参加</label></p>
</td>	
<td>
<h2 id="title-FM1">三叠世时期恐龙的崛起</h2>
<p>剩下1个地方</p>
<p><input type="checkbox" id="FM1" aria-labelledby="title-FM1 track1 pm1 FM1-att">
<label id="FM1-att" for="FM1">参加</label></p>
</td>	
<td>
<h2 id="title-FA1">侏罗纪时期</h2>
<p>剩下11个地方</p>
<p><input type="checkbox" id="FA1" aria-labelledby="title-FA1 track1 pm2 FA1-att">
<label id="FA1-att" for="FA1">参加</label></p>
</td>
</tr>
<tr>
<th id="track2" scope="row">路径2/th>
<td>
<h2 id="title-TM2">白垩系</h2>
<p>剩下18个地方</p>
<p><input type="checkbox" id="TM2" aria-labelledby="title-TM2 track2 am1 TM2-att">
<label id="TM2-att" for="TM2">参加</label></p>
</td>
<td>
<h2 id="title-TA2">恐龙的灭绝</h2>
<p>剩下两个地方</p>
<p><input type="checkbox" id="TA2" aria-labelledby="title-TA2 track2 am2 TA2-att">
<label id="TA2-att" for="TA2">参加</label></p>
</td>
<td>
<h2 id="title-FM2">首次发现恐龙</h2>
<p>剩下2个地方</p>
<p><input type="checkbox" id="FM2" aria-labelledby="title-FM2 track2 pm1 FM2-att">
<label id="FM2-att" for="FM2">参加</label></p>
</td>
<td>
<h2 id="title-FA2">新兴学术</h2>
<p>剩下19个地方</p>
<p><input type="checkbox" id="FA2" aria-labelledby="title-FA2 track2 pm2 FA2-att">
<label id="FA2-att" for="FA2">参加</label></p>
</td>
</tr>
</tbody>
</table>

在线测试

无障碍效果

各读屏、各浏览器的支持效果

测试人：

争渡、IE11：

永德、IE11：

NVDA、IE11：

永德、chrome：

NVDA、chrome：

NVDA、Firefox：

voiceover、chrmoe：

voiceover、Safari：