标签归档:label

模块中使用ARIA region

随着网页互动性的逐渐增强,有必要对我们的内容增加语义信息。ARIA landmarks 可以定义网页区块以及区块的目的。

使用ARIA的几个好处:

  • 增强文档的语义和浏览
  • 屏幕阅读器用户可以感知高级文档结构/布局
  • 屏幕阅读器提供了键盘快捷键在地标之间移动

您现在就可以在你的网站上使用预定义的ARIA landmarks。如果你想定义一个模块,但没有与之对应的role,你可以使用通用的role=”region”。本文讨论如何使用region landmark role。

标准模块格式

YUI使用了一个标准模块格式,这种div和class的通用格式可以很容易地将模块从一个网页、区块、甚至一个网站移至他处,Web页面已经从文档格式转变为模块的集合,我们在朋友网中也借鉴了这种书写方式。我们可以很容易地使用ARIA为大多数通用模块添加Landmark,比如导航或搜索表单,这些都有利于用户了解页面上每个模块的目的。这篇文章将告诉你如何使用role=”region”来定义页面上的模块。

朋友网首页aria landmark role 实践

继续阅读模块中使用ARIA region

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

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

显式label

  • 也就是说为label元素添加for属性,其属性值与表单控件的id属性值一致。
  • 重置和提交按钮(<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

  • 根据HTML 4.01 规范, 通过label 元素包裹 表单控件和label文本可创建”隐式label”。
  • 由于一些浏览器(IE6)不支持隐式label,WCAG2.0不建议使用。
<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测试发现,屏幕阅读器用户听到的提示内容是不同的:

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

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

查看demo

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

更多阅读:Form labels: visible and hidden