最近对可访问性的研究比较多一些，有许多可访问性的实施细节，都是我们力所能及的，同时也是一些好的习惯和Web标准的最佳实战。

我在上一篇文章《Accessibility,只需我们改变一点点儿 》中说了许多关于可访问性的一些最佳实战，说道 “表单控件元素要使用lable标签关联提示文本”,这样可以有效的扩大表单控件元素的可点击区域，同时也很方便的获得表单控件元素的焦点。

例如:单选框和复选框的操作就非常不方便，可点击的区域就非常小，如果用lable标签把提示文本与表单控件元素关联起来，可点击区域就扩大好几倍,操作起来当然就方便了。因此，label标签的使用对于提高页面的可访问性是很有帮助的。

接下来，我就分析一下label标签的可访问性问题。

label的使用方式

HTML5草案中是这样说的：

The label represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element’s labeled control, either using for attribute, or by putting the form control inside the label element itself.

label标签代表了用户界面上的一个标题，该标题可以与制定的表单控件相关联，即所谓的label元素标记控件。可以使用for属性，或是把表单控件放在label元素的里面实现该关联。

我们最常用的方式有两种，其一是使用label标签的for属性与控件元素的id相关联，其二就是使用label标签包裹控件元素，并且label标签的for属性与控件元素的id相关联。

The HTML Code:

1

<label for="fullname">姓名:</label><input type="text" name="fullname" id="fullname" />

The HTML Code:

1

<label for="fullname">姓名:<input type="text" name="fullname" id="fullname"/></label>

我并不喜欢第二种写法，它在样式控制上非常不方便，例如全部标签等宽并且文本左对齐或右对齐,还有对读屏软件也不是很友好，有复读文本的副作用。

差点忘了还有一种写法，就是label标签直接包裹控件元素,没有属性关联：

The HTML Code:

1

<label>姓名:<input type="text" name="fullname" id="fullname"/></label>

Jace老兄,给我们做了一下分类：显式label 和 隐式label。

显式label

• 也就是说为label元素添加for属性，其属性值与表单控件的id属性值一致。
• 重置和提交按钮(<input type=”reset”/> 、<input type=”submit”/>)， 图片按钮(<input type=”img”/>)以及脚本按钮 (<button></button>)不用使用显式label，因为它们已经有了隐式标签，如value 和 alt 属性值，button元素的内容。

1

<label for="fullname">姓名:</label><input type="text" name="fullname" id="fullname" />

隐式label

• 根据HTML 4.01 规范， 通过label 元素包裹 表单控件和label包含的文本可创建”隐式label”。
• 由于一些浏览器(IE6)不支持隐式label，WCAG2.0不建议使用。

1

<label for="fullname">姓名:<input type="text" name="fullname" id="fullname"/></label>

显式label 和 隐式label的混合体

1

<label for="fullname">姓名:<input type="text" name="fullname" id="fullname"/></label>

ARIA States and Properties

使用  aria-labelledby  属性。

The HTML Code:

1

<label id="fullname">姓名:</label> <input type="text" aria-labelledby="fullname">

The HTML Code:

1

<label id="fullname">姓名: <input type="text" aria-labelledby="fullname"></label>

看一个完整测试和结果：主流浏览器和屏幕阅读器控件标签化支持测试

得出的结论：

• 显式label是最健壮的方式,也是最佳实战。
• 隐式label, 在屏幕阅读器NVDA 中会重复内容，会带来没必要的干扰。
• aria-labelledby属性，在主流浏览器中可以获得更好的可访问性。
• 显式label 和 隐式label的混合体，固然强大，隐式label的恶习留下了。

参考资料：

• Form labels: visible and hidden
• HTML5 Accessibility Chops: form control labeling