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> |
看一个完整测试和结果:主流浏览器和屏幕阅读器控件标签化支持测试
得出的结论:
- 显式label是最健壮的方式,也是最佳实战。
- 隐式label, 在屏幕阅读器NVDA 中会重复内容,会带来没必要的干扰。
- aria-labelledby属性,在主流浏览器中可以获得更好的可访问性。
- 显式label 和 隐式label的混合体,固然强大,隐式label的恶习留下了。
参考资料:
很好的2篇文章 谢谢总结了!