增强网站可访问性的25种方法一文，其实讲的是影响网站可访问性的25个重要方面，第十部分讲的是表单。其中讲到使用label元素将标签和特定表单控件联结起来，具体写法有两种：显式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 一文做了同样的测试，作者测试了更多的浏览器和屏幕阅读器，查看测试demo页和结果页，得到了同样的结论：使用for 和 id 并且表单控件不放在label元素内是最健壮的方法。

更多阅读：Form labels: visible and hidden