title: 也让盲人拥抱互联网
categories:
<p>中国盲人人数已经超过了600万，平均每200多人中就有一位是盲人，这个规模还是相当庞大的。由于视觉障碍，盲人同这个世界的交集小了很多，但互联网的的发展为他们打开了一扇与更多人交流的窗口。</p>
<p><img src="https://images.cnitblog.com/blog/387325/201412/211619123902315.png" alt=""></p>
<p>[图片取自<a href="http://news.lnd.com.cn/htm/2010-12/01/content_1634981.htm">网络</a> - 吴铸上网只需要键盘、音响和麦克]</p>
<p>这个窗口的开关掌握在我们工程师手中！我们有义务也有责任为他们开窗！</p>
<h3>一、上网的盲人用户和统计方式</h3>
<p>盲人中真正有条件并且会上网的有多少呢？我们一开始就遇到了一个难题：如何判断用户是盲人用户？</p>
<p>视障人士主要通过读屏软件来获取网页信息，苹果的产品自带 VoiceOver，感兴趣的同学可以体验下。这里有一篇 VoiceOver 的<a href="http://bbs.feng.com/read-htm-tid-3042656.html">使用教程</a>，学会使用并不难，难的是把耳朵当眼睛使的繁琐。</p>
<p>PC 上和 mobile 上，盲人与机器的交互方式完全不一样，PC 上主要使用键盘操作，读屏软件提供了很多的快捷键，如果操作熟练，速度也是杠杠的！（只不过现在的软件很少提供和谐的文字引导，导致盲人使用起来受阻，webpages也是如此）而 mobile 中，盲人通过触摸屏的滑动获知页面信息，两种读屏就需要我们使用两种方式去判断。</p>
<h4>1. PC</h4>
<p>在读取屏幕时，tab 是使用最频繁的键，当然还有 shift+tab，两个操作键的作用，前者是向下一个可聚焦元素聚焦，聚焦上去之后读屏软件会读取元素属性，如果是文字，会读取文字内容，如果是图片，就读取图片 alt 内容。后者是向前聚焦。</p>
<p>所以我们就想到，<strong>通过监听 window 的 tab 点击事件，在规定时间内有连续多次触发该事件则认定该用户为无障碍受众用户</strong>。经过讨论，我们把连续点击次数设定为 10 次，监听到连续 10 次之后，发送统计，销毁事件。</p>
<h4>2. Mobile</h4>
<p>Mobile 上的统计是件麻烦事儿，没有键盘操作，只有 touch 屏幕，通过用户手势去判断这条路不可走，一方面是因为读屏软件的手势不在 web 页面的监控范围内，另一方面，手势动作判断实在是麻烦。</p>
<p>经过多次讨论，继续使用 PC 端的方案。TAB 键会让页面元素聚焦，那么我们在 Mobile 就监听元素的聚焦事件。<strong>监听所有元素的focus事件，在规定事件内有连续3次触发该事件则认定该用户为无障碍受众用户：发送统计，销毁事件</strong>。这里我们将触发次数修改成了 3，主要是因为 Mobile 可操作区域并不大，三两下操作就跳转到下一个页面了。</p>
<h3>二、网页中普遍存在的『有障碍』访问问题</h3>
<h4>1. img 标签无 alt 属性，不可读</h4>
<p>图片是电商网站中最重要的角色，但是盲人的世界里没有可视化的图片，如果页面上的 img 标签不加 alt 属性，对盲人来说这就是个无用网站。<strong>让图片可读，一件可轻松搞定的事情，却可以造福千千万万的视障人士，你值得去做！</strong></p>
<h4>2. 可操作元素，无法聚焦</h4>
<p>诸如此类的 tab 切换随处可见，</p>
<p><img src="https://images.cnitblog.com/blog/387325/201412/211619204525152.png" alt=""></p>
<p>网页可聚焦的元素不多，a、input、button、area 等等不到十个。我们通常使用 li 元素作为 tabHeader 的切换元素，这种情况下，盲人使用键盘操作是没有办法聚焦上去的，结果就是很多内容查看不到。</p>
<p><strong>这是一个容易被忽略，但是影响面极广的问题，希望大家可以重视！</strong> 解决方案很简单，给元素加个 tabIndex 属性。</p>
<h4>3. 模板渲染页面后，焦点停靠不合理</h4>
<p>两个十分让盲人受伤的问题：</p>
<ul>
<li><strong>焦点本来聚焦到 A 区块的某个元素，通过 ajax 重新渲染 A 区块之后，页面失去焦点</strong></li>
<li><strong>从导航栏直接跳转到某个锚点位置，但是焦点没有跟着一起指向锚点区域的第一个元素</strong></li>
</ul>
<p>从体验上来看，上面两个问题都是糟糕透了！但是我们只需要在 js 中附加一句</p>$(".destination:first-child").focus()
<p>之类的，<strong>一句简单代码搞定所有视障用户的痛！</strong></p>
<h4>4. 标签语义化不够</h4>
<p>读屏软件有个比较给力的快捷键，他可以让用户快捷的定位 Header 标签，这样可以减少使用很多次 tab。在我们的双十二活动页面中，很多页面都有商品楼层，每个楼层都有一个标题，但是部分页面中我们的工程师并没有使用 H 标签而是 div 标签来标识标题（有时候标题是个图片），这一点让盲人郁闷至极。</p>
<h3>三、『有障碍』问题的解决方案</h3>
<p><strong>我们重点做一件事情——让所有的图片可读！</strong></p>
<p>关于网页无障碍的内容，w3c 提出了一堆规范（相关信息可以查阅 <a href="http://www.w3.org/WAI/">WAI</a>），如果按照规范来找问题，那我们的工程师有的忙了。所以我们挑了几个影响最广泛的点进行单点突击！</p>
<p>第一步就是让所有的图片可读，不管是后端直接输出、TMS渲染、前端异步加载渲染的图片，全部加上 alt 标签，这是最简单的操作，也是推动起来最简单的点。当然，最后，我们的盲人测试团队的反馈是：图片可读这块做的很棒！</p>
<p>第二步就是扫清所有通向下一步（或者说通向支付）的网页障碍，一个流程下来，我们希望每个在淘宝上购买商品的盲人都能够成功支付。</p>
<p><strong>很显然，上面提到的解决方案都是人为去推，这种方式是不长久的，我们希望所有的工程师都有这种意识，主动去改善网页的可读性。</strong></p>
<h3>四、小结</h3>
<p>先说说现在存在的问题，概括性讲，有三点：</p>
<ol>
<li>不知道无障碍</li>
<li>不知道做什么</li>
<li>知道无障碍但是推不动</li>
</ol>
<p>为此我们无障碍小组也进行了脑暴：</p>
<ul>
<li>工具/平台上集成，比如给 img 标签强制或者自动加上 alt 属性</li>
<li>国外开发的无障碍检测工具，移植过来，搭建测试平台</li>
<li>页面结构化，使用元数据/元编程</li>
<li>无障碍方面编程的规范化，白皮书</li>
<li>接入到测试流程中</li>
<li>....</li>
</ul>
<p>想了很多点子。我们的目标很明确：<strong>让网页可读，对盲人易用。</strong></p>