所有由Jace发布的文章

政府无障碍标准和WCAG 2.0

本文是对世界各地政府无障碍标准现状研究的一些总结,截至日期为2012年3月。通常情况下,这发展相当缓慢,虽然近期的Jodhan案(Jodhan v. Canada (Attorney General) 可能会改变这种状况(政府不希望被其公民成功起诉)。

通常,这些标准仅适用于政府机构网站(而不是商业网站),但在澳大利亚商业网站也必须遵守。其他国家的残疾歧视法中也涵盖了网站,但这些都没有提供技术标准以达到法律规定。

下表总结了17个地区政府的无障碍标准及相关法例:

国家

标准

法律法规

适用范围

澳大利亚

WCAG 2 AA

“残疾歧视法”(Disability Discrimination Act)

2013年年底前,所有的政府非政府网站应当遵循 WCAG 2 AA

加拿大

WCAG 2 AA

1977人权法案(human Rights Act 1977)

2011年8月前,所有政府网站遵循“通用观感2.0”(Common Look and Feel 2.0),该指南基于WCAG1。Jodhan案(Jodhan v. Canada (Attorney General))裁决要求加拿大政府将该指南更新至WCAG 2,2011年8月1日开始执行无障碍网页标准( Standard on Web Accessibility)

EU

WCAG 1 AA

欧洲议会决议(2002年)0325 *

所有欧盟委员会网站- EUROPA – 无障碍网页方针( EUROPA – Web accessibility policy) 。Progress towards WCAG 2 is being done by the Mandate M 376 working group which started work in 2006.

法国

RGAA 2.2.1(基于WCAG 2)

Law No 2005-102, Article 47

2010年5月,所有的法国中央政府网站。2011年5月,所有的法国其他公众网站(公共服务,城镇,公共研究等)都必须遵守。

德国

BITV 2 (基于WCAG 2)

联邦残疾人均等法(BGG) Federal Disabled Equalization Law (BGG)

2011年9月22日BITV 2 生效 ,要求所有政府网站遵守。它基于WCAG 2,但不完全相同。

香港 (Hong Kong)

WCAG 2 AA

2012年3月,WCAG2 AA 成为“香港政府一站通”网站 的标准。

印度

印度政府网站指南 (基于WCAG 2 A)

2009年2月,印度政府网站遵循WCAG 2 A级标准。

爱尔兰

WCAG 1 AA

2005年“残疾法” The Disability Act 2005

所有政府网站- 公共机构公共服务和信息网站无障碍实务守则

意大利

Technical Rules of Law 4/2004 (基于WCAG 1 AA)

Law No. 4/2004 (“Stanca” Law)

所有政府网站

日本

JIS X 8341 (基于WCAG 2)

基于WCAG 2 ,并包含日语和输入系统的规定。所有地方和中央政府网站。同时鼓励商业网站遵循。

荷兰

WCAG 1

政府网站必须遵守政府网站指南,其中包括WCAG 1 A。没有要求非政府网站遵守。

新西兰

WCAG 2 AA

人权法修正案(2001) Human Rights Amendment Act 2001

新西兰政府网页标准2.0 (WCAG 2 AA),所有政府网站需遵守。

安大略省

AODA (基于WCAG 2 AA)

2012年1月,所有安大略省政府新网站,2016年1月,现有的政府网站。

魁北克省

基于SGQRI 008(WCAG 2)

无障碍网页标准 Standards sur l’accessibilité du Web

在WCAG 2.0基础上定制的标准,涵盖对网站、可下载文档和多媒体的规定。

西班牙

UNE 139803:2004(基于WCAG 1 AA)

Law 34/2002, Law 51/2003

要求所有的政府网站。没有强制要求非政府网站遵循。

联合王国(英国)

WCAG 1 AA or

WCAG 2 AA

平等法案(2010) Equality Act 2010

包容性网站COI标准(COI standard for inclusive websites )要求所有的英国政府网站达到WCAG 1 AA或 WCAG 2 AA。英国其他网站需要遵守“平等法案”,并提供平等的访问机会,但并未指定技术标准(至少符合WCAG 1 或 2 A 表明了可访问性问题已被重视)。

USA

Section 508 (WCAG 1 的子集和一些增补)

康复法案第508节 Section 508 of Rehabilitation Act

美国联邦机构的网站必须符合第508条的指引。目前正在更新 – 2010年3月更新了一次草案,2011年12月又更新了一次。

这项研究的关键看点是:WCAG 2正逐步被采纳,并越来越重要:

  • 澳大利亚、加拿大、法国、德国、香港、日本和新西兰政府已经采纳了WCAG 2。
  • 英国政府网站必须符合WCAG 1 AA 或 WCAG 2 AA。
  • 在美国,Section 508正在更新与WCAG 2保持一致。
  • 欧盟委员会正在研究将WCAG 2作为欧洲政府标准,但德国(BITV)和意大利的国家标准使这一过程变得复杂。

2010年11月首次发表,2012年3月更新。

来源:Mark Rogers. Government Accessibility Standards and WCAG 2.0. 2012.3.22

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

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

案例一:

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

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

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

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

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

定义IE的文档兼容模式

——————————————————
[2013-2-21更新]:新增对文档模式的理解。
——————————————————

朋友网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" />

查看测试结果截图

文档模式(document mode)是IE8引入的一个新概念。页面的文档模式决定了你可以使用哪个级别的CSS,可以使用JavaScript的哪些API,以及如何对待文档类型(doctype)。

从上面的例子可以看出“X-UA-Compatible”的值有两种方式:Emulate+IE版本号,单纯版本号。这两种有何区别呢?

  • Edge:始终以最新的文档模式来渲染页面。忽略文档类型声明。对于IE8,始终以IE8标准模式渲染页面。IE9亦如此。
  • EmulateIE9:如果声明了文档类型,则以IE9标准模式渲染页面,否则将文档模式设置为IE5。 EmulateIE8:如果声明了文档类型,则以IE8标准模式渲染页面,否则将文档模式设置为IE5。 EmulateIE7:如果声明了文档类型,则以IE7标准模式渲染页面,否则将文档模式设置为IE5。
  • 9:强制以IE9标准模式渲染页面,忽略文档类型声明。
  • 8:强制以IE8标准模式渲染页面,忽略文档类型声明。
  • 7:强制以IE7标准模式渲染页面,忽略文档类型声明。
  • 5:强制以IE5标准模式渲染页面,忽略文档类型声明。

无障碍的五个阶段

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

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

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

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

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