StoneHuang在世界盲人联会亚太区中期会议上的发言

Stone在世界盲人联会亚太区中期会议上的发言

准备这个演讲的时候,想起了许许多多曾经全情参与在我们的无障碍项目中,最后却由于各种各样的原因离开了公司、离开了原来的项目的同事: 朱梦娴(腾讯无障碍同盟第一任秘书,离职),朱元云(腾讯无障碍同盟第二任秘书,离职),温和(腾讯网无障碍化的主要推动者,调离了网站部),文举(朋友网无障碍的主要推动者,项目调整不再负责朋友网),胡莹(QQ无障碍的主要推动者,转岗到成都),万军(手Q的无障碍主要推动者,离职,现在盲人用户还在责怪我们为何不让他继续和盲人联系,唉),王艳茹(手Q接入无障碍测试的主要推动者,调离了即时通讯部),郭润增(QQ空间无障碍负责人,调离了社交平台部),吕旭辉(腾讯微博无障碍负责人,离职),庞龙(通用信息无障碍脚本负责人,离职)…… 

在无障碍问题上,给互联网公司施加压力真的很容易,以前也有过到互联网公司门口游行的。但是这是不是解决问题的好方式,被游行过的公司是否就此摇身一变成了无障碍化的标杆公司了呢?

那这些互联网公司真的是和残障人士有仇吗?真的是故意不把软件做好吗?真的是原来做得好好的产品非要故意改坏掉吗?在无障碍化的进程中我们中国的开发者实际遇到了什么问题,我们现在为什么不得不改变以前的收到一个问题动手就改的做法,不惜放慢无障碍化的脚步来进行艰难的而在外界看起来几乎没有什么具体进展的流程改造?这是我们第一次向大家讲述无障碍化背后真正困难的流程障碍,和我们的一些新尝试。

psb[1]

光明正大

大家好,我叫黄希彤,来自中国最大的互联网公司之一,腾讯公司。按照我们公司创始人的说法,我们是一家做连接的公司,我们通过互联网把人和人,人和商品,人和信息,人和生活服务连接中一起。我们说到人的时候,指的是每一个人,我们在理念上不排斥任何一个用户,即使他的身体有一些不方便。早上judy也提到了我的偶像Tim Berners-Lee 并引用了我最喜欢引用的伦敦奥运开幕式上的This is for everyone的照片。

但是我们在实践上,受到了中国整体技术水平和无障碍环境的限制,我们也制造出过大量的不符合信息无障碍要求的,不方便特殊人群使用的产品。我和我的团队在几年前开始注意到这个问题。从那时候起我们开始“偷偷摸摸”的进行产品的信息无障碍改造。为什么要偷偷摸摸的做,不能光明正大的做?我要从我们软件工程学的角度来解释一下。

这里我贴出了几个软件开发的生命周期模型,具体这些模型的细节我们不需要关心了,不管我们的一个产品采用的是什么模型,通常我们都要经过:计划、分析、设计、开发、测试、维护这样一系列软件开发阶段,才能最终把一个产品推出市场。我们的团队,还有现在中国大多数正在尝试进行信息无障碍化改造的软件,我们一开始试图进行无障碍改造的时候,是怎么进行的呢?

目前在中国,通常一个关注信息无障碍的软件开发工程师,发现了有一个无障碍的产品问题,他希望解决这个问题,他是这样做的,先左看看,再右瞧瞧,别人好像没有在盯着他是不是在做需求,就悄悄的把产品改吧改吧,解决掉一两个无障碍问题,然后悄悄的让这个无障碍特性跟着其他产品特性一起发布。

然后如果修改得还不错,那就皆大欢喜,用户很开心,而项目经理、产品经理、测试人员都不知道发生了什么事情,当然这个工作也不计入你的工作绩效里面。

要是改错了,影响了产品的其他功能,那就麻烦大了,大家都要问:谁给你提的需求?谁批准你做的修改?你的领导知道你没做正经需求跑去做这个吗?改成这个样子产品经理知不知道?测试团队有没有验收过你做的修改?这个修改带来的问题是不是你负责?

为什么会这样呢,问题就在于,从软件工程的角度来看,我们的无障碍改造只是在开发环节进行,其他环节都没有参与进来。这种非流程化的做法,会把无障碍改造置于一个名不正言不顺的地步,这样做一段时间以后,往往由于个别人轮岗调动、热情消退,或者项目本身发展变化,在无障碍上的投入减少,产品的无障碍程度就会出现倒退,原来好用的功能在新版本里面变得不好用了。

那么要解决这个问题,很明显我们需要吧无障碍工作规范化,在产品的规划阶段就规划好按版本逐步无障碍化的计划,在每个版本的需求分析阶段就要搜集包括视力障碍用户在内的各种用户的使用需求,在设计阶段就要做好无障碍化的设计。更重要的是,在测试验收阶段,就要引入视力障碍测试专家对软件进行测试验收,就算我们无法在短期一两个版本内解决无障碍问题,也要把问题暴露出来在下一轮的版本规划、需求分析、交互设计的时候把它们考虑进去。

因此,经过对软件开发流程的全面审视以后,我们认为测试阶段是我们进行无障碍规范化的一个最佳的切入点。我们可以在常规的软件功能性能测试流程之外,并行的放置一个独立的信息无障碍测试流程,对于正在测试的版本起到验收的作用,对于下一个迭代版本,起到需求分析的作用。因此,今年初,我们公司和中国信息无障碍产品联盟的其他会员单位一起,通过技术和资金帮扶的方式,协助深圳信息无障碍研究会招聘建设了中国第一个全职的信息无障碍测试专业团队。这个团队的测试人员全部都由视力障碍工程师组成。

今年以来,我们已经有4个产品接入了信息无障碍测试流程,14个版本在无障碍测试团队中进行了全面测试,测试过程中测试工程师发现的无障碍缺陷全部直接提交到我们的软件缺陷管理系统中,和其他软件缺陷共同排期解决,设计和开发人员可以直接从缺陷管理系统中接受缺陷单子,评估工作量,修复解决,就不用再打黑工干私活了。并且修改的结果会重新进入开发流程进行回归测试,确保结果正确和没有带来其他的问题。

当然进行测试只是我们的第一步,距离产品的全面信息无障碍化还有很远,但是我们开始看到产品在发生一些微妙的变化,我讲一个小故事。

两周前,我们有一个产品团队的技术人员找我求救,说无障碍测试团队测试出的一个高级别的无障碍缺陷(重复焦点),目前的技术架构下暂时找不到解决方案,问我有没有办法解决,否则会造成我们的一个版本不能发布。

这是一件坏事,这同时也是一件好事。仅仅在一年前,我们还难以想象一个无障碍的缺陷能够影响到产品发布,而随着无障碍逐步向软件研发流程渗透,今天中国最大的社交产品已经会由于无障碍问题而影响了发布了。

也许再过几年,大家终有一天会都认识到,一个软件带着会影响上千万人使用的缺陷发布出去,才是更难以想象的。

再加一点点题外话。我们都知道,无障碍不能只局限在一个专业的小圈子里面做,需要唤起整个社会的关注,最好是让全社会都参与进来。今年,除了无障碍的软件开发流程之外,我们在唤起全社会对视障群体的关注上面,也做了一些有趣的探索。

我们在中国最流行的网络社交平台,微信上发起了一个Voice Donor活动,创造了一个机会让所有视力正常用户都可以贡献出自己的眼睛和声音,替盲人同胞读一段文字。

借助于微信庞大影响力和领读的名人多魅力,现在每天,全国各地的网友都在为我们项目贡献上万条声音,每天都有上千人通过这样的形式第一次亲身参与到我们无障碍事业中来。

我认为这个项目产出的最主要成果是一大批开始关心盲人的网友,但是这个成果我没办法带来,不过今天我带来了一些Voice Donor产出的CD,欢迎大家会后向我索取。

谢谢大家!

这个演讲的幻灯片和更多世界盲人联合会亚太区中期会议2014的资料可以点击这里下载

发表在 观点, 活动 | 留下评论

VoiceOver知多少?

0

作为一名有业界良心的网页重构同学,以提高网站、移动端应用的可用性为己任,于是整理出来了一份关于盲人辅助工具 VoiceOver 重构使用说明文档,以帮助重构同学能够简单轻松地为移动端信息无障碍做一些力所能及的事情。

文档大纲:
一、  VoiceOver介绍
二、  VoiceOver开启与关闭
三、  VoiceOver设置
四、  VoiceOver手势操作
五、  如何输入文本
六、  VoiceOver转子操作
七、  HTML5标签测试结果
八、  HTML5标签无障碍开发规范
九、  Role值使用规范

一、VoiceOver介绍

概念:
Voiceover功能是苹果公司在2009年4月推出的一种语音辅助程序。专门针对盲人或者是视障人士开发的智能设备上的辅助工具,用以帮助盲人或者视障人士能够轻松简单地获取到移动设备上的有效信息。

支持机型:
iPod3/4/5/6/7代、iPod touch、Iphone3/4/4s/5/5c/5s、Ipad1/2/mini、Mac。

支持语种:
目前支持29种语言,包括中文、英文、捷克语、荷兰语、法语、德语、希腊语、意大利语、日语、波兰语、葡萄牙语、西班牙语、瑞典语、土耳其语。
用户可以通过开启功能使程序朗读所有可以看到的文字,只需触摸文字即可选中使程序朗读,并通过双击进入文字的链接。

版本:
VoiceOver3,运行于OS X(为系统版本)系统上。Alex语音是Mac的语音功能。

功能:
手势支持、盲文显示器镜像、”网点”以及语音提示。此外,它还提供常用的功能,包括自动朗读网页、”全部朗读”、网页概况、网页表格支持、用户创建的标记、自定义显示信息详细程度。

VoiceOver与 OS X 紧密集成,当开发人员更新其 app 以充分利用 Apple 提供的辅助功能界面时,他们的 app 可以立即与 VoiceOver 搭配使用。

IOS盲文显示器,由于未应用到HTML5,此处了解即可。

根据腾讯云分析:移动端操作系统占比统计如图:
4e16681005ac865a7d6396de90d3f3e4

从图中可以很清楚的看到:
IOS系统目前在国内占比达到24.7%,Android系统占比73.3%。也就是说,移动设备上的H5页面被用户访问到的几率占比也几乎为24.7:73.3,同样被盲人或视障人士访问的的概率也几乎是一样的。

所以作为网页重构设计师,除了做好网页最基本的功能之外,帮助盲人朋友也能够使用智能移动设备上的HTML5页面想必也是一件很有必要很有意义的事情。

VoiceOver相对Talkback和保益悦听,会做的相对专业一些,相信在未来也会得到更多用户的亲睐,所以对VoiceOver做一些详细的介绍和测试。

>二、VoiceOver开启与关闭

如何开启和关闭VoiceOver:
1399883353_39
设置->辅助工具->VoiceOver->开启。开启后,会有语音提示“您已开启盲人辅助工具”。
关闭同开启一样步骤。
IOS系统上VoiceOver辅助工具开启方式一致。

>三、VoiceOver相关设置

1.开启关闭快捷键设置:
1399883345_5
设置->通用->辅助工具->辅助功能快捷键->选中VoicerOver,回到主屏,连按三次HOME键即可打开VoiceOver,继续连按三次即可关闭。

2.朗读速度设置:
1399883338_64

3.转子设置:
1399883330_19

网页中需要读到的内容可以通过选中或取消来设置。

4.语言设置:
1399883320_16

5.添加新语言:
QQ截图20140523132548

6.图像:
1399883246_91

7.光标(选中框)设置:
1399883232_84

四、VoiceOver手势操作

操作说明:

VoiceOver会朗读屏幕上的项目:
1.请按一次来选择项目
2.连按两次来激活所选项目
3.用三个手指轻滑来滚动

常用手势:
1399883225_23

网页如何来操作?
1.滚屏使用三指滑动,语音提示“第N页共M页”,当从下往上滑至第一页或从上往下滑至最后一页,会有语音提示“咚”,表示已到开始或结束位置;
2.使用横向向右轻滑,将焦点切换至下一项,横向左滑返回上一项。(以每个标签为单位);
3.使用竖向向上轻滑,将朗读内容移至上一个文字,竖向下滑,朗读内容移至下一个文字(以文字为单位);
4.使用双指向下滑动,依次从Html5结构从上往下自动朗读文本,使用单指滑动或者双指左右滑动,停止阅读;
5.手机横竖屏切换时,提示“竖排”或者是“横排”;
6.打开视频或音乐时,双指点击屏幕即可暂停视频或音乐;
7.三指快速点击,打开关闭语音;
8.两指旋转,打开转子。

>五、如何输入文本

当触碰到文本框时,VoiceOver会语音提示此处可编辑。
双击后,即可吊起系统默认键盘。
输入内容时,需要先选中字符,待语音提示完后,双击确认即可输入,输入完毕点击确认。

>六、VoiceOver转子操作

VoiceOver 中的 “转子” 是一种创新的虚拟控制功能。旋转转子像拨号一样在屏幕上旋转两根手指,即可按照你选择的设置改变 VoiceOver 阅读网页或文档的方式。当你打开一个页面时,你可以使用转子功能听到包括 “标题”、“链接” 和 “图像” 等内容的设置。轻拂手指选择浏览页面的方式,比如,你可以从一个标题跳到下一个标题。浏览文档也是一样的简便。转子包含 “词” 或 “字” 的设置,你可以选择转子读出文档的方式,并对书写和语法进行检查。你还可以通过不同选项自定义转子元素,包括语言。【摘自Apple官网】

两指触屏旋转,打开转子,选择性快速阅读网页内容。

1399883216_80

可以通过转子调整音量、语速,然后上下单指轻滑即可调整音量大小或语速快慢。

同理,以下内容也可以通过设置转子来设置,可进行选择性快速阅读想要阅读的内容,包括:
1399883208_62

字符、单词、每行、语速、音量、标点符号、声音、提示、手写、容器、标题、链接、表单控制、表格、列表、标志性内容、访问过的链接、为访问过的链接、按钮、文本栏、搜索框、图像、静态文本、页内连接、缩放、相同项目、垂直导航。

有了转子的辅助,阅读网页内容时目标更明确。

>七、HTML5标签测试结果
html5标签移动端无障碍测试结果

总结:

1.只有内容说明的标签为读屏软件只朗读内容文字,无其他提示;
2.部分标签连续触摸(提示音:噔噔噔噔),包括audio、embed、iframe、hr、3.input[type="week"]、input[type="time"]、input[type="month"]、.input[type="datetime-local"input[type="datetime"]、input[type="date"]
4.h1-h6朗读为内容+标题级别X(X为1-6);
5.有特殊提示文字(标识性内容)的标签主要为结构标签,header、main、aside、address;
6.input标签朗读为:placeholder+文本栏+连按两次来编辑,获焦后,文本栏+正在编辑+placeholder,失焦后,文本栏+正在编辑+value内容;
7.input[type="checkbox"]复选框+取消选中+3(总radio数)之1(第几个radio)+连按两次来切换设置,选中后提示“选中”,取消后提示“取消选中”;
8.input[type="radio"]收音机按钮+取消选中+3(总radio数)之1(第几个radio)+连按两次来切换设置,选中后提示“选中”,取消后提示“取消选中”;
9.input[type="password"] placeholder+安全+文本栏+连按两次来编辑,获焦后,文本栏+正在编辑+placeholder,失焦后,文本栏+正在编辑+value内容;
10.列表类标签dl内dt时会提示列表开头,最后一个dl时,会提示列表结尾,ul、ol只会提示最后一个li为列表结尾,table只会提示右下角最后一个td为表格结尾;
11.select内容+弹出式按钮+连按两次来激活选取项 弹出框出现后,提示选项内容1(option顺序)xie xian si(真心没听清读的啥意思),选区以及项目可调,用一个数值上下轻扫来调整至;
12.optgroup内容+弹出式按钮+连按两次来激活选取向 optgroup会和option并列读出,但optgroup不会被选中;
13.textarea内容+文本栏+连按两次来编辑,获焦后文本栏+正在编辑+内容;

其他标签可参考上测试结果查看。

>八、HTML5无障碍开发规范

1.页面主标题使用h1;
2.如果页面头部只有主标题,无需再套一层header,直接使用h1,减少html5结构层级的同时,尽快帮助盲人阅读到相应内容,避免先提示header再提示h1(增加了读屏软件读取内容的门槛);
3.页面模块级标题,根据重要程度依次使用h2~h6;
4.input标签和textarea内使用placeholder作为默认提示语;
5.需要读屏软件读到的内容不要使用display:none或者position:absolute将之移至屏幕以外;
标题(header)、主内容区(main)、补充内容(侧边栏)(aside)、地址(address)尽量使用对应标签,读屏软件可识别出为“标志性内容”供给盲人判断内容区块的重要性;
6.列表结构尽量使用ul、ol、dl结构组织内容,读屏软件可提示给用户该结构是由列表内容组成;
7.菜单型内容可使用menu将其包裹起来,虽然读屏软件目前还未识别,可为后期软件的完善做好准备;
8.导航型内容可使用nav将其包裹起来,虽然读屏软件目前还未识别,可为后期软件的完善做好准备;
9.单选按钮或复选框尽量使用原生结构而不是用模拟结构,读屏软件可以识别此功能;
select尽量使用原生结构,读屏软件可识别;
10.按钮类型的input尽量标注type=”类型”,读屏软件可识别,包括:file、button、img、submit、reset、range;
11.按钮类型的button尽量标注type=”类型”,读屏软件可识别,包括:submit、reset、button;
12.img图像需要添加title属性和值,读屏软件会读取title值+图像提示;
13.链接尽量使用a标签,不能为空,需要设置title值,如果为空,必须设置title属性;
14.表单内容可使用fieldset/legend进行包裹,读屏软件虽对form不识别,但是会识别legend内容;
15.html实际结构和视觉结构不用参考PC端为了优先而优先,读屏软件只识别触摸到的内容,和html的先后顺序没关。

>九、Role值使用规范

Landmark是WAI-ARIA规范里的一个功能,将这个属性添加到网页内相应的html元素上,就意味着给网页增加了路标功能,辅助工具(如读屏软件)就可以根据这些Landmark来找到相应的区域,从而提高网页的操作效率。

PC端的盲人辅助工具和移动端的是不是一致的呢?我们来做一个测试。

这里主要测试一下这些role值在移动设备上的IOS系统下具体的语音提示,了解了真实的语音提示,我们就可以在开发中正确合理使用role值,用以帮助盲人或视障人群能够正常使用我们开发的移动端WebApp H5应用。

Landmark相关role值:
1399883187_84

除了form和applation没有任何提示外,其他role值均有语音提示。
banner、navigation、search、main、complementary、contentinfo可以应用到相应的提示区块。

其他role值:
1399883195_23

有明确语音提示标签功能的role值有:
button、checkbox、combobox、heading、menuitem、menuitemcheckbox、menuitemradio、progressbar、radio、slider、tab。

语音只提示内容的role值有:
gridcell、group、log、menu、menubar、option、presentation、radiogroup、region、row、separator、tablist、tabpanel、timer、toolbar、tooltip、tree、treeitem。

无任何语音提示的role值有:
alert、alertdialog、listbox。

提示“噔噔噔”的role有:
grid、spinbutton。

以上为role在IOS系统内得到的语音测试结果。

移动端H5信息无障碍,其实不需要太多的专业背景和技术。
只要重构的同学有份小小的爱心,盲人或视障朋友就可以轻松自由地遨游移动互联网世界了。

如果大家有兴趣使用自己的Iphone手机或者是Ipad测试一下,扫码即可。

Role值测试页面
222222

HTML5标签无障碍体验
22222222

参考资料:

https://www.apple.com/cn/accessibility/osx/voiceover/

http://www.topcss.org/?cat=1

http://baike.baidu.com/view/2401179.htm

http://accessibilityunion.org/

http://www.css3china.com/

 

发表在 技术 | 标签为 | 留下评论

阿里信息无障碍,让盲人也能开网店

阿里巴巴对信息无障碍的推广和应用其实早已经在几年前就开始了。让盲人也可以顺利的使用他们的产品,顺利的开网店,购物,是很多阿里人的追求。

以下为2014年4月16日《钱江晚报》H0007版的报道

昨天中午午休时分,余杭淘宝城里热闹极了,18家来自全国各地的公益组织和13家阿里员工公益社区在现场搭建了展台,一场名为“JOY”大会的公益展览正在进行中。

乍一看公益展览,简直就是游戏嘉年华,每个展位前都提供小游戏,游戏胜利盖个章还能拿奖品,这样“玩”着就能宣传公益?

马云说过这样一句话,与其花5万元钱种500棵树,不如用这5万元钱花在让5万人、50万人知道砍树是不对的、知道去保护树,知道去保护我们的自然环境。我们在行动之前,必须先有意识。只有你热爱自然,才不会去破坏自然。“同样,这样低门槛、有趣的活动能最大程度让大家触碰公益、了解公益,从而唤醒大家的公益意识。”阿里巴巴社会责任部的曾飞说。

如果看不见,我还能上网吗

工程师组团,帮盲人无障碍上网

如果眼睛看不见,你还能上网吗?

以为工作人员举着蒙眼上网你敢挑战么的宣传板

一名女生正在体验蒙住双眼上网购物

在昨天的现场,有个特殊的体验环节——带上眼罩,上网买茶叶蛋。听着耳机里传来的快速的机械声“打www.……”,蒙着眼罩的记者仿佛来到了英语八级考场,完全听天书的感觉。悄悄掀开眼罩看一下屏幕,和耳边的声音一对照,汗,没有一个字是不认识的。

这么快的读音,盲人能听得懂吗?设摊的阿里无障碍改善小组组员说:“盲人的听力非常好,这样的语速,他们完全没有问题。”

很多人在体验后,写出了各种体验感受,贴在了展示墙上。码农们表示“Tab键出现太多”,而产品经理的建议写着“流程分类不够明确”。

这个阿里内部公益组织是由几个工程师自发组成的。“大概2年前,一位盲人投诉说,他没法上淘宝网买东西甚至开店。我们知道这个事情后,几个工程师自发组成小组,来做这个事情。”工程师小马说,其实无障碍读屏不是个很难的技术,只要在原有代码上多加一些东西,然后改善一下,就可以使用了。“我们这个小组平时都有其他业务,业余时间做一下,然后每周碰个头来改善一下程序。”

小马说,他不觉得这个事情是公益,“其实这是我们应该做的事情,我接触了盲人朋友,学习和他们相处,为他们未来上网做更多的事情,比如开店,比如让他们做程序测试,让他们和明眼人一样利用计算机,这个才是更应该做的事情。”

无障碍体验区

纸板搭展架,麻布做展板

公益秀的装饰都能废品回收

昨天的31个展台,虽然名称不同,但是大部分组织都和保护自然有关。

一眼望去,所有的展台都是清一色的硬纸板,展板则是用麻布做的。这些展台上的所有装饰,都可以废品回收。

工作人员还展示了一种纸张做成的直径15厘米左右的空心纸筒,“这是第六次再利用的纸筒了,专门从上海找来的,纸张重复再利用到这个地步已经是极限了,我们还在想,这一次利用完了它们,是不是还有其它可以利用的方式?”

在大自然保护协会展台前,各种动物的脚掌印印在地上,有5个脚趾的,有3个脚趾的,它们都是谁的脚印,反正记者是一个都没猜出。

亚种动物基金会的展台前,一只胸口有月牙的小黑熊正在笑嘻嘻地等人合影,“和黑熊拍照,也是变相的签名,期望停止活熊取胆。”

唛子爱心行动组的展台前,站着漂亮的美人鱼妹子。他们的主旨是通过关注钱塘江环境并在支流放流鱼苗(小鱼治水)的方式,来保护钱塘江生态。负责人挠头憨笑:“其实我们也带了一条胖头鱼,放在鱼缸里现场吃水草,可是问的人比较少;你看有个美女站台,问我们到底是做什么的人就多了。”

100多位义工报名

成立2个月的顺风车队搞大了

同样有美女站台的展位,还有阿里顺风车展位。拿着大喇叭的男士大声吆喝:“来参加阿里顺风车队吧,有美女,有车坐。”看看展台,两个打扮精致的美女站在宝马车边,俨然香车美女的范儿。短短半个小时内,就吸引了100多个义工来报名。

阿里顺风车队成立不久,发起人“圆影”师傅有张娃娃脸。今年1月22日,本报报道过圆影在各个公交车站台搭载同事去上班,《每天去公交车站“揽客”,顺上苦等公交的同事去上班》的消息通过报纸和来往传播开后,原来只放在圆影车前的牌子“阿里巴巴员工,去淘宝城免费”,开始批量生产。顺风车队成立后,200多名员工的车上都有了这块牌子。

“还有公司高管也在带同事上班呢。”圆影说,他也没有想到自己的一个举动有这么多同事认同,想当初自己还被当成过黑车司机呢。

“我们未来会统计一下,哪些车站最能搭载到同事。”圆影说,“我们期望未来车里都能搭载满员,这样才会更环保吧。”

发表在 活动 | 留下评论

聊聊信息无障碍测试工程师的标准

运营腾讯无障碍用户测试群已经半年,最近深圳市信息无障碍研究会也在招聘全职和soho的盲人测试人员,对于信息无障碍测试工程师(人员),我个人认为应该有几个方面注意:

1.主观意识太强的人不适合,虽说无障碍是一种非机械的code校验,而是体验的测试,但是我们仍需要客观的反映出产品的缺陷

2.倾向给与方案的人不适合,除非他是无障碍领域的专业人士(最低标准也得是了解W3C的相关规范并且有实际的案例并且一定要对测试的产品有深入的了解)

欢迎大家讨论

发表在 技术 | 留下评论

网站内容无障碍指南2.0 / Web Content Accessibility Guidelines (WCAG) 2.0 中文版

指南地址:http://accessibilityunion.org/WCAG20/

只翻译了WCAG 2.0中最核心的内容,采用中英文对照。

该指南与之前北京联合大学的李先生翻译有所不同,大家可以对照着看。由于笔者水平有限,如有翻译不妥支出,请大家及时指出。

网站内容无障碍指南2.0包含一个广泛的、使网站内容更易于访问的建议。遵循这些指南可以让网站内容对于广泛的残障人士同样拥有可访问性,包括全盲和低视力、失聪和听力衰退、学习障碍、精神局限、行动受限、语言障碍、光敏性以及多重残障。遵循这些指南也会让你的网站内容对正常用户更加容易使用。

WCAG2.0成功标准是不做技术限定的可测试说明。指南提供了单独的文档来说明满足成功标准的特定技术以及对成功标准解释的信息。访问网站无障碍指南概况 / Web Content Accessibility Guidelines (WCAG) Overview查看介绍和WCAG技术以及培训资料的链接。

WCAG2.0继承了W3C在1999年三月发布的推荐标准网站内容无障碍指南1.0 / Web Content Accessibility Guidelines 1.0[WCAG10]。虽然网站内容可能符合WCAG1.0或WCAG2.0,或者两者都符合,但是W3C建议新创建的以及升级的内容要使用WCAG2.0。W3C也建议网站无障碍政策应以WCAG2.0为参考。

目录

发表在 技术 | 留下评论

W3C发布可访问富互联网应用(WAI-ARIA 1.0)的正式推荐标准

2014年3月20日,W3C的协议与格式工作组(Protocols and Formats Working Group / PFWG)发布了可访问富互联网应用(Accessible Rich Internet Applications / WAI-ARIA)1.0版WAI-ARIA 1.0用户代理实现指南(WAI-ARIA 1.0 User Agent Implementation Guide)的W3C的正式推荐标准(W3C Recommendation)。

WAI-ARIA是一个为残疾人士等提供无障碍访问动态、可交互Web内容的技术规范。在WAI-ARIA概述中对WAI-ARIA及其他支持文档进行了介绍。

W3C董事兼创始人Tim Berners-Lee 评论说,“ARIA可以被广泛的用于增强很多不同技术的可访问性上。目前,HTML5已经开始使用ARIA,并且W3C发布的很多其他标准也开始使用ARIA。今日的Web是动态且交互的,所以对于向无障碍软件描述一个Web页面不同部分的功能是至关重要的,这样残障人士就可以有效的获取信息了” 。

WAI-ARIA填补了开放万维网平台所具有的诸多先进性能与实现其可访问性需求之间的空白。Web开发者创建了越来越多的用户界面控件,这些控件允许用户获取新的页面内容,而不必请求一个完整的页面刷新。当用户在页面上使用例如扩展菜单以及拖拽功能等交互特性时,WAI-ARIA支持浏览器和辅助软件之间的互操作性,这就为符合网站与应用的可访问性相关的国际标准“万维网内容无障碍性指南”(Web Content Accessibility Guidelines,简称WCAG)2.0提供了关键性支撑。

 

跨平台与跨设备可访问性解决方案

IBM主管新兴软件技术的副总裁Rod Smith先生说道,“今年我们庆祝万维网诞生25周年,在这25年的发展当中,Web延伸到越多越多的智能设备,比如智能手机和汽车,保证应用在这些移动智能设备上的可用性和可访问性,是至关重要的。当IBM把这项技术引进到W3C的时候,我们的目标就是打造一个更具包容性的富Web。WAI-ARIA通过跨设备的普世解决方案,降低残障人士访问Web信息的门槛,开创了此方面技术的先河” 。

WAI-ARIA把台式机应用的无障碍特性带到了万维网上。在台式电脑上,使用特别辅助软件的人们需要通过正针对特定操作系统的无障碍应用程序接口实现对其电脑的操作。WAI-ARIA使得同一类型的信息可以直接使用在Web应用上。

W3C同时也发布了WAI-ARIA 1.0用户代理实施指南(User Agent Implementation Guide),这份指南指导广大开发者在不同平台上实现无障碍支持特性,展示了浏览器,媒体播放器和移动应用程序如何可以从这些特性中受益。使用WAI-ARIA的内容开发者可以更容易的在不同平台上使用相同的Web内容,且不用担心丢失对无障碍性的支持。

实施进展

在W3C标准开发流程中的实施测试这项标准已经在主流浏览器中得到广泛实施。更多详情请见实施报告

W3C协议与格式工作组(Protocols and Formats Working Group)主席 Janina Sajka 说道,“在ARIA进入标准开发环节中的备选推荐标准阶段,我们已经看到了ARIA标准在很多浏览器、媒体播放器以及移动设备端得到了很好的实施。现在这项标准已经正式发布,我们期待AIRA能够在更广泛的范围内被采用。AIRA为Web开发者提供了了一项适合为移动Web应用增加无障碍特支持的叠加技术,对改善旧有Web内容的无障碍性也是一种有益的补救” 。

W3C为什么致力于此项工作 

二十年前,万维网发明人Tim Berners-Lee创立了万维网联盟(World Wide Web Consortium,简称W3C),将其作为一个论坛来聚合开放技术的力量,进行开放标准的开发,以保证万维网长期良性的发展。W3C在Web标准开发工作中秉承中立原则,并坚持维护其免费许可的专利政策。W3C的Web标准开发工作是开放并透明的。并且,W3C标准皆为免费标准,这就极大的推动了这些标准在行业内的快速和广泛应用。W3C和业界一起在开放万维网平台上重构万维网,使其适应移动、支付、电视、出版以及交通等多种行业服务交付以及伏应用的需求。

更多信息,请参阅:

W3C发布WAI-ARIA 1.0的新闻稿(Press Release)(中文)

W3C的官方博客 W3C Blog: WAI-ARIA扩展Web可访问性

W3C的Web信息无障碍标准计划(Web Accessibility Initiative, WAI)

查看W3C的所有正式W3C推荐标准(W3C Recommendations),请参阅W3C正式推荐标准列表。欢迎志愿者参与W3C标准翻译计划,提供W3C标准规范的志愿者翻译和W3C授权翻译

发表在 技术 | 留下评论

“跳过导航”链接

译者注:文章的英文原名为”Skip Navigation” Links,来自WebAIM。WebAIM组织为网站信息无障碍提供了全面的解决方案。所谓网站信息无障碍指任何人(无论是健全人还是残疾人,无论是年轻人还是老年人)在任何情况下都能平等的、方便地、无障碍地从网站上获取信息、利用信息。最近在学习无障碍相关标准与技术,本文主要探讨如何在页面上设置一个“跳过导航”链接以方便视障人群来使用网站功能。

英文原文:http://webaim.org/techniques/skipnav/

译文原文:http://tid.tenpay.com/?p=4203

一、概况

在许多模板设计中都存在一个问题:页面的主要内容并不在页面的最开始的位置。使用屏幕阅读器的用户常常要听完一长串导航链接、次导航链接、网站logo、网站搜索框和其他元素后,才能到达主要内容区域。事实上,键盘使用者为了要到达主内容区域,必须tab过所有的顶部导航链接。如下图,由于页面布局,导航链接分布在顶部和左侧,用户需要跳过118个链接才能到达内容区。

grocery_site

二、创建“跳过导航“链接

很简单:在页面顶部提供一个可以使用户可以直接跳到主要内容的链接。在大多数情况下,它确实很容易,有不只一种方法来实现。一些方法也优于其他。这里要讨论的方法如下:

  1. 在页面顶部提供可见的链接
  2. 在页面其他地方提供可见的链接
  3. 使链接隐藏
  4. 先隐藏链接,直至它获得键盘焦后再显示
(1)在页面顶部提供可见的链接

创建一个跳过导航链接最简单的方法就是把它放在页面顶部,把响应锚点放到主内容区域开始的位置。

usu

链接在左边、右边还是中间的位置不重要,最重要的是要确保这个链接是屏幕阅读器使用者进入页面后最先听到的内容,同时也是键盘最先tab到的内容。否则,用户可能完全没有意识到还有一个“跳过导航”链接,然后浪费时间在跳过那些无关的链接。屏幕阅读器使用者很容易对此感到不耐烦。

<body>
<a href=”#maincontent”>跳过导航</a>
<h1><a name=”maincontent”id=”maincontent”></a>标题</h1>
<p>第一段</p>
</body>

总结:这种方法是非常有效可行的。

(2)在页面其他位置放置可见的链接

一些开发者认为这样放置跳过导航链接会不美观,破坏了页面布局。所以把链接移到其他不那么影响页面整体布局的地方。下面这个例子中,开发者就把链接移到了页面左下角的位置。

transit

这样不会显得那么突兀。但是带来了一个问题:它不再是这个页面的第一个链接。屏幕阅读器使用者不能首先听到这个链接,键盘使用者也不能第一个tab到它。虽然可以通过设置链接的tabindex属性来解决,但是假使阅读器使用者并没有使用TAB键来听网页呢?

总结:这种方法并不是对所有用户都适合。

(3)不可见的链接

一些开发者决定隐藏这个链接。最常用的方法就是在页面顶部放一个透明的图片,并设置它的alt属性为“跳过导航”。

usa_jobs

这解决了在布局的美观性上的问题。这对阅读器使用者也是完美的解决方案。然而,那些视力正常的键盘使用者看不到这个链接。当他们tab到这个链接的时候,他们不知道有一个链接在那,除非他们看到了浏览器底部的状态栏地址。

另一个类似的方法是使用CSS隐藏链接。这个方法比隐藏图片的方法更好,但是CSS会引起另一个问题:可能阅读器使用者也读不到这个链接了。更多信息查看“CSS in Action: Invisible Content Just for Screen Reader Users”。

总结:这种方法并不是对所有用户都适合。

(4)获焦后链接可见

另一种在美观和可访问性两者之间平衡的方法:当链接被tab时才显示。使用鼠标的人看不见这个链接。不需要“跳过导航”链接的用户完全意识不到这个链接。

webaim_tabs

tabs_skipnav

现在这个链接是可见的了。它是页面的第一个链接,所以屏幕阅读器会首先读到这个链接。这看起来是几乎完美的解决方案了。唯一的缺陷就是键盘使用者要tab到它的时候才能看见。突然的出现可能会有一点令人疑惑。但是,链接突然出现会吸引用户的注意,这样可以增加用户点击它的可能性。在非官方的观察统计下,用户对这种方法反应良好。

CSS写法:

#skip a , #skip a:hover , #skip a:visited{position:relative; left:0;top:-500px;width:1px;height:1px;overflow:hidden;}

#skip a:active , #skip a:focus{position:static; width:auto; height:auto;}

HTML结构:

<div id=”skip”><a href=”#content”>skip to man content</a></div>

三、哪种文字描述比较好呢?

有不只一种好的方式来描述这个链接 。以下是比较常用的几种:

  1. 跳过导航
  2. 跳过主要导航
  3. 跳过导航链接
  4. 跳到主内容区
  5. 跳到内容区

以上任何一种都很好。

四、浏览器怪癖

Windows的IE号称是最棘手的浏览器了。在一些页面中,“跳过导航”链接如预期的一样起作用,但是在一些情况中,视线的焦点是改变了,但是输入焦点并没有。换句话说,当用户激活了跳过导航链接,焦点移到正确的位置,但是当用户再次TAB的时候,焦点重新回到了初始的位置。当这种情况发生时,跳过导航的链接就完全没有意义了。

是什么引起了IE下这个bug呢?事实证明,IE需要锚点在一个定义了宽度的元素内。宽度可以是绝对的(如600px),也可以是相对的(如100%等),但是宽度必须被定义。这个宽度可以定义给一个div,一个表格单元,span标签或者其他元素。

有时在一个特殊的设计里,找到一个可用的宽度单位是很不方便的。但是让“跳过导航”链接起作用是很必要的。事实上,所有页面上的每一个锚点都必须在一个定义了宽度的元素里,并不只是跳过导航链接的锚点。

五、“跳过导航”的替代方法

事实上,“跳过导航”是一个非常笨拙的方法。他将一直有效,直到有一种划分导航和主要内容的更标准化的方法出现。然后,还有不止一种方法来达到跳过导航的效果。

(1)按标题导航

最有效的办法就是创建有合适标题的文档结构,这样用户就能在标题之间跳转。大部分屏幕阅读器都允许用户只听标题,跳过段落、图片、链接和其他多余的信息。如果文档结构合理,通常可以形成一个标题大纲,这样不仅可以跳过导航,还能让屏幕阅读器使用者浏览整个页面的信息而不用阅读所有的文字。

这个方法的一个缺点就是,只有屏幕阅读器的用户可以使用这个功能。浏览器并不具备这个功能。这意味着视力正常的键盘用户不能像屏幕阅读器的用户那样跳过一个个链接。

总结:这个方法对屏幕阅读器的用户是非常有效的。

(2)替换阅读顺序

一些开发者使主要内容作为读屏的开始,把导航放到最后。 这种方法显得“跳过导航”链接就没必要了,但是它带来了另一个问题。是不是提供一个“跳到导航”链接呢?这是个非常严峻的问题。习惯了跳过导航的用户可能一不注意就会点去他们本想跳过的导航部分。这会使用户感到困惑。有或者没有“跳到导航”链接,都可能会使想要去导航的用户迷失,想知道这个页面到底有没有导航。

总结:这个想法是好的。但是现阶段把“跳过导航”链接放在页面顶部的约定决定了开发人员也必须这么做,确保用户不会在你的页面感到困惑。

发表在 技术 | 一条评论

世界盲人联会亚太区中期会议2014

世界盲人联会亚太区中期会议2014由香港失明人协进会主办于2014年11月21至24日在香港数码港道100号数码港3座举行。本次会议的主题是“切实享有权利:第三个亚太区残疾人士十年(2013-2022)”请到官网进行报名:http://wbuapga2014.hkbu.org.hk/b5_news.php

在此欢迎各界关注残障事业的人士参加,大会官方语言为英语,并会于各全体大会中以广东话及普通话作实时传译。

已知的演讲嘉宾为:

  • 万维网联盟 – 无障碍网页专案总监Judy BREWER女士
  • 「黑暗中对话」创办人Andreas HEINECKE先生
  • 联合国亚洲及太平洋经济社会委员会社会发展司司长Nanda KRAIRIKSH女士
  • 「 凸字无国界 」及「Kanthari」创办人及总监Sabriye TENBERKEN女士

届时中国信息无障碍产品联盟将会将会议热点与嘉宾的观点与您一起分享!

相关组织介绍:

世界盲人联会是一个国际组织,拥有190个成员国,代表2.85亿盲人和弱视者。联会凝聚了各国主要的视障人士自助团体及为视障人士提供服务的机构;作为联会机构,世界盲人联会经常就有关失明与视障的议题与各国政府及国际机构对话。

世界盲人联会辖下共有六个分区,每区均有理事会,关注区内会员国的需要。世界盲人联会亚太区便是其中一个分区,有二十个成员国家及两个成员地区的视障人士自助组织和视障人士服务机构。世界盲人联会亚太区每两年开会一次,分别于每四年一次的世界盲人联会大会中举行以及其后两年于亚太区一个主办地方举行中期会议。

世界盲人联会亚太区中期会议2014将提供机会了解区内失明人士面对的问题并探讨解决方法。会议将讨论教育机会、信息通达、就业及社会企业。另外,会议期间将展出最新的视障人士辅助仪器。

香港失明人协进会成立于1964年,是香港首个由视障人士组织及管理之自助团体,致力发挥视障人士的自助及互助精神,宗旨是实现视障人士的平等、机会和独立。

数码港由香港特别行政区政府全资拥有,并由香港数码港管理有限公司负责管理。基本建设包括四座甲级智能型写字楼、一幢五星级酒店、零售及娱乐中心和优质住宅部分,为约百家信息科技公司及过万的专业人才,缔造一个富启发性及促进创意交流的优良环境。

发表在 活动 | 评论关闭

提高足球比赛视频可访问性

我正在看亚洲杯G组第三轮广州恒大与全北现代的比赛。

cctv直播广州恒大与全北现代的比赛现场

其实最开始截图的时候,仅仅是想单纯的说说电视上的问题,但是我发现cntv的直播视频又多了一个可访问性问题。

请看右上角的“CNTV”的LOGO,除了右上角的位置,其他三个角,真的,你都可以去放你的LOGO。这个LOGO,既让我看不清楚LOGO,也让我看不清楚比赛的信息(虽然比赛信息很少)

另外,单单看这个截图,或者这段时间解说员没有明确的指向,或者你看的仅仅是一个集锦,那么你知道谁是恒大?谁是全北么?(红色上衣,白色短裤的是恒大;绿色上衣,黑色短裤的是全北)那么这个信息是否应该在屏幕上进行一个显示呢?

我们经常说,用文本替代访问做图片的backup,但是对于足球比赛(或者其他比赛),把这个队伍的队徽(队标)显示在屏幕上的时候,大多数的观众也会根据球衣的特写(特别是国外球队),通过队标和球衣分辨出队伍。

在进球的时候,字幕最起码的要给到进球队员的名称以及他所属的队伍(一般重要赛事的实时字幕是比较到位的)。

还有,其实每一次我都比较纠结,每次开场说首发的阵容的时候都特别的快,眼睛根本看不完,大多数情况下,其实解说员也是在首发名单消失之后再继续说一阵才能说完。

关于体育赛事的实况,NBA做的比其他运动要到位的多。

 

发表在 观点 | 留下评论

提供客户端的校验和警告

虽然ajax已经普及,但仍然有一些政府网站和非IT类网站会有这样的机制——对用户的表单输入的校验程序由服务端进行,这对用户来说是一个很糟糕的体验,对于记忆力衰退以及盲人和性情偏狂躁的人来说,这种模式显得难以使用。在客户端进行脚本控制可以有效的解决此类人群的困难。

一旦发现错误,警告框将有相应的文本描述。当用户关闭对话框,我们利用脚本将焦点移动到相应的出错的文本域。

Exa


<label for="date">Date:</label>
<input type="text" name="date" id="date" 
onchange="if(isNaN(Date.parse(this.value))) 
alert('输入不符合格式,请重新输入');" />

另外,为用户提供一个标准的数据格式提供参考是个很好的方法,这样会增加用户输入的成功率。特别是对网络经验尚浅的人群。

在网页的文本域中输入不符合格式的数据,并且检验是否有相应的提示以及焦点管理。然后记录测试结果。

发表在 技术 | 留下评论