进步博客

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

增强网站可访问性的25种方法一文,其实讲的是影响网站可访问性的25个重要方面,第十部分讲的是表单。其中讲到使用label元素将标签和特定表单控件联结起来,具体写法有两种:显式label 和隐式label,大猫同学问到两种写法对盲人有何影响,于是测试了一番。

显式label

<label for="firstname">First name:</label><input type="text" name="firstname" id="firstname" tabindex="1" />

隐式label

<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测试发现,屏幕阅读器用户听到的提示内容是不同的:

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

查看demo

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

更多阅读:Form labels: visible and hidden