借12306订票页面聊聊如何改进无障碍用户体验

A5交易A5任务 SEO诊断淘宝客 站长团购

作为不可替换的，它为我们带来了太多太多的障碍，从最开始的难访问到后来的难支付，现在的12306，对正常用户来讲，所做的改进已算是很使人欣慰了。但对盲人来说，事情还远远没有解决。

之前在《如何做盲人认可的无障碍互联网产品》中，我提到了盲人是如何访问网页和他们的使用习惯。但这类的建议基本没法到达12306这样的网站。

那末难道就没有任何办法可以帮助这样一个群体了么?在相当长的一段时间里，我对这样类似的问题感到困惑与失落。不过，聪明人与实践者总是有的，我无意中发现了这样一个插件page-access-helper(网页无障碍助手)：

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

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

1.辨别主要功能

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

2.优化关键路径

A.超出不重要功能

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

安装网页无障碍助手以后，该插件主要链接添加了一个快捷键，不管当前焦点在哪里，只要alt+shift+z便可找到注册、购票、退票链接。对这个快捷键，我个人还是比较喜欢的，一个手就能完成了，而且跟QQ的显示消息窗口快捷键类似，方便记忆。

B.焦点圈套

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

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

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

C.表单毛病提示问题

表单作为用户和服务器的唯一接口，由于网速的飞速发展早已经从服务器端作为第一环节验证转成了前端js作为第一环节验证，从而加速了验证速度也优化了用户体验。对盲人用户，每一条毛病提示信息能否即便的反馈是影响操作效力乃至能否顺利提交的关键。12306原始的表单毛病提示读取繁琐，大大影响表单提交效力。而这个插件的处理方式是，利用焦点顺序的管理，使得输入毛病即时提示。

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

在12306页面里，车次信息作为最重要的搜索结果信息，键盘无法访问，屏幕阅读器用户一片茫然。其实，只需要插件允许对搜索结果，用tab键选中各次列车，读出发站及时间，到站及时间，当前还有的坐席种别，和回车便可预定，就可以方便盲人。一样的问题跟一样的解决之道，也出现在了提交定单确认的弹出框和确认定单的页面。

E.验证码

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

12306要做的事情只是，把验证码图片修改为允许选中，那末就可以方便盲人截图，给朋友帮忙查看。

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

在这个插件的开发者团队的说明文档里，其中一名成员的语录是：帮助是什么?未必是跑到非洲当志工。对我而言它有两件事：1是把自己的专业培养好;二是用自己的专业帮助周遭的人。

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

文章为个人观点，不代表本人所在公司及团体

原文链接

本文由accessibility授权虎嗅网发表，并经虎嗅网编辑。转载此文章须经作者同意，并请附上出处(虎嗅网)及本页链接。原文链接

成都到克拉玛依物流价格

四川成都到加拿大物流空运报价表

成都到福建宁德物流专线价格