关于网站无障碍测试——第七届webrebuild北京站分享

郑重声明:本人的观点和言论只代表本人,不代表所在公司的观点。很多网站的信息无障碍还不如12306.cn,借铁道部网站只是当时客观条件所致,仅仅用于学习交流,没有任何贬义。

分享时间:2013年11月9日 第七届webrebuild年会北京站 地点:希格玛大厦B1小礼堂

相关扩展阅读已标注在讲稿相应的位置。

以下是争渡读屏杨永全老师对一些问题做出的更加全面的解释,对理解视频和讲稿中的内容起到了很大的帮助作用。

“关于光标键访问到表单元素会读出name或者id的问题,这个是当表单元素没有label关联的时候会去主动获取他的name或者id,这样至少能大概知道是个什么类型的表单元素。
关于iframe的访问,光标默认是不进入iframe内部的,这涉及到光标键访问的一种处理方式,对于html元素是否自动进入他的内部,如果自动进入就能直接读出里面的内容或者光标继续访问 里面的元素。对于iframe默认不进入,需要通过tab导航进入内部或者用字母m进入内部。
关于光标访问table的问题,争渡读屏是个缺陷,因为没有针对table做具体的优化处理。nvda会有专门的一组快捷键访问table。
对于表单元素的访问,还有一种快捷的按元素访问,比如字母e到编辑框,x到复选框。”

原定讲稿:(与现场有细微差别,不过不影响了解无障碍的相关内容)

谢谢主持人!

为了这次分享,算上这个ppt,前后做了三版。第一个版本介绍了自动工具测试和读屏软件测试方法。(《开发和测试访问无障碍的Web应用》、《轻松检查网页无障碍》)第二个版本介绍的是做无障碍测试时候需要校验的15个方面。但是呢,自己都不满意。我想单纯的介绍知识点,还不如还原一下我在实际给网站做无障碍测试的过程中发现的无障碍问题以及如何做的优化,这样大家更容易效仿。在这个场合中,如果用我们腾讯自己的产品做案例,显得有些自己给自己揭短,如果用其他的公司的产品,还害怕被大家转到微博或者微信上,从而引发不可控制的状况。我想了半天,终于让我想到了一个网站,就是铁道部的订票网站,12306.cn。不过我还是想强调一下,借用这个网站主要是为了探讨无障碍测试,没有任何贬低的意思。

在做正式的分享之前,首先简单做一下自我介绍,2012年6月26日,腾讯信息无障碍产品同盟会建立,以此来推进腾讯产品的无障碍化,我作为腾讯网无障碍的负责人加入这个联盟和其他产品线的负责人一起推动这项事业的发展。同时,我也是中国信息无障碍产品联盟的作者和管理员。大家可能觉得这个联盟名字好像很山寨,其实这个联盟还是比较有背景的。

经过近一年的紧张筹备,就在后天11号下午三年,深圳的五洲宾馆长江厅,将会召开中国信息无障碍产品联盟成立仪式暨新闻发布会。联盟是在W3C和工业和信息化部电信研究院的支持下,IBM大中华区无障碍中心作为咨询机构,由深圳市信息无障碍研究会、腾讯、微软中国、阿里巴巴集团、百度共同发起的机构。欢迎大家到现场去参加这个仪式。

在开始还原我的测试之前,先普及一些网站无障碍的基础知识。网站无障碍的意思是,每一个人都可以访问网站,无论他们是什么样的硬件、软件、语言、文化、地域、物理或是精神能力。从定义的角度来看,无障碍是一个通用的设计,而不是单单的针对某一个或者某几个群体。他是一个通用的设计。

无障碍可以帮你扩大网站的受众范围,因为他们的目的就是让你的网站可以被所有人使用。另外他在很多国家也是法律规定的。关于信息无障碍最有名的一个法律案件是一个澳大利亚的盲人用户成功的起诉了2000年悉尼奥运会的组织者,起诉他没能创建一个可以访问的网站而且拒绝修改从而使他和其他盲人用户无法访问这个网站。

澳大利亚人权与平等机会委员会说:“悉尼奥运会组委会从来没有认真的考虑过这个问题,只有当听证会迫在眉睫的时候才做了尝试,以支持其拒绝投诉人的投诉,这既不足,也无法令人信服。”最终悉尼奥运会组委会被勒令支付20000澳元(约合11.8万元人民币)给这位盲人用户。

如果你所在的公司有幸接到这种国际性网站订单,而你恰恰负责这个项目,那么我建议你最好要做好这方面的知识储备并且告知你的领导,否则也许公司会在支付赔偿之后将你辞退。

无障碍也是一项基本的人权,在联合国的残疾人权利公约第九条中有详细的阐述。更多的关于无障碍的意义可以访问下面这个网址。

在各种用户中,网站对于盲人的障碍是最大的,所以我们当前的工作是尽快的针对盲人用户为网站做出无障碍的优化,我还要再次强调一下,无障碍是一个通用设计,只是因为盲人的障碍最大,所以我们当前的无障碍优化是以盲人为主。所以呢今天所分享的测试,也是以盲人为主。我国有1700万的视障用户,其中全盲人士为600万。下面我们通过一个视频来了解盲人是如何上网的,请大家注意看字幕,同时保持安静,想想盲人用户在操作上有什么特点?(《视障人士如何使用电脑上微博》)

现在我来讲讲盲人是如何上网的。

首先呢,盲人不使用鼠标来操作,因为鼠标是单纯依靠视觉的。

其次,盲人使用屏幕阅读软件来听网页。

盲人在第一次访问一个页面的时候,会从头到尾仔细听一遍,从而知道整个网页有什么内容。盲人通过两个按键来遍历页面上的各个元素。使用tab键可以切换可聚焦元素,而光标键可以切换所有元素。

无论使用tab键还是光标键,实际移动的是网页上的焦点。比如焦点现在移动到了一个h1上,读屏软件会去查看这个h1背后的代码,然后将标签本身带有的信息和内容集合到一起产生一个语音,就像这上面的三个例子。这里有一点需要强调,屏幕阅读软件阅读的是渲染之后的代码,也就是说他支持js产生的DOM。另外每个读屏软件在合成标签信息与内容的时候会稍有不同。

好了,无障碍基础的时候就介绍到这,下面开始还原我的测试过程。测试需要三个条件:键盘、外放设备以及读屏软件。在windows平台下推荐大家使用争渡读屏、在Mac下推荐大家使用voiceover。(模拟测试,《国际盲人节.腾讯深圳站》

页面载入之后,第一时间读出了页面的title。如果你不标明页面的title,那么盲人是无法在第一时间知道当前访问的页面是不是目标页面。每一个网站的功能都有很多,所以每一次测试,你要有一个主要任务,而我这次的任务是测试购票的流程。

我开始按光标键准备将焦点移动到“购票/预约”的链接上。当我按了43下光标键之后,终于听到了“购票图形链接”。从阅读当中我分析,这个应该是一个带有alt=购票的img,img外边由a标签包含。所以他才叫做投票图形链接。在43次的过程中,我听到了很多图形链接的提示,这一定是因为img没有设置alt而导致的。这是一个比较严重的问题。而43次的按键才到了这个最关键的功能,我认为他严重的影响了盲人用户的效率。这种情况,我会将这个链接增加一个accesskey=2的属性,然后在body的第一个元素之前,添加一段文本,这个文本的提示是:按alt+2可以快速切换到购票链接。这样用户一进来,就可以听到这个提示,从而一下到达订票的链接。

点回车之后,到达了用户登录页面,但是读屏软件却告诉我这个页面的title是“铁路客户服务中心 客运服务”。我要不是亲眼看到这个页面是用户登录页面,我还以为是我访问错误了呢。所以这个页面的title是不合格的,可以修改为“用户登录 铁路客户服务中心”。从这我们也可以看出title的重要性。

当读完客户信箱之后,我再按一下光标键,直接到了下面的版权区域。中间最重要的部分被跳过了。我想应该是iframe造成的 。查看代码,果然,中间的部分是iframe。不过好在iframe使用Tab键可以访问到,但是作为一个普通用户,他不了解什么是iframe,他只能在光标键和tab键之前来回切换来碰运气,看看能否访问到全部的内容。但是我发现我还是无法访问中间的这个表单,我怀疑他的里面又嵌入了一个iframe。在这呢,我也建议大家,尽量避免使用iframe,他不但给可访问性增加障碍,同时对SEO也很糟糕。

没有办法,我只能暂时使用下鼠标,把焦点移动在登录名的位置,然后我在按一下光标键,听听对登录名的文本域是怎么样阅读的是否有辨识性。结果他读作:“loginuse.username可编辑文本”。显然对于这个input的name属性,他设置的并不合适,因为我们的母语是汉语。对密码和验证码的设置也有同样的问题。不过还好,这几个表单通过Tab还是可以辨识的。但是用户并不希望总尝试更换按键来碰运气。说道验证码,我想很多人不知道盲人是如何填写验证码的,因为验证码虽然是图形,但是我们不能给这个图片设置alt属性。现在有几种方式可以帮助盲人解决验证码问题,有语音替代方案,有把验证码发送给手机的方案,还有我们腾讯的白名单方案,以及使用争渡读图,将页面截图发给志愿者,再由志愿者把验证码内容发回给盲人。这些志愿者中,排名第一的已经为盲人解决验证码问题搞到9万次,如果有人也想为盲人做一些贡献,请会后联系我。

登录进去,进入我的12306界面,还是title不合理,中间用iframe的问题。另外还有一个问题,大家知道按光标键一个一个的元素去切换,这个顺序取决于各个元素所在的代码位置。从我的角度看,中间的系统信息的DOM顺序应该在左侧的个人导航之前。如果你是做门户网站,或者是比较复杂的界面,一定要注意这一点。还有左边这三个小红圈,每次读这个位置的是都要读成 图形链接,因为他把这个本应是css写的东西用了img。这是需要注意的一个问题,什么地方用img什么地方用背景,要注意。回车点击车票预定。

依然是title不合理,中间iframe导致光标键访问不到。按tab或者光标键,虽然在输入地名以及日期的时候,在出现的下来列表上可以利用上下键来调整地名和月份日期,但是没有任何的提示,以日期为例,无论怎么样选择都只是读20131107。所以大家在做交互的时候请一定考虑对焦点的管理,你移动的不只是样式,也要移动焦点到指定的位置,这样读屏软件才可以读出。对于各种控件的交互和无障碍实施方案,可以参考W3C相关的文档。对于出发时间的位置读屏软件仅仅会读12001800这种纯数字,对于这种内容,在代码的层面要标识完整的信息。

出现车次结果,依次阅读,先读了很多 行xing标头,这是因为这里存在一行空的单元格。然后开始表头信息,然后再一行一行的读信息,不过这些信息没有和表头关联起来,所以我们只能听到1713北京0447沈阳北14511004,然后按五次没有任何反馈,因为这种符号,被读屏软件给屏蔽了。在这一点上,属于读屏软件的不完善,但是就算完善的话,你有想指望读成什么呢?难道是中划线中划线中划线中划线中划线中划线?接着继续读13有,接着有空一下,然后是有有,再空一下到了预定按钮。对于表格,屏幕阅读软件对于hearders和axis支持的还不够好,所以暂时可为各个信息添加带有title的span,然后再title中赋予对应表头的名称。

回车点击预定之后,到达填写乘车人界面,有很多问题是之前出现的。新问题是,回车点击提交订单,弹出浮层。这时候我们要思考一个问题,按光标键或者Tab键的话,焦点应该焦点到什么位置?是不是应该聚焦到这个复层的提交订单确认的文本处?这样盲人用户才能完成后面的流程。这里提示大家,当弹出复层的时候,要使用脚本将焦点移动到复层的标题位置,这样会立即可盲人用户一个反馈。12306的问题就在于你按下tab键,只能在取消和确认之间切换,而无法使用上下键阅读确认的信息。最后要说明的一点,如果回车点击取消,焦点应该回刚才的提交订单按钮的位置,这样盲人用户才能回到原来的流程上。大家在开发交互效果的时候,一定要注意这一点,焦点从哪来,到哪去。

至此,我还原了我的测试过程。希望对大家有所帮助。

大家可能觉得12306在无障碍方面做的很差,其实绝大多数的网站在无障碍方面和12306基本一样,对于盲人都是很难访问的。昨天去参加W3C的web信息无障碍研讨会,和W3Cweb无障碍的负责人judy以及工信部和残疾人协会还有IBM的同事聊到无障碍的重要性。会上再次明确W3C的4个技术领域,分别是:交互技术领域、普通web领域、技术和社会领域以及web信息无障碍计划。由此可以看出信息无障碍现在的重要性。

最后提醒大家一点,无论开发人员如何测试,也无法代替真实用户的测试。在今年的9月中旬,我组建了腾讯无障碍用户测试群,里面多以盲人为主,以帮助我们的产品在没有上线之前做相关的测试,我们刚刚为一个重量级产品做了第八个版本的测试,得到了比较好的结果。

右边的三个网址推荐给大家,可以在这上面学习到无障碍的相关知识。谢谢大家!

QA环节补充资料:iPhone本身以及读屏软件voiceover我国政府正在开展政府网站信息无障碍化

关于 rockywen

平等、美好、安逸、自由 Accessibility Strategist 你已经努力的创造了一个伟大的应用,不要错过这个让他能服务更多用户的机会。还有,这是一件对的事情。
此条目发表在 活动 分类目录。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注