前端不止：Web内容的无障碍性
网民统计报告
根据2017年7月份发布的第40次中国互联网络发展状况统计报告：
截至 2017 年 6 月，中国网民规模达 7.51 亿，中国手机网民规模达 7.24 亿， 中国网民中农村网民占比 26.7%，规模为 2.01 亿。
截至 2017 年 6 月，中国网民通过台式电脑和笔记本电脑接入互联网的比例分别为 55.0% 和 36.5%；手机上网使用率为 96.3%，平板电脑上网使用率为 28.7%；电视上网使用率为 26.7%。
截至 2017 年 6 月，我国非网民规模为 6.32 亿。上网技能缺失以及文化水平限制仍是阻碍非网民上网的重要原因。调查显示，因不懂电脑 / 网络，不懂拼音等知识水平限制而不上网的比例分别为 52.6% 和 26.9%；由于不需要 / 不感兴趣而不上网的比例为 11.2%；受没有电脑，当地无法连接互联网等上网设施限制而无法上网的比例分别为 9.3% 和 6.2%。
提升非网民上网技能，降低上网成本以及提升非网民对互联网需求是带动非网民上网的主要因素。
image
信息无障碍
今天，我想讨论一个关键的词语——信息无障碍。
信息无障碍，英文词语来自“Accessibility”，是指任何人（注意是任何人，无论是健全人还是残疾人，无论是年轻人还是老年人等等）在任何情况下都能平等地、方便地、无障碍地获取信息、利用信息。
首先，我们要对Accessibility（无障碍）的一些错误认识进行一些纠正：这样一个词，很多人自然地跟残障人士联系起来，因为经常可以看到无障碍坡道、无障碍洗手间这样的词语。
信息无障碍更多强调的是对所有人都平等，方便的获取信息。比如：键盘上的F和J的凸起基准键。它的作用就是方便任何人可以精准的找到键盘字母的位置，从而可以在不看键盘的情况下，快速的打字，俗称“盲打”，大家都知道它的含义，没有人会把这个词理解为“盲人打字”吧。
image
（键盘基准键）
我国非网民规模为 6.32 亿，由于个人主观意愿，比如：不需要 / 不感兴趣而不上网的比例仅仅占11.2%。
那么，剩下的88.8%，也就是大约5.612亿人，是有上网需求的，但因为其他各种原因而不能上网。信息的公平使用和访问，是所有人的基本权利，如果你不能像身边其它人一样公平的获取信息，那意味着你不能公平接受教育、就业、独立生活等等。
我为什么会注意
我是谁？我为什么关心这些？这不是个哲学问题。每个人身上都有很多的标签，但在这里，我的标签是一个普通的Web开发工程师，一个新科技产物的使用者，一个信息的生产者和使用者，一个能“无障碍”获取信息的个体。而我的生活和我的工作让我开始关注“无障碍”这样一个词。
在互联网的大环境下，所有人的生活都方便了不少，我们可以远程办公，远程接受教育，网上购物，现在甚至连买菜、买水果都不需要出门，就这段时间，我妈有时都会直接在网上买菜和水果。
在我们享受这种生活便利的同时，我们也常常听到一些声音，比如：“这些都是年轻人的东西”，“我家小孩手机app玩的可溜了”。
前几天，我去办理港澳通行证，其实已经比我五年前办护照时方便很多，然而，在市政府政务中心的自动办理出境机器旁边，我会听到有几位年长的人说“这个机器不会用，怎么办？”，另一个人说，“没事，有个警察在旁边帮你操作”。这就意味着，如果旁边没有那个警察帮着操作，那么就不方便使用了，至少不是对所有人都方便。
科技的便利性看来还不是对所有人都便利，其实它还是需要一定的学习成本。
因为在外企的缘故，我有幸参加过一些海外的项目，在需求的实现过程中，客户对应用的无障碍性都会有一定的要求，于是我从中学习到了不少的相关知识。当然我也去过一些其他国家，跟不同国家的同事讨论过这方面的问题，也听他们介绍了一些做的不错的项目。所以我来举个例子：
比如，澳大利亚政府的“网络可访问性国内过渡战略”（NTS）规定，所有政府网站及其内容必须在 2012 年 12 月 31 日以前达到 WCAG 2.0 的 A 级合规要求，并在 2014 年 12 月 31 日之前达到 AA 级合规要求。
WCAG是万维网联盟（W3C）发布的一套名为“Web Content Accessibility Guidelines (WCAG) ”的网络内容可访问性指引。该指引目前是网络可访问性的国际标准。合规等级分为三级（A、AA 和 AAA）。
相关达到 WCAG 2.0 的 A 级合规要求的网站，例如：澳大利亚官方政府网站，澳大利亚政府留学网站等，体验一下他们在Web内容无障碍性的一些实践，比如：只通过tab和enter来导航到不同的网站区域。
如果反观一下国内的一些相关网站，无障碍访问的体验感一下就降低了不少。
是能力问题还是被忽略了？
有时候，我在想这样一个问题，到底是我们的能力问题，还是问题被忽略了，当然大部分人的答案会是后者。
但我有时候会认为是前者，因为我们忽视了这个问题，所以导致其实我们也缺乏这方面的能力，无论是开发还是设计。
“目前我国99%的网站，由于没有实现无障碍，盲人难以正常浏览访问网站。”省盲协主席、中山大学工学院教授富明慧于2013年说的。富明慧本身就是一名盲人，他失明后发明了电脑盲文输入法。他说，加快网站无障碍改造，政府部门网站应该先行一步。
如果你在一个互联网公司工作，你大可在周边一问，比如：你听说过Web Accessibility？或者你知道怎么做才是最佳的方式吗？我们的产品里面有做这个？会作为代码和质量审核的一部分吗？
从哪里开始
连续追问这几个问题，的确会让不少人哑口无言，包括我自己在内。首先，我要承认这个不是一件容易的事情，否则不会有今天这样的一个讨论和思考。
我认为无障碍性的实现，应该是一个端到端的过程，不是设计师（UX/XD），不是开发(Dev)，不是质量分析师(QA)某个人的责任，而是整个产品研发过程中所有人的责任，也许从产品构思的那天的就要开始考虑（比如：用户群体）。
其实这是个如何去做的话题会比较大，但是我想在这里举几个简单例子，让大家产生一些共鸣，也许从明天开始，在写代码和设计的过程中，你就会注意这些小的细节。
例子：通过Tab切换聚焦的的顺序
由于行动障碍而无法使用鼠标的人，会使用键盘进行页面的浏览。而页面上DOM的顺序会决定Tab切换时聚焦（focus）的顺序，我们知道CSS可以改变DOM在页面上的显示位置逻辑，但是DOM本身的顺序没有改变，这就容易导致Tab切换时给键盘使用者带来困惑。比如：
<div style="width:200px">
<button style="float: right">右边菜单按钮</button>
<button>左边</button>
<button>中间</button>
</div>
`</pre>
[](https://insights.thoughtworks.cn/wp-content/uploads/2018/05/3.gif)
当使用tab进行切换时，并不是最先聚焦到“左边”这个按钮，而是右边菜单，这就和页面上看到的逻辑产生了冲突。
**例子：通过tabindex聚焦弹出框**
你有没有注意到Bootstrap的模态框是这么写的：
<pre>`<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
弹出
</button>
<div class="modal fade" id="myModal" tabindex="-1" ...其他属性省略>...</div>
当tabindex=-1时，表示当前元素必须要被聚焦，如果是元素弹出框，就需要使用tabindex，这样才能保证使用键盘的用户可以理解通过tab切换到模态框中的各个元素。如果你没有使用像Bootstrap这样的框架，那么当用其他前端框架实现自定义的模态框时，请务必考虑这个细节。
例子：请自定义元素的outline样式
你知道CSS中{ outline:none }对于网站的无障碍访问性是一个致命的做法吗？为什么我们还会这么做呢？因为元素在被聚焦时，会有一个蓝色的轮廓，而出于视觉效果的考虑，被认为是“不好看的”，所以被去掉了。
image
于是，当通过tab进行页面浏览时，很难立刻知道光标当前聚焦在哪一个元素（链接或者输入框）。这种情况，我们需要为它的聚焦效果提供一个另外的设计，以便同时保证它的功能性和视觉效果。更多关于{ outline:none }的内容，大家可以参考：http://www.outlinenone.com/。
例子：设计页面时，请满足文字上的前后景颜色的对比度
image
（文字和背景的颜色对比）
WCAG 2.0 的1.4.3条对页面上文字的对比度有一个最低的要求4.5 : 1，目的很明显是为了保证色盲/色弱人群可以无障碍的访问网站的内容。假如说你是产品经理，有一天设计师告诉你，这个设计可能导致10个用户里面有1个用户存在访问障碍，阅读困难，你能接受吗？我想谁都接受不了。
有什么工具可以帮助检测网站的无障碍性吗？
对于普通使用者，可以使用Chrome的审计功能和Accessibility Developer Tools(Chrome插件)，它能帮助你自动的检测网页的的可访问性问题，以及帮助你提供相关的修正信息。
image
（Chrome的审计功能）
image
Accessibility Developer Tools(Chrome插件)
对于开发人员，可以做一些自动化的检测，比如：使用pa11y这样一个工具，它是基于HTML codeSinffer以及PhantomJS制作而成的网站内容A11y(Accessibility，无障碍性)自动化检查工具。pa11y出现在ThoughtWorks 2017年3月的技术雷达中，我的同事写过一篇详细的文章来介绍这个工具：《无障碍性测试工具 Pa11y》。
当然，最重要和最有效的检验方式是用户测试，比如：假设你自己是一个纯键盘的网站浏览者，尝试一下用键盘浏览自己开发的网站，是否能够方便的导航到网页的各个部分，并进行无障碍的阅读和交互。
还有其他一些重要的关注点吗？
有的，比如：基本HTML的语义化，alternative text的使用，ARIA标签属性的使用，都可以帮助屏幕阅读器有效的告诉使用者当前的元素类型和作用。
不要小看这些细节
不要小看这些细节或者说基础功能，它涵盖的人群非常大，根据国家统计局最新数据，在中国，单是65岁的老年人已经超过1.5亿人口。加上其它障碍人群，以及第二语言学习者，等环境障碍人群，粗粗一算，这么简单的特性就能方便好几亿的用户，为什么要省略呢？
我在写这篇文章的时候，也去查了不少的资料，我觉得知乎上有一个人说很好：对无障碍性一个最大的误区是，将信息无障碍，当做产品的情怀功能，而非基础功能或Bug去对待。
文/ThoughtWorks朱本威
