随着网页互动性的逐渐增强,有必要对我们的内容增加语义信息。ARIA landmarks 可以定义网页区块以及区块的目的。
使用ARIA的几个好处:
- 增强文档的语义和浏览
- 屏幕阅读器用户可以感知高级文档结构/布局
- 屏幕阅读器提供了键盘快捷键在地标之间移动
您现在就可以在你的网站上使用预定义的ARIA landmarks。如果你想定义一个模块,但没有与之对应的role,你可以使用通用的role=”region”。本文讨论如何使用region landmark role。
随着网页互动性的逐渐增强,有必要对我们的内容增加语义信息。ARIA landmarks 可以定义网页区块以及区块的目的。
使用ARIA的几个好处:
您现在就可以在你的网站上使用预定义的ARIA landmarks。如果你想定义一个模块,但没有与之对应的role,你可以使用通用的role=”region”。本文讨论如何使用region landmark role。
增强网站可访问性的25种方法一文,其实讲的是影响网站可访问性的25个重要方面,第十部分讲的是表单。其中讲到使用label元素将标签和特定表单控件联结起来,具体写法有两种:显式label 和隐式label,大猫同学问到两种写法对盲人有何影响,于是测试了一番。
<input type="reset"/>
、<input type="submit"/>
), 图片按钮(<input type="img"/>
)以及脚本按钮 (<button></button>
)不用使用显式label,因为它们已经有了隐式标签,如value 和
alt
属性值,button元素的内容。<label for="firstname">First name:</label><input type="text" name="firstname" id="firstname" tabindex="1" />
<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写法的提示。
更新:今日看到 HTML5 Accessibility Chops: form control labeling 一文做了同样的测试,作者测试了更多的浏览器和屏幕阅读器,查看测试demo页和结果页,得到了同样的结论:使用for 和 id 并且表单控件不放在label元素内是最健壮的方法。