组内做的一个分享，主题是“视觉隐藏内容”，主要关注隐藏的方式、方法及每种方法对可访问性的影响，并着重分析了a & label元素的可访问性，介绍了使用clip来做视觉隐藏。内容有点散，但主题明确，其他组的几个同事来要PPT，现在传至slideshare，错误之处，请指正。
View more presentations from Lee Jace.
为了更好的可访问性，使用clip隐藏内容
我们需要在创建一个整洁、简单的视觉设计和提供可访问的内容和功能之间做平衡。一个通用的解决办法是向屏幕阅读器提供补充文本，并通过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 */
模块中使用ARIA region
随着网页互动性的逐渐增强，有必要对我们的内容增加语义信息。ARIA landmarks 可以定义网页区块以及区块的目的。
使用ARIA的几个好处：
- 增强文档的语义和浏览
- 屏幕阅读器用户可以感知高级文档结构/布局
- 屏幕阅读器提供了键盘快捷键在地标之间移动
您现在就可以在你的网站上使用预定义的ARIA landmarks。如果你想定义一个模块，但没有与之对应的role，你可以使用通用的role=”region”。本文讨论如何使用region landmark role。
创建高可访问性的图像链接
俗话说：一图胜千言。在屏幕空间有限的互联网上更是如此，图像可以让用户快速了解一篇文章内容的概要、一个新产品的魅力或一组数据的概要。图像也可以用来精细控制排版和设计。互联网用户倾向于点击图像，因为它们通常与链接关联。问题就在于此。在视觉上，图像代表了链接的目的，但你怎能保证链接对视觉障碍用户同样是可用的呢？
空的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>
链接中增强文本的图像
表单显式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写法的提示。
更新：今日看到 HTML5 Accessibility Chops: form control labeling 一文做了同样的测试，作者测试了更多的浏览器和屏幕阅读器，查看测试demo页和结果页，得到了同样的结论：使用for 和 id 并且表单控件不放在label元素内是最健壮的方法。
增强网站可访问性的25种方法
随着web使用量的增加和人们网络意识的增强，可访问性（或“通用设计”）变得更加重要。可访问性不仅取决于一个网站的代码，还受网站设计和内容的影响，这就是为什么可访问性、标准和可用性关系如此紧密。
网页无障碍是一个庞大的课题，已自成一个领域。 但不要被它吓到。无障碍并不是非常难以实施。它并不会像一些人想象的会有碍美观或影响交互。这是一种高明的（smart）设计和开发方式。
让我们来看看建立一个无障碍网站的25个重要技术。
1.一致的布局和结构
为了帮助用户快速和轻松地浏览您的网站，你应该提供一个一致的布局和结构。页面的主要元素——banner、navigation、sidebar侧栏，在整个网站中应该出现在的相同位置 。他们也应该标记一致，如使用同一标题结构（heading structure）。这有利于认知障碍者和使用屏幕阅读器（用来处理屏幕上的内容，并大声读出）的用户访问。 继续阅读增强网站可访问性的25种方法
WebAIM第三次屏幕阅读器用户调查报告
2010年12月，WebAIM进行了第三次屏幕阅读器用户的偏好调查。2009年1月和2009年10月，WebAIM先后进行了两次屏幕阅读器用户调查，这是前两次调查的跟进调查。本次调查共收到1245份有效调查结果（其中英语1049份，西班牙语101份，法语91份和葡萄牙语4份）。
虽然国内与国外的互联网环境、辅助技术、无障碍政策法规、视障群体的信息素养有差异，但该报告结果对我们了解视障群体的使用习惯和信息需求有一定帮助，为国内的信息无障碍优化提供事实依据，故笔者将此报告做了全文翻译，现将一些结论摘录于此：
在之前的屏幕阅读器用户调查中发现的结论仍然存在—— 没有典型的屏幕阅读器用户。这些结果突出显式了两年内的重大变化和趋势，我们希望这些结果能够推动网页无障碍有根据的实践。
值得注意的几个点：
- JAWS仍然是主屏幕浏览器，但其使用量因为NVDA和VoiceOver使用量的显著增加而下降。
- 实行免费或低收费的屏幕阅读器的看法正在改善。
- 98.4％的受访者启用JavaScript。
- 对网页可访问性的前景是乐观的。
- 三分之二的受访者在移动设备上使用屏幕阅读器，两年前只用12%的人使用。
- 大部分受访者认为longdesc有用。
确保DOM顺序与视觉顺序一致
C27: Making the DOM order match the visual order
适用性
CSS与HTML和XHTML使用
该技术涉及：
- 成功标准1.3.2 有意义的顺序 (Meaningful Sequence)
- 成功标准2.4.3 焦点顺序 (Focus Order)
描述
该技术的目的是确保内容在源代码中的顺序与内容的视觉呈现顺序一致。作者通过改变css可以将同一源代码的内容呈现为多种视觉顺序。每种顺序本身可能有意义，但可能会导致辅助技术用户困惑。这可能是由于用户关闭了作者指定的展现形式，而是直接通过源代码访问内容（如屏幕阅读器），或者使用键盘与内容交互。如果一个使用屏幕阅读器跟踪源代码来阅读网页的盲人用户与通过视觉顺序阅读网页的明眼用户一起工作，当他们以不同的顺序获取信息时，他们可能会遇到困惑。使用屏幕放大镜和屏幕阅读器组合的低视力用户可能会感到困惑，当阅读顺序在屏幕上来回跳转时。当源代码顺序与视觉顺序不匹配时，键盘用户可能会在预测下一个焦点位置时遇到麻烦。
也有这种情况，视觉呈现顺序对页面的整体理解很重要，如果源代码顺序与展现的不同，它可能会更加难以理解。
当源代码顺序与视觉顺序匹配时，每个人会以同一（正确）的顺序阅读内容并与之交互。
注：tabindex属性有两个功能：其一是使元素可获取焦点，另一个是为元素分配在焦点序列中的位置。tabindex等于0可使元素聚焦，但是是以源元素的顺序添加到焦点序列中的。焦点的顺序依照tabindex正值的顺序。设置tabindex值导致元素的顺序与元素在DOM对象模型（DOM）中的顺序不一致，这意味着该顺序对辅助技术用户来说是不正确的。这主要是因为tabindex属性是在HTML或XHTML中定义的，而不是CSS指定。这可能会在未来的规范中改变，它也可能与视觉呈现顺序不一致。
from: Techniques for WCAG 2.0
键盘可访问性
一些思考
键盘辅助功能是残疾访问的一个重要方面。盲人通常不能使用鼠标，因为他们看不到点击的地方。他们几乎完全依靠键盘。（一些有有限残余视力的法定盲，在页面被放大和高对比度下可以使用鼠标。）（注：法定盲(legal blind)法律上对视觉障碍的界定。目的是为教育、福利或其他方面的工作提供统计标准和确定的依据。在美国为优眼最佳矫正视力在20/200以下，或中心视野直径在20°以下者。在中国则为优眼最佳矫正视力在0.5以下或视野半径小于10°者。大部分仍有一些残余视力，完全看不见的只占少部分。）
一些有神经肌肉障碍的用户也不能使用鼠标。震颤麻痹的用户不能很好的控制肌肉，还有一些很少或者从没使用过他们的双手，由于脊髓损伤、脑损伤或者其他一些原因。有些人根本就没有手，无论是由于出生缺陷、事故或截肢。总之，有很多种情况导致使用鼠标困难或者根本无法使用鼠标。
无法使用鼠标的人可能也不能使用键盘。一些人使用”puff and sip”（吹吸）设备，这种设备通过口腔气流来控制鼠标。（译者注：puff and sip设备是一种为有行动障碍的人提供辅助的计算机技术，是一种替代鼠标的头戴式设备，用户可以在不使用手的情况的下通过向管子内吹气来控制鼠标的指针移动。）
实用技巧：Firefox下显示网页中的accesskey键盘快捷键
原文：http://www.ampercent.com/how-to-display-keyboard-shortcuts-on-a-web-page-in-firefox/6253/
翻译：Jace （有修改）
在打开的程序、对话框之间或者内部切换、访问菜单项，以及执行简单的任务（如复制、粘贴）时，使用键盘快捷键或热键可以节省你很多时间。
键盘快捷方式在浏览网页时同样也能派上用场。很多网页能够较好的展示出设置的快捷方式，同时也有很多网页的快捷键不被用户察觉。如果您使用的是Firefox，只需对与此类网页链接的CSS做小的修改即刻呈现出设置了的键盘快捷键。 继续阅读实用技巧：Firefox下显示网页中的accesskey键盘快捷键