标签归档：信息无障碍

web无障碍

创建高可访问性的图像链接

3条评论

俗话说：一图胜千言。在屏幕空间有限的互联网上更是如此，图像可以让用户快速了解一篇文章内容的概要、一个新产品的魅力或一组数据的概要。图像也可以用来精细控制排版和设计。互联网用户倾向于点击图像，因为它们通常与链接关联。问题就在于此。在视觉上，图像代表了链接的目的，但你怎能保证链接对视觉障碍用户同样是可用的呢？

空的ALT属性会产生不好的体验

假设我们有一个链接，只包含一个图像。如果图像没有可用的替代文字，你会怎么做？（根据以前的指导原则）为了可访问，您必须包含一个alt属性。但是，简单地增加一个空的 ALT属性同样是不好的，图片的ALT属性必须要反映出链接的目的。

这个例子是一个打扮的像厨师的猫咪的图像。假设我们无法获得图像的title、目标网页的title、标题或图像的其他具体标题。当图像只有一个空的ALT属性时，会发生什么？

<a href="http://www.flickr.com/photos/draket/226893468/">
<img src="/226893468_53c604dc77_m.jpg" alt="" />
</a>

屏幕阅读器为了让用户了解链接的目的，它会读取链接的URL：“226893468”。这不是一个好的体验。

解决方案：添加一个通用的Alt文字

如果你不能为图像添加一个特定的alt文本，至少可以使用通用的文字来描述链接的目的。

<a href="http://www.flickr.com/photos/draket/226893468/">
<img src="/226893468_53c604dc77_m.jpg" alt="See this image on Flickr" />
</a>

链接中增强文本的图像

继续阅读创建高可访问性的图像链接 →

web无障碍

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

9条评论

增强网站可访问性的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

web无障碍

WebAIM第三次屏幕阅读器用户调查报告

1条评论

查看报告完整中文版 或 下载 PDF版本

2010年12月，WebAIM进行了第三次屏幕阅读器用户的偏好调查。2009年1月和2009年10月，WebAIM先后进行了两次屏幕阅读器用户调查，这是前两次调查的跟进调查。本次调查共收到1245份有效调查结果（其中英语1049份，西班牙语101份，法语91份和葡萄牙语4份）。

虽然国内与国外的互联网环境、辅助技术、无障碍政策法规、视障群体的信息素养有差异，但该报告结果对我们了解视障群体的使用习惯和信息需求有一定帮助，为国内的信息无障碍优化提供事实依据，故笔者将此报告做了全文翻译，现将一些结论摘录于此：

在之前的屏幕阅读器用户调查中发现的结论仍然存在—— 没有典型的屏幕阅读器用户。这些结果突出显式了两年内的重大变化和趋势，我们希望这些结果能够推动网页无障碍有根据的实践。

值得注意的几个点：

  • JAWS仍然是主屏幕浏览器，但其使用量因为NVDA和VoiceOver使用量的显著增加而下降。
  • 实行免费或低收费的屏幕阅读器的看法正在改善。
  • 98.4％的受访者启用JavaScript。
  • 对网页可访问性的前景是乐观的。
  • 三分之二的受访者在移动设备上使用屏幕阅读器，两年前只用12%的人使用。
  • 大部分受访者认为longdesc有用。