企鹅 FM H5 无障碍优化总结

- 2018年的文，搬运存档用 -

TL;DR

互联网产品最容易做到的无障碍优化，应该就是针对视障的了。色弱、高度近视、色盲…都算是视障人群，并不是所有视障用户都会使用 voiceover 或 talkback 之类的工具才能浏览页面。色彩对比度友好也应该成为页面要求的一部分。

对于我们耳熟能详的无障碍标签检测，在工具上，无论是 Chrome 插件（ChromeLens、aXe）还是命令行工具（aXe-cli、pa11y）都有很多可选， 甚至 Chrome 开发者工具中就有相应的面板。但最重要的是要用对标签。

企鹅 FM 从今年9月发布的3.8开始就在完善无障碍优化，现在 app 内的无障碍优化得到了不少视障用户的点赞。但在分享、活动、运营等场景还有部分 app 内的通过 webview 承载的内容牵涉到了不少 H5 页面。H5 的无障碍优化自然也不能落后。

此篇文章总结了 H5 无障碍优化的一些方法和流程上的思考。

基本流程

FM 页面是一个高度组件化的页面，而且内容导向，没有特别多复杂动画承载视觉效果，按照以下步骤优化页面：

1. 保证语义化的 html 标签
2. 加 role、加 aria-* 辅助 voiceover 或者 talkback 朗读
3. 通过 accessibility 测试工具
4. 根据测试结构优化无障碍

展开说

1. html 标签的语义化 简单地来说就是，使用的 html 标签需要表达它的实际用途，如果是按钮那就应该用 button，不要什么都用 div 和 span 做了。html 标签太多了，想了解更多可以访问这里。
2. 加 role 和各种 aria-* 辅助属性 这个大概是踏出无障碍优化最高的一个门槛，可能内心怀抱着“这些属性值要去哪里查？”、“什么时候用什么 role？”诸如此类的忐忑不安。只要找对了文档，这个问题也是迎刃可解。以下两个文档，一个是 W3C 的官方无障碍文档，另一个是 Chrome 检测无障碍的规则： W3C 的 role definition Google Chrome accessibility developer tools - Audits Rules
3. 使用的工具和开发流程的结合 有不少 chrome 插件甚至 chrome 本身就带有无障碍检验的能力，开发者可以使用其中的工具，比如：
   • Chrome dev Tools 中的 Audits / Legacy Audits：

• Chrome 插件
  1. ChromeLens ChromeLens 曾被 Google 的无障碍优化工程师推荐过，除了常规的（已经被整合到开发者工具的 Audits 面板）Run accessibility checks 外，它还提供了多种视障场景模拟：

除了场景模拟外，ChromeLens 还可以追踪键盘轨迹，例如 tab 键的移动轨迹，这对开发者检测页面元素顺序很有帮助：

1. aXe aXe 其实是一个 node 项目，它主打的是 aXe-core 这个库和命令行工具，可以整合到开发流程中也是这类工具的优势之一。 aXe 作为浏览器插件，会检测页面的无障碍标签使用情况，比如是否使用了无效的标签，并给出对应的修改建议；还有所有工具通用的对背景色和字色对比度：

• 命令行工具
  1. pa11y 除了 aXe 外，还有不少基于 nodejs 的命令行/可以打包到开发流程中的工具，pa11y 就是其中翘楚之一（也是 fm H5 无障碍优化的最终工具选择）。 开发者可以通过命令行工具直接得到检测结果：

有的页面没有做过无障碍优化，可能在命令行里看检查情况伤眼。那也可以通过输出本地文件的方式，得到一份报告：

也可以通过 node-modules 的方式将这一步骤整合到开发流程中，FM 项目的开发流程是基于 gulp 发布流程基于 kaka。无障碍检查放到开发流程的最后一步比较合适。 通过 npm script 在执行下面命令之后，得到检测结果：

npm run test-a11y

除了上述常用检查无障碍标签、颜色对比度等特性外，pa11y 也提供了事件触发机制，比如点击、表单提交等，在某些场景下可以作为简单的测试框架使用：

pa11y({
    actions: [
        'click element #tab-1',
        'wait for element #tab-1-content to be visible',
        'set field #fullname to John Doe',
        'check field #terms-and-conditions',
        'uncheck field #subscribe-to-marketing',
        'wait for fragment to be #page-2',
        'wait for path to not be /login',
        'wait for url to be https://example.com/'
    ]
});

总结

就目前遇到的情况来看，做到：

1. 确保 html 标签语义化和结构良好
2. 用对了无障碍标签和属性，背景色和字色
3. 对比度友好一些选一个上手的无障碍工具

大家都能轻松写出无障碍友好的页面。

广义上的“无障碍”其实指的不仅仅针对全盲的用户，听障、行动不便、智力障碍…等用户场景都应该包括其中。只是在互联网产品的前提下，视觉障碍用户大概是我们最容易优化到的全体。

其实大部分视觉障碍用户就在我们的身边：近视、远视群体、老人、色弱人群…笔者曾经参加过一次视障用户相关的义工活动里，发现很多视障用户不是完全看不见的，更多的是视力有严重问题，只能看到色块看不清文字内容。有一天我们变老了，也会成为这些“视障人群”，所以无障碍优化更应该从现在开始啊~

参考

1. HTML5无障碍优化实践 -- adarzheng
2. Accessibility Testing With pa11y
3. Automating Your Accessibility Tests
4. Google 工程师出品的无障碍系列，一个视频不超过10分钟，快速了解无障碍 A11ycasts with Rob Dodson