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

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

案例一:

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

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

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

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

——中国时报《看“暮光之城”引發癲癇 美傳兩例》

案例二:

1997年12月16日下午6时30分,东京电视台播出《神奇宝贝》第38话《电脑战士3D龙》,下午6时51分34秒,当播到动画中涉及电脑世界中的电脑疫苗发射的导弹被皮卡丘使用电击引爆的片段时,发出强烈而且频繁的红蓝交替的闪光,播出后,观众投诉在观看后出现眼花、头疼及恶心的症状,严重者甚至暂时失明、抽搐和晕倒。

根据日本消防部门统计,一共有685名儿童送院治疗,虽有部分已经在送院途中自行恢复,但仍有150名儿童需送院,有两人住院超过3星期。

事后调查所得,根据日本动画制作惯用手法,常以不同颜色交替闪烁的方法突出爆炸场景,以求造成视觉暂留的震撼效果,同时也可节省制作成本。而在该集动画片中,因突出“电脑世界”的效果,爆炸片段采用红蓝帧交替的方法制作,而替换频率高于正常动画制作标准,高达每秒12帧,长约5秒。而如此频繁的闪光会影响脑部的控制,引起类似癫痫病的急性光过敏症(Photosensitive epilepsy,也称为光敏感性癫痫症),而动画片观众多为儿童,对此较为敏感,同时一般集中精神观看,因此不适者多为儿童。

在网页中我们也经常使用多媒体或动画来丰富我们的页面,WCAG2.0对此也做出了建议:

Guideline 2.3  Seizures: Do not design content in a way that is known to cause seizures.

不要以可导致癫痫发作的已知方式设计内容。

3A级的成功标准是:

2.3.2 Three Flashes: Web pages do not contain anything that flashes more than three times in any one second period. (Level AAA)
2.3.2 三次闪烁:网页中不包含任何一秒内闪烁超过3次的内容。(AAA级)

如何做呐?

使闪烁区域足够小

视野范围的10度范围是人眼视野的中心区域。视觉传感器高度分布在这个区域,这一区域的闪烁会传送到视觉皮层,可能会引发光敏性癫痫发作。眼睛其他区域的闪烁对皮层的刺激会小,因此我们关注10度的中央视觉。

如果将视野转换为像素值呢?这与视距、屏幕分辨率等有关。以 15~17 寸、分辨率 1024×768 的屏幕来说,视距为 55~66 公分,则含有闪烁图片的区域不得超出 341×256 像素。同样大小的屏幕,分辨率越高则越安全,分辨率越低则越容易造成闪烁区域过大。

另外,

除了闪烁区域有大小限制外,闪烁频率也不能太快。WCAG1.0要求闪烁频率不得介于 4~59 Hz 之间,美国的《508 法案》则要求闪烁频率不得介于 2~55 Hz 之间。WCAG2.0计算闪烁频率时会把闪烁分成两种:一般闪烁红闪烁;不论是哪一种闪烁,任一秒内都不能超过三次,亦即闪烁频率不得超过 3 Hz。一般闪烁指的是图片会先由暗转亮再由亮转暗,或者先由亮转暗再由暗转亮,其中暗时的相对明度低于 0.80,而且整体明度变化范围超过最大相对明度的 10%。——《网页亲和力:多媒体网页实务制作》

定义IE的文档兼容模式

朋友网V4版本昨天已发出,界面小清新,feeds组织方式大改观,新增个性化名片等,值得去体验一下。

之前的版本朋友网都是把文档模式指定为IE7,地球人都知道的语法:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

这次改版kairee同学想跳过IE8,指定IE7和IE9,使用了MSDN文档推荐的语法:

<meta http-equiv="X-UA-Compatible" content="IE=7;IE=9" />

该文档还提供了一些信息:

The X-UA-Compatible header is not case sensitive; however, it must appear in the header of the webpage (the HEAD section) before all other elements except for the title element and other meta elements.

Because edge mode documents display webpages using the highest mode available to the version of Internet Explorer used to view them, it is recommended that you use this document mode for testing purposes only. Do not use it for production uses.

测试阶段,测试人员发现了一些IE8下的bug,发现在IE8下并没有以IE7的文档模式渲染页面,google之,很多人都遇到过这个情况,已有人做了书写方式测试,眼见为实,找来装有原生IE8的机器测试了一下,测试结果如下:

1.定义多种文档模式时,使用逗号(,),而非文档中提到的分号(;)

<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7,IE=EmulateIE9" />

2.或者以逗号升序连写的方式

<meta http-equiv="X-UA-Compatible" content="IE=7,9" />

查看测试结果截图

无障碍的五个阶段

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

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

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

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

拒绝(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 */

Continue reading

模块中使用ARIA region

随着网页互动性的逐渐增强,有必要对我们的内容增加语义信息。ARIA landmarks 可以定义网页区块以及区块的目的。

使用ARIA的几个好处:

  • 增强文档的语义和浏览
  • 屏幕阅读器用户可以感知高级文档结构/布局
  • 屏幕阅读器提供了键盘快捷键在地标之间移动

您现在就可以在你的网站上使用预定义的ARIA landmarks。如果你想定义一个模块,但没有与之对应的role,你可以使用通用的role=”region”。本文讨论如何使用region landmark role。

标准模块格式

YUI使用了一个标准模块格式,这种div和class的通用格式可以很容易地将模块从一个网页、区块、甚至一个网站移至他处,Web页面已经从文档格式转变为模块的集合,我们在朋友网中也借鉴了这种书写方式。我们可以很容易地使用ARIA为大多数通用模块添加Landmark,比如导航或搜索表单,这些都有利于用户了解页面上每个模块的目的。这篇文章将告诉你如何使用role=”region”来定义页面上的模块。

朋友网首页aria landmark role 实践

Continue reading