【早读君聊聊】昨天QA测试的时候说用tab键操作后页面已经定位错误了。恍然这种细节平时在团队中很少去关注。本着遇到问题能了解的就多了解探究，此类BUG被延后处理了~哈。但想起不知道是2011年还是哪一年的D2，设有无障碍阅读体验区。

去年在厦门的前端分享会有邀请杨永全给我们演示如何操作网页，那就一个操作辛苦。所以今天我们就来关注这一类群体的阅读体验。

正文：

中国盲人人数已经超过了600万，平均每200多人中就有一位是盲人，这个规模还是相当庞大的。由于视觉障碍，盲人同这个世界的交集小了很多，但互联网的的发展为他们打开了一扇与更多人交流的窗口。

这个窗口的开关掌握在我们工程师手中！我们有义务也有责任为他们开窗！

上网的盲人用户和统计方式

盲人中真正有条件并且会上网的有多少呢？我们一开始就遇到了一个难题：如何判断用户是盲人用户？

视障人士主要通过读屏软件来获取网页信息，苹果的产品自带 VoiceOver，感兴趣的同学可以体验下。

PC 上和 mobile 上，盲人与机器的交互方式完全不一样，PC 上主要使用键盘操作，读屏软件提供了很多的快捷键，如果操作熟练，速度也是杠杠的！（只不过现在的软件很少提供和谐的文字引导，导致盲人使用起来受阻，webpages也是如此）而 mobile 中，盲人通过触摸屏的滑动获知页面信息，两种读屏就需要我们使用两种方式去判断。

1. PC

在读取屏幕时，tab 是使用最频繁的键，当然还有 shift+tab，两个操作键的作用，前者是向下一个可聚焦元素聚焦，聚焦上去之后读屏软件会读取元素属性，如果是文字，会读取文字内容，如果是图片，就读取图片 alt 内容。后者是向前聚焦。

所以我们就想到，通过监听 window 的 tab 点击事件，在规定时间内有连续多次触发该事件则认定该用户为无障碍受众用户。经过讨论，我们把连续点击次数设定为 10 次，监听到连续 10 次之后，发送统计，销毁事件。

2. Mobile

Mobile 上的统计是件麻烦事儿，没有键盘操作，只有 touch 屏幕，通过用户手势去判断这条路不可走，一方面是因为读屏软件的手势不在 web 页面的监控范围内，另一方面，手势动作判断实在是麻烦。

经过多次讨论，继续使用 PC 端的方案。TAB 键会让页面元素聚焦，那么我们在 Mobile 就监听元素的聚焦事件。监听所有元素的focus事件，在规定事件内有连续3次触发该事件则认定该用户为无障碍受众用户：发送统计，销毁事件。这里我们将触发次数修改成了 3，主要是因为 Mobile 可操作区域并不大，三两下操作就跳转到下一个页面了。

二、网页中普遍存在的『有障碍』访问问题

1. img 标签无 alt 属性，不可读

图片是电商网站中最重要的角色，但是盲人的世界里没有可视化的图片，如果页面上的 img 标签不加 alt 属性，对盲人来说这就是个无用网站。让图片可读，一件可轻松搞定的事情，却可以造福千千万万的视障人士，你值得去做！

2. 可操作元素，无法聚焦

诸如此类的 tab 切换随处可见，

网页可聚焦的元素不多，a、input、button、area 等等不到十个。我们通常使用 li 元素作为 tabHeader 的切换元素，这种情况下，盲人使用键盘操作是没有办法聚焦上去的，结果就是很多内容查看不到。

这是一个容易被忽略，但是影响面极广的问题，希望大家可以重视！ 解决方案很简单，给元素加个 tabIndex 属性。

3. 模板渲染页面后，焦点停靠不合理

两个十分让盲人受伤的问题：

焦点本来聚焦到 A 区块的某个元素，通过 ajax 重新渲染 A 区块之后，页面失去焦点从导航栏直接跳转到某个锚点位置，但是焦点没有跟着一起指向锚点区域的第一个元素从体验上来看，上面两个问题都是糟糕透了！但是我们只需要在 js 中附加一句

图3

之类的，一句简单代码搞定所有视障用户的痛！

4. 标签语义化不够

读屏软件有个比较给力的快捷键，他可以让用户快捷的定位 Header 标签，这样可以减少使用很多次 tab。在我们的双十二活动页面中，很多页面都有商品楼层，每个楼层都有一个标题，但是部分页面中我们的工程师并没有使用 H 标签而是 div 标签来标识标题（有时候标题是个图片），这一点让盲人郁闷至极。

『有障碍』问题的解决方案

我们重点做一件事情——让所有的图片可读！

关于网页无障碍的内容，w3c 提出了一堆规范（相关信息可以查阅 WAI），如果按照规范来找问题，那我们的工程师有的忙了。所以我们挑了几个影响最广泛的点进行单点突击！

第一步就是让所有的图片可读，不管是后端直接输出、TMS渲染、前端异步加载渲染的图片，全部加上 alt 标签，这是最简单的操作，也是推动起来最简单的点。当然，最后，我们的盲人测试团队的反馈是：图片可读这块做的很棒！

第二步就是扫清所有通向下一步（或者说通向支付）的网页障碍，一个流程下来，我们希望每个在淘宝上购买商品的盲人都能够成功支付。

很显然，上面提到的解决方案都是人为去推，这种方式是不长久的，我们希望所有的工程师都有这种意识，主动去改善网页的可读性。