借12306订票页面,聊无障碍用户体验

以下为个人观点,不代表本人所在公司及团体的观点。

作为“不可替代”的www.12306.cn,它为我们带来了太多太多的障碍,从最开始的难以访问到后来的难以支付,现在的12306算是可以正常使用了。想起最开始需要大家一起帮忙刷票到后来的各种浏览器的抢票功能。现在很是欣慰。作为一个正常用户的我们似乎已经满足了。但是对于盲人来讲,事情还远远没有解决。

之前在《如何做盲人认可的无障碍互联网产品》http://www.huxiu.com/article/17196/1.html中提到了盲人是如何访问网页以及他们的使用习惯,这里就不在赘述了。

对于这样一个网站,基本上无法通过邮件或者什么渠道来反馈给网站的开发者从而带来本质的变化。那么难道就没有任何办法可以帮助这样一个群体了么?在相当长的一段时间里,我对这样类似的问题感到困惑与失落。

不过,聪明人与实践者总是有的,在逛http://userscripts.org的时候无意中发现了这样一个插件“page-access-helper(网页无障碍助手)”:  http://userscripts.org/scripts/show/175103

他利用火狐插件greaseMonkey进行扩展,解决了12306的注册、购票、退票这三个最关键的功能。可以说是以一个“微创手术”解决了一个“重大疾病”。

剖析这个工具的开发思路对于解决网站信息无障碍问题的经验积累有着很大的作用!

1.辨别主要功能

一个网站,无论制作、开发者是不是自己,如果他已经上线运营,并且无法从头开始重新制作开发,那么只能以局部升级的办法来解决无障碍的问题。无障碍问题的修复与功能开发类似,必须制定优先级,优先解决用户最重要的问题。以12306为例,注册、购票、退票显然是一个必须解决并且要按顺序解决的三大主要功能,这三个功能达到无障碍的话,可以解决绝大多数盲人用户的问题。

2.优化关键路径

A.越过“不重要功能”

如果一个屏幕阅读器用户要找到购票/预约的链接,通常需要按20余次的Tab键才能到达,如果不小心错过或者焦点在其他位置,则需要按Tab键逐个遍历,对于这样一个重要的以时间为第一目标(预定车票的时候拼的就是时间)的功能。

显然这样的一个链接使得屏幕阅读器用户“输在了起跑线上”。

安装网页无障碍助手之后,该插件主要链接添加了一个快捷键,无论当前焦点在哪里,只要alt+shift+z即可找到注册、购票、退票链接。

对于这个快捷键,我个人还是比较喜欢的,一个手就能完成了,而且跟QQ的显示消息窗口快捷键类似,方便记忆。

B.焦点陷阱

焦点陷阱,顾名思义就是当焦点访问某个控件的时候可能产生三种现象:1.不反馈(无法访问);2.焦点丢失(一般会回到页面头部);3.无法跳出当前控件。本质都是控件存在访问性障碍从而造成整个用户活动流程失败。

对于明眼人,我认为这是一个好的交互态。而对于盲人来说,无论何种交互,能聚焦的交互才是好交互,能访问到的内容才是好内容。遗憾的是,这里一旦利用Tab键进入出生日期选项,就一直循环再也出不来了。在车票查询页面里的出发日期和触发时间同样的使用了类似控件,导致无法访问后续流程的控件。

对于这种控件,网页无障碍助手采用了朴实有效且成本低的做法——使用标准表单控件(input、select、textarea…)。并且还优化了一些文案,以更友好的“凌晨0点到24点”取代“00:00-24:00”。

C.表单错误提示问题

表单作为用户和服务器的唯一接口,由于网速的飞速发展早已经从服务器端作为第一环节验证转成了前端js作为第一环节验证,从而加速了验证速度也优化了用户体验。对于盲人用户,每一条错误提示信息能否即使的反馈是影响操作效率乃至能否顺利提交的关键。12306原始的表单错误提示读取繁琐,大大影响表单提交效率。

网页无障碍助手利用焦点顺序的管理使得输入错误即使提醒。

D.重要信息必须键盘可访问

很遗憾,作为最重要的搜索结果信息,键盘无法访问,屏幕阅读器用户一片茫然。对于不可聚焦元素,无外乎增加tabindex以及javascript管理焦点,希望广大网站制作开发者以“举手之劳”添加这关键的功能。用技术为盲人群体带来一丝光明。

网页无障碍助手对这个页面同样做了处理,对于搜索结果,做了处理,可以tab选中各次列车,读出发站及时间,到站及时间,当前还有的坐席类别,以及回车即可预定!

同样的问题也出现在了提交订单确认的弹出框以及确认订单的页面。

弹出信息确认框,只能聚焦到取消、确认按钮,订票信息不可读。

因为iframe的缘故焦点无法切换到红色区域块。在使用某项技术的时候,我们可以先去测试看看屏幕阅读软件是否支持该项技术。

对于这两个地方,网页无障碍助手插件也同样做了优化。

E.验证码

验证码是盲人使用互联网最大的障碍,因为验证码可能有替代文字。也只有极少数网站采用语音替代访问或者短信验证或者回拨电话。

那么难道说验证码的障碍就没有办法解决了么?很多盲人朋友会在找到验证码之后,截图给朋友帮忙查看。作为12306的验证码,根本无法选中,所以盲人连截图的机会都给剥夺了。

优化之后的验证码做了特别的提示:“请输入右边的验证码,可以截图给朋友识别”。

客观的说,12306一直在进步!没有考了到盲人并不是12306一个人的错,整个互联网几乎都没有考了到这样一个群体。不过可以看到的是,注意盲人群体的公司和团体已经越来越多了,这是一个好的现象。

完整的插件使用说明请参照开发者团队的说明文档:http://accessibilityunion.org/page-access-helper.html

引用其中一位成员的语录:帮助是什么?未必是跑到非洲当志工。对我而言它有两件事:一是把自己的专业培养好;二是用自己的专业帮助周遭的人。

希望这样的团队越来越多,希望重视信息无障碍的公司越来越多。

关于 rockywen

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

发表评论

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