一聚教程网:一个值得你收藏的教程网站

热门教程

html表单中显式label与隐式label及屏幕阅读器的影响

时间:2022-06-25 18:19:49 编辑:袖梨 来源:一聚教程网

label元素平淡无奇,就是为表单输入元素贴上标签,方便辨识。label有个很重要的属性是for,可以将label与其标识的输入元素绑定在一起,提供更好的操作体验。

显式label



重置和提交按钮,图片按钮以及button元素按钮不用使用显式label,因为它们已经有了隐式标签,如value 和 alt 属性值,button元素的内容。

显式的label对Accessibility是最友好的。

隐式label

将输入元素直接包裹在label标签之内,for属性也可以省略了,甚至输入元素的id也可以省略了。



IE6不支持隐式label

混合式label

即使用label的for特性,又将输入元素包裹在label之内
   



表单显式label和隐式label对屏幕阅读器用户的影响

显式label


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



隐式label


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



另外一种写法,即上面两种方法的结合:



两者的区别

使用屏幕阅读器NVDA和IE9测试发现,屏幕阅读器用户听到的提示内容是不同的:

    显式label写法:“fFirst name: 编辑框 空白(或内容)”
    隐式label写法:“First name: 文本 First name: 编辑框 空白(或内容)”–两种方法一致,不过最后一种写法在所有浏览器下点击label都无法激活表单控件(笔者demo手误,已更改),强烈不推荐这种写法。

可以看出,nvda会重复label文本内容,屏幕阅读器用户更容易理解显式label写法的提示。

更新:今日看到 HTML5 Accessibility Chops: form control labeling 一文做了同样的测试,作者测试了更多的浏览器和屏幕阅读器,今天的测试,得到了同样的结论:使用for 和 id 并且表单控件不放在label元素内是最健壮的方法。

热门栏目