View more PowerPoint from Lee Jace
分类目录归档：web无障碍
网页内容也可引发癫痫发作
先看两则电影和动画引发癫痫发作的报道：
案例一：
《暮光之城》电影系列大结局的上半集《暮光之城：破晓Ｉ》最近在美国上映，吸引众多青年男女结伴观赏，但有癫痫症的人可要小心了，因为现已传出至少两名观众看这部电影看到一半时突然癫痫发作，其中一人必须紧急送医。
加州的布兰登陪女友凯莉去看这部电影，片中女主角贝拉分娩的画面逼真又血腥，同时有红、黑、白三色灯光闪烁，布兰登看到这段时突然全身抽搐，吓坏他的女友。布兰登送医后已经无恙。
另一起事故发生在犹他州南乔丹，一名男子也是在看到上述情节时突然发病，据他的妻子形容，他全身颤抖，眼睛眨个不停，嘴巴喃喃自语。
癫痫专科医师切兹说，红光闪烁的画面会对大脑造成强烈刺激，加上电影院一片黑暗更凸显刺激效果，可能诱发“光敏性癫痫”（photosensitive epilepsy）。这种偶发的癫痫不会对人脑造成长期影响，若要避免看这部电影时癫痫发作，可戴蓝色镜片过滤红色光线。
——中国时报《看“暮光之城”引發癲癇 美傳兩例》 继续阅读网页内容也可引发癫痫发作
无障碍的五个阶段
你可能听说过伊丽沙白·库伯勒·罗斯在其书《论死亡与临终》中提出的“悲痛的五个阶段”。
通过对大量晚期患者的访谈及研究患者临近死亡前的心理活动，将濒临死亡的过程分成五个心理阶段：拒绝、愤怒、挣扎、沮丧、接受。查看这篇博文了解详情。
将这些名词应用到无障碍领域可能有所不妥，但有助于我们理解无障碍，无论是个人层面还是企业级。
无障碍在你的组织中处在哪个阶段？如何确定你对无障碍理解的程度？下面这些话语是我们多年来听到的，可以帮助你判断你所处的阶段：
拒绝（Denial）
- “这针对的是web‘应用程序’，所以这些规则并不适用于我们”
- “我们不是政府，所以我们没有必要使它无障碍”
- “残疾人不会访问我的网站… …他们不是我的客户”
愤怒（Anger）
- “真不敢相信，他们让我们做这些事情”
- “为什么我们的团队成员不知道如何做到这一点！？”
- “这只会花费我们的钱，永远也赚不回来！”
- “这太不公平了！”
挣扎（Bargaining）
- “可不可以只兼容A级，不兼容AA级？”
- “我们可不可以以后再做这件事？”
- “我们有三个网站，可不可以只让一个网站做到无障碍？”
- “移动网站不需要做到无障碍，因为我们的主站已经是了。”
沮丧
- “哎，我们还得做这些工作，也没看到有啥效果，可那个顾问还告诉我们，我们做错了…”
- “这真的很难，需要考虑很多地方”
- “这样做有什么意义呢？无论我们怎么做都不够好”
接受（Acceptance）
- “在不影响我们的业务目标和网站美观的情况下，让我们的网站被尽可能多的人访问。如果今后需要修改使其更容易访问，我们也会做。”
- “我们可以做到！”
你在哪个阶段？如果大家都处在接受阶段，那再好不过了，但这可能并不现实。你的组织对无障碍的认识在哪个阶段呐？
display:table对一些屏幕阅读器有语义影响
讨论这个话题的前提是我们直接无视IE6/IE7浏览器，查看浏览器支持情况。有时，我们希望使用HTML table的布局属性，但又不想使用table的语义，因为我们不是用来处理表格数据（tabular data）。比如:
- 创建等高列；
- 实现大小不确定元素的垂直居中；
- 容器内子项目数目未知，子项目平均分配容器的水平空间；
这种情况下，你可以为html元素使用css定义display:table, display:table-row, display:table-cell来达到目的。同时也不会破坏我们的结构，标签选用符合语义化要求。
display:table和屏幕阅读器
使用css改变一个元素的display属性不会改变HTML的底层语义。从逻辑上讲，display:table不应该使屏幕阅读器把css表格看作真正的表格。
456 berea street最近做了一个测试，测试屏幕阅读器在不同浏览器下如何对待css 表格，在此基础上我又添加了测试内容，下面是结果摘要：
NVDA + IE：不会将css表格读为“表格”。
NVDA + chrome：不会将css表格读为“表格”。
NVDA + Firefox：原作者认为除只含有一个单元格的表格外，css表格会被读为“表格”。我的测试结果是：只有多行多列的情况下，才会读为“表格”，单行多列，单行单列均不会读作“表格”。
VoiceOver：不会将 css 表格读为“表格”。
ORCA:在页面中进行表格导航时，会将所有的css表格读为“表格”。
这是 display:table 测试页面，如有兴趣，自己可试一下。
另外有读者测试了Window-Eyes 和 JAWS在IE和Firefox下的表现，均不会把css表格作为“表格”对待。
综上所述，使用display:table来实现我们前面提到的例子，只要不是模拟“多行多列”的情况，就基本没有问题。
朋友网无障碍优化实践总结了朋友网的一些无障碍优化，发表在团队博客上了，感兴趣的话移步查看。
为了更好的可访问性，使用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元素内是最健壮的方法。