label标签的可访问性问题分析

最近对可访问性的研究比较多一些,有许多可访问性的实施细节,都是我们力所能及的,同时也是一些好的习惯和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>

text exposed by browsers as the form control name to accessibility APIs

text announced by screen readers as the form control name

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

得出的结论:

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

参考资料:

站点统计