标签归档：屏幕阅读器

web无障碍

视觉隐藏内容

8条评论

组内做的一个分享，主题是“视觉隐藏内容”，主要关注隐藏的方式、方法及每种方法对可访问性的影响，并着重分析了a & label元素的可访问性，介绍了使用clip来做视觉隐藏。内容有点散，但主题明确，其他组的几个同事来要PPT，现在传至slideshare，错误之处，请指正。

View more presentations from Lee Jace.
web无障碍

为了更好的可访问性，使用clip隐藏内容

2条评论

我们需要在创建一个整洁、简单的视觉设计和提供可访问的内容和功能之间做平衡。一个通用的解决办法是向屏幕阅读器提供补充文本，并通过CSS隐藏这些文本。请访问我们的屏幕阅读器测试：无障碍隐藏内容方案来了解更多关于隐藏内容的可访问性的信息。

从Jonathan的这篇博文 Adaptive Themes中的评论和其他地方的提问来看，许多开发者仍然对这个问题感到困惑。因此，首先扼要重述一下基本的声明，当提及隐藏内容时：

使内容对辅助技术（AT）可访问的技术

position:absolute;
clip:rect(1px 1px 1px 1px);
position:absolute; left:-999em;
position:absolute; top:-999em;
text-indent:-999em;

使内容无法访问的技术（所有用户均不可见）

visibility:hidden; /* in most screen readers*/
display:none;
/*in most screen readers and with some exceptions
http://juicystudio.com/article/screen-readers-display-none.php*/
overflow:hidden;
height:0; /* In VoiceOver */

继续阅读为了更好的可访问性，使用clip隐藏内容 →

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有用。