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

作为“不可替代”的，它为我们带来了太多太多的障碍，从最开始的难访问到后来的难支付，现在的12306，对正常用户来说，所做的改进已经算是很令人欣慰了。但对于盲人来讲，事情还远远没有解决。之前在《如何做盲人认可的无障碍互联网产品》中，我提到了盲人是如何访问网页以及他们的使用习惯。但这类的建议基本无法到达12306这样的网站。

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

他利用火狐插件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.重要信息必须键盘可访问

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

E.验证码

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

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

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

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

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

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

原文链接

html从入门到精通

java架构师 培训班

vue 视频教程