认识网页无障碍

最近忙里偷闲坚持了好几个星期网页无障碍相关的学习和研究，看了很多文档，也在 Google 中寻觅了不少博客文章，总的来说就一个感受：规范文档太细节太长，博客指导性不强。

在 上文 中提到，信息无障碍并不是一种爱心公益活动，只是在大多数公司中，这方面的技术/产品投入难以带来可观的利润，于是信息无障碍难以进入开发的流程之中，即便有工程师零零碎碎地在页面中加入了无障碍优化，一段时间的产品迭代之后，这些优化又荡然无存了。

我希望，通过一段时间的研究和实践，能够把我对网页无障碍化的理解表达出来，在学习的过程中，会去盲人社区交流，切身体会视障人士的处境，同时也会跟国内几位做了比较长时间网页无障碍研究的盲人开发者沟通，收获一些心得。

认识网页无障碍化

站在一个用户的角度思考。当用户进入你的网站，他的目的应该是很明确的，在最短的时间内通过最快的方式找到自己想要的信息。正常人通过眼睛去捕捉网页上的信息，而视障人士主要通过耳朵，并使用读屏软件辅助读取页面的信息。

如果网页很长，链接很多，比如一些门户网站，盲人用起来就会特别吃力，PC 上通过 TAB 键从头开始往后聚焦，成千上万个链接堆叠在一坨，其恶心程度可以想象，我觉得能够鼓起勇气进入这些网站的盲人都是脾气相当不错的（如果是你，你会砸键盘么🙈）。

读屏软件不知道哪些信息是「重要信息」和「次要信息」，更加不清楚哪些信息是重复信息，有的时候读屏软件还会读到一些干扰信息（比如图形字符等）。

所谓的网页无障碍化，就是将网页信息有序的排列在一起，并且提供几个快捷入口让用户迅速找到关注点，然后排除干扰，我简单地理了下无障碍化的思路：

• 第一步，让用户知道页面上有什么内容，比如使用 HTML5 的语义化标签以及 WAI-ARIA 中的 landmark 地标；
• 第二步，让用户可以轻松在页面的板块之间切换，比如添加快捷键支持；
• 第三步，让用户知道哪些是主要部分，甚至在进入页面的时候就提供快捷方式跳到主要内容的锚点；
• 第四步，去除页面干扰，如 iconfont 文字，相邻重复的链接等；
• 第五步，提供页面的交互支持，让自定义的组件如 tab、slide 都具备无障碍属性。

稍微厘清上面五个步骤的思路，其实很简单，就是让信息模块化地呈现，这样就可以让耳朵更好的代替眼睛办事儿。

理解和实践网页无障碍化

掌握了整体的思路后就会清楚，哪些操作是有益于网页整体无障碍的，哪些操作是局部的微小优化，对于很多网站而言，我们可能不需要去关注细微的优化，因为这些事情读屏软件可以胜任。只要能够在整体上将一个网页乃至一个网站的无障碍体验做好，这就是网页无障碍化的最佳实践！

有些同学在做无障碍实践的时候没有真实理解盲人的需求，所以做出来的东西反而比没优化之前更加难用，比如滥用 tabindex，把网页内容的顺序排列得支离破碎，如果你正在做或者正准备做网页无障碍，请你一定要站在盲人的角度看问题。当然，最好你还能闭上眼睛拿着读屏软件测试下你写的页面。

不同的平台会有不同的读屏软件，由于各读屏软件对标准的实现存在偏差，甚至存在删减，最后导致不同平台下的读屏体验是不一样的，如同我们关注各浏览器之间的兼容性一般，在做无障碍测试的时候，也要关注不同读屏软件的差异。

最后

文本主要从网页无障碍的思路上做了一些阐述，可能不严谨，也可能有表述不当的地方，如果你对这方面有研究，欢迎提出你的观点，也期待更多人关注网页无障碍化。

本文同步自 小胡子哥的个人网站，原文地址： http://www.barretlee.com/blog/2016/03/05/steps-of-web-content-accessibility/