分类目录归档:web无障碍

网页内容也可引发癫痫发作

先看两则电影和动画引发癫痫发作的报道:

案例一:

《暮光之城》电影系列大结局的上半集《暮光之城:破晓I》最近在美国上映,吸引众多青年男女结伴观赏,但有癫痫症的人可要小心了,因为现已传出至少两名观众看这部电影看到一半时突然癫痫发作,其中一人必须紧急送医。

加州的布兰登陪女友凯莉去看这部电影,片中女主角贝拉分娩的画面逼真又血腥,同时有红、黑、白三色灯光闪烁,布兰登看到这段时突然全身抽搐,吓坏他的女友。布兰登送医后已经无恙。

另一起事故发生在犹他州南乔丹,一名男子也是在看到上述情节时突然发病,据他的妻子形容,他全身颤抖,眼睛眨个不停,嘴巴喃喃自语。

 癫痫专科医师切兹说,红光闪烁的画面会对大脑造成强烈刺激,加上电影院一片黑暗更凸显刺激效果,可能诱发“光敏性癫痫”(photosensitive epilepsy)。这种偶发的癫痫不会对人脑造成长期影响,若要避免看这部电影时癫痫发作,可戴蓝色镜片过滤红色光线。

——中国时报《看“暮光之城”引發癲癇 美傳兩例》 继续阅读网页内容也可引发癫痫发作

无障碍的五个阶段

你可能听说过伊丽沙白·库伯勒·罗斯在其书《论死亡与临终》中提出的“悲痛的五个阶段”。

通过对大量晚期患者的访谈及研究患者临近死亡前的心理活动,将濒临死亡的过程分成五个心理阶段:拒绝、愤怒、挣扎、沮丧、接受。查看这篇博文了解详情。

将这些名词应用到无障碍领域可能有所不妥,但有助于我们理解无障碍,无论是个人层面还是企业级。

无障碍在你的组织中处在哪个阶段?如何确定你对无障碍理解的程度?下面这些话语是我们多年来听到的,可以帮助你判断你所处的阶段:

拒绝(Denial)

  • “这针对的是web‘应用程序’,所以这些规则并不适用于我们”
  • “我们不是政府,所以我们没有必要使它无障碍”
  • “残疾人不会访问我的网站… …他们不是我的客户”

愤怒(Anger)

  • “真不敢相信,他们让我们做这些事情”
  • “为什么我们的团队成员不知道如何做到这一点!?”
  • “这只会花费我们的钱,永远也赚不回来!”
  • “这太不公平了!”

挣扎(Bargaining)

  • “可不可以只兼容A级,不兼容AA级?”
  • “我们可不可以以后再做这件事?”
  • “我们有三个网站,可不可以只让一个网站做到无障碍?”
  • “移动网站不需要做到无障碍,因为我们的主站已经是了。”

沮丧

  • “哎,我们还得做这些工作,也没看到有啥效果,可那个顾问还告诉我们,我们做错了…”
  • “这真的很难,需要考虑很多地方”
  • “这样做有什么意义呢?无论我们怎么做都不够好”

接受(Acceptance)

  • “在不影响我们的业务目标和网站美观的情况下,让我们的网站被尽可能多的人访问。如果今后需要修改使其更容易访问,我们也会做。”
  • “我们可以做到!”

你在哪个阶段?如果大家都处在接受阶段,那再好不过了,但这可能并不现实。你的组织对无障碍的认识在哪个阶段呐?

REF: Five Stages of Accessibility

display:table对一些屏幕阅读器有语义影响

讨论这个话题的前提是我们直接无视IE6/IE7浏览器,查看浏览器支持情况。有时,我们希望使用HTML table的布局属性,但又不想使用table的语义,因为我们不是用来处理表格数据(tabular data)。比如:

  • 创建等高列;
  • 实现大小不确定元素的垂直居中;
  • 容器内子项目数目未知,子项目平均分配容器的水平空间;

查看应用实例demo页

这种情况下,你可以为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来实现我们前面提到的例子,只要不是模拟“多行多列”的情况,就基本没有问题。

视觉隐藏内容

组内做的一个分享,主题是“视觉隐藏内容”,主要关注隐藏的方式、方法及每种方法对可访问性的影响,并着重分析了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 */

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

模块中使用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

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

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

空的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写法的提示

查看demo

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

更多阅读:Form labels: visible and hidden