(转)表单显式label和隐式label对屏幕阅读器用户的影响–更新
显式label
?也就是说为label元素添加for属性,其属性值与表单控件的id属性值一致。
?重置和提交按钮(<input type="reset"/> 、<input type="submit"/>), 图片按钮(<input type="img"/>)以及脚本按钮 (<button></button>)不用使用显式label,因为它们已经有了隐式标签,如value 和 alt 属性值,button元素的内容。
<label for="firstname">First name:</label><input type="text" name="firstname" id="firstname" tabindex="1" />
隐式label
?根据HTML 4.01 规范, 通过label 元素包裹 表单控件和label文本可创建”隐式label”。
?由于一些浏览器(IE6)不支持隐式label,WCAG2.0不建议使用。
<label>First name: <input type="text" name="firstname" /></label>
另外一种写法,即上面两种方法的结合:
<label for="firstname">First name:
<input type="text" name="firstname" id="firstname" tabindex="1" /></label>
两者的区别
使用屏幕阅读器NVDA和IE9测试发现,屏幕阅读器用户听到的提示内容是不同的:
?显式label写法:“fFirst name: 编辑框 空白(或内容)”
?隐式label写法:“First name: 文本 First name: 编辑框 空白(或内容)”–两种方法一致,不过最后一种写法在所有浏览器下点击label都无法激活表单控件(笔者demo手误,已更改),强烈不推荐这种写法。
可以看出,nvda会重复label文本内容,屏幕阅读器用户更容易理解显式label写法的提示。
查看demo
更新:今日看到 HTML5 Accessibility Chops: form control labeling 一文
(http://www.html5accessibility.com/tests/form-labels.html)
做了同样的测试,作者测试了更多的浏览器和屏幕阅读器,查看测试demo页和结果页,得到了同样的结论:使用for 和 id 并且表单控件不放在label元素内是最健壮的方法。