&nbs p;
一、开篇叨叨
一般稍微有些经验的页面制作人员都知道 label 标签可以优雅地扩大表单控件元素的点击区域，例如，单纯的单选框 点击区域就鼻屎那么大的地方，经常会点不到位置。因此，label标签的使用对于提高页面的 可用性 可访问性是很有帮助的。
我们看看点评网的注册页面那个同意条款的复选框，非要点在复选框上才能选中：
查看 HTML 发现复选框 id 和 label 标签的 for 属性值都是空，不解~~
像其他网站的登录或是注册处的控件的点击区域就做得蛮不错的，像是 豆瓣 网， 新浪微博 等：
我们一般有两种方法来优雅地扩展表单控件的点击区域。其一是使用 label 标签包裹控件元素，另外的方法就是使用 label 标签的 for 属性与控件元素的id相关联。
在HT ML 5草案中有如果段文字：
The label re PR esents a caption in a user interface. The caption can be associated w IT h a s PE cific form control, known as the label element’s labeled control , ei ther using for attribute, or by putting the form control inside the label element itself.
中文 意思 就是： label 标签代表了用户界面上的一个标题，该标题可以与制定的表单控件相关联，即所谓的 label 元素标记控件。可以使用 for 属性，或是把表单控件放在 label 元素的里面实现该关联。
这就意味着，我们可以有如下些做法：
使用for和id关联控件
<p><label for=" test ">标签</label> <input n am e="input" type="text" id="test" /></p>
label标签包裹控件
<p><label>标签 <input name="input" type="text" /></label></p>
双管齐下
<p><label for=" test2 ">标签 <input name="input" type="text" id="test2" /></label></p>
您可以狠狠地点击这里：HTML5中label元素使用demo
基本上，在大部分浏览器下（IE6下 label 标签包裹控件的方法是不顶用的），三个方法都是可以扩大单行文本框控件的点击区域的（点击“标签”二字，文本框即focus）。
二、HTML5与HTML 4.01 label的不同
其实，上面提及的几个方法并不是HTML5中的新生事物，早在HTML4.0的时候，跟上面一模一样的东东就出现滴说。 不过 其中有个不一样的就是，在HTML4中，偶们可以给控件元素分配多个label元素。这种感觉就像是古时候支持一夫多妻制一样。
More than one LABEL may be associated with the same control by creating multiple references via the for attribute.
上面原文引用的中文意思是：可以使用超过1个 label 通过for属性关联同一个控件。
上面这段话在HTML5中玩起了躲猫猫，没看到——没有 明确 地说禁止使用，也没有明文说允许使用。我们应当注意到，无论是浏览器还是辅助技 术
都对多 label 元素提供了强有力的支持。
如果您看到下面的文字，可能是由于在其他网站或是RSS中阅读本文，本文原地址：http://www.zhangxinxu .COM /word Press /?p=1809，本文作者：张鑫旭，来自张鑫旭-鑫空间-鑫 生活 ，访问原出处更多精彩内容。
三、当下控件标签化在浏览器和辅助技术下的 可用性 可访问性支持
根据Steve Faulkner(高级web 可用性 可访问性顾问)的测试，使用 for 和 id 找到控件元素的方法要比将控件放在 label 标签内的健壮性好很多。同时他还发现使用 aria-labelledby 属性跨浏览器和辅助技术的健壮性要比使用标准的控件元素放在 label 标签下的方法强。
完整测试和结果：主流浏览器和屏幕 阅读器 控件标签化支持测试
例如，在主流浏览器其上的测试结果：
上图中框框的结果就显示了上面的些结论： for 和 id 可用性 可访问性好于 label 标签包裹，非标准 aria-labelledby 属性居然有更好的 可用性 可访问性。
其余的结果与数据您有兴趣可以仔细看看比对。
对于我们前端而言，没有必要 了解 很深入，这里就不一一分析各个结果。不过，一些建议或是看法还是很值得分享下的。
给 开发者 的建议
在浏览器修复他们的些 可用性 可访问性问题之前，如果你希望你的控件可以被辅助技术理解，建议使用 for + id 方法，而不要因为懒得蛋疼乳酸，直接把控件元素套在 label 标签之下。也不要使用看上去更保险的“双管齐下”的方法。
给浏览器和辅助技术开发商建议
Ch rom e: 实现对 for/id 以及 label 元素包裹的 可用性 可访问性支持。 Safari: 实现 label 元素包裹的 可用性 可访问性支持。 Firefox: 修复当 for/id 合包裹体被使用时候多标签内容的问题。 NVDA: 修复控件元素在 label 之内重复 朗读 的的问题四、结尾部分
可用性 可访问性问题，怎么讲呢？很多时候，很多前端er们， 做出 个结构良好，功能完善的页面就已经算是不错了，再要求其考虑可能性的问题，就有点赶鸭子上架的感觉。
说句招口水的话，可访问性问题就像是有钱人手中的LV 宝宝 ，我们对大多数的前端er们，对大多数的中小网站们，没有必要花过多的精力在这个上面，毕竟人力财力有限。但是，不管 你们 信不信，有 一点 我是很相信的， 知道 了解web中各个可用性问题无论是对自己的成长，还是今后的工作还是很有帮助的。
参考 文章 ：HTML5 Accessibility Chops: form control labeling
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-说说HTML5中label标签的可访问性问题 全部内容，希望文章能够帮你解决 html5教程-说说HTML5中label标签的可访问性问题 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-说说HTML5中label标签的可访问性问题的详细内容...