使用aria-labelledby将很多个文本节点连接成一个标签_20160412

说明

aria-labelledby属性可以用来标记所有视觉对象。对于输入，可以使用aria-labelledby来标记所有输入元素，比如自定义输入div，div的contenteditable="true".
aria-labelledby一个常用的用法是标记那些需要包含多条说明的文本输入。
开发者指定特定的多个id到标签来作为输入元素的标签。aria-labelledby属性值为分隔开的id列表，id指向的文本会被屏幕阅读器读出。辅助技术代理将会把所有文本联合起来，并将所有文本作为输入元素的连续读出。

样例

样例1：使用联合标签标记即时输入区域

文本输入元素允许用户在倒计时前修改默认时间。

“延长时间到”文本被包含在一个label元素中，并使用id="timeout-duration" 与输入连接起来。label元素使用for/id的方法与输入连接起来，在浏览器不支持ARIA的时候。当用户代理支持ARIA，for/id方法可以被忽略，输入元素的标签可以只通过aria-labelledby提供。

文本输入元素的aria-labelledby属性包含三个引用：1.span元素包含label，2.文本输入元素默认的文本，3.span中的“分钟”文本。这些元素应该结合起来为文本输入提供完成标签。

注：使用tabindex="-1"只是为了将apan包含在一些浏览器的可访问树中，这样才能被aria-labelledby引用。详情参见可访问HTML元素（https://msdn.microsoft.com/library/gg701963(v=vs.85).aspx#Accessible_HTML_Elements）；

效果

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

一个包含文本输入的数据表格。通过使用aria-labelledby链接行列标题。

效果

	纳税人	投资
W2 总
划分

样例3：会议工作坊预定桌子

一个会议有两个平行的议程，允许用户去选择想要参加的工作坊，当用户tab到复选框，将会给出该复选框所有代表的主体、位置、时间、是否参加等信息。

<h1>Dinosaur Conference workshops timetable Thursday, 14.  & Friday, 15. March 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>2 号房间</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>
</tbody>
</table>

效果

Dinosaur Conference workshops timetable Thursday, 14. & Friday, 15. March 2013

恐龙会议工作组预定表格
	9 to 12 AM	2 to 5 PM	9 to 12 AM	2 to 5 PM
	星期四		星期五
线路1	上古生界 2 号房间参加	中生代概述 2号房间参加	三叠世时期恐龙 1号房间参加	侏罗纪时期 11号房间参加

无障碍效果

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

测试人：wmq

争渡、IE11：: 样例1，延长时间至延长时间至分钟可编辑文本 20;
样例2，纳税人 W2 总可编辑文本投资 W2 总可编辑文本纳税人划分可编辑文本投资划分可编辑文本;
样例3，线路1 9 to 12 AM 参加复选框未选中线路1 9 to 12 AM 参加复选框未选中线路1 2 to 5 PM 参加复选框未选中线路1 2 to 5 PM 参加复选框未选中

永德、IE11：: 样例1，延长时间至延长时间至分钟可编辑文本 20;
样例2，纳税人 W2 总可编辑文本投资 W2 总可编辑文本纳税人划分可编辑文本投资划分可编辑文本;
样例3，线路1 9 to 12 AM 参加复选框未选中线路1 9 to 12 AM 参加复选框未选中线路1 2 to 5 PM 参加复选框未选中线路1 2 to 5 PM 参加复选框未选中

NVDA、IE11：: 样例1，延长时间至延长时间至分钟编辑框 20;
样例2，纳税人 W2 总编辑框投资 W2 总编辑框纳税人划分编辑框投资划分编辑框;
样例3，线路1 9 to 12 AM 参加复选框未选中线路1 9 to 12 AM 参加复选框未选中线路1 2 to 5 PM 参加复选框未选中线路1 2 to 5 PM 参加复选框未选中

永德、chrome：: 样例1，延长时间至延长时间至分钟可编辑文本 20;
样例2，纳税人 W2 总可编辑文本投资 W2 总可编辑文本纳税人划分可编辑文本投资划分可编辑文本;
样例3，线路1 9 to 12 AM 参加复选框未选中线路1 9 to 12 AM 参加复选框未选中线路1 2 to 5 PM 参加复选框未选中线路1 2 to 5 PM 参加复选框未选中

NVDA、chrome：: 样例1，延长时间至延长时间至分钟编辑框 20;
样例2，纳税人 W2 总编辑框投资 W2 总编辑框纳税人划分编辑框投资划分编辑框;
样例3，线路1 9 to 12 AM 参加复选框未选中线路1 9 to 12 AM 参加复选框未选中线路1 2 to 5 PM 参加复选框未选中线路1 2 to 5 PM 参加复选框未选中

NVDA、Firefox：: 样例1，延长时间至延长时间至分钟编辑框 20;
样例2，纳税人 W2 总编辑框投资 W2 总编辑框纳税人划分编辑框投资划分编辑框;
样例3，线路1 9 to 12 AM 参加复选框未选中线路1 9 to 12 AM 参加复选框未选中线路1 2 to 5 PM 参加复选框未选中线路1 2 to 5 PM 参加复选框未选中

voiceover、chrmoe：: 样例1，20内容已被选择延长时间至20分钟编辑文本;
样例2，纳税人w2总编辑文本投资w2总编辑文本纳税人划分编辑文本投资划分编辑文本;
样例3，上午生借现录19to12参加未选中复选框中生代概述现录19to12参加未选中复选框三碟事17恐龙线路12to5下午参加未选中复选框侏罗纪时期现录12to5下午参加未选中复选框

voiceover、Safari：: 12to5下午参加未选中复选框;