前言
我所在的公司从事跨境业务，为了符合美国《美国残疾人法案》（ADA）和相关的无障碍法规要求，且部分客户也提出了相应的诉求，要求提供无障碍报告。
因此，在年初的时候完成了业务的无障碍审计，并修正了部分问题，使得网页达到了 AA 标准，在这把之前研究的笔记做个整理，希望可以帮助到有需要的朋友～
1. 什么是网页无障碍
Web accessibility 为 Web 无障碍环境，指所有用户(包括残障人士)都可以轻松的访问 Web。
2. 残障人士如何访问网页
身体缺陷包含多种类型，可以分为听觉、视觉、认知、和运动四类。身体缺陷的人通常借助辅助设备访问网页。例如，盲人使用屏幕阅读器，运动障碍者（如手臂骨折无法操作鼠标）则可通过语音控制。
简单介绍辅助工具的使用
2.1 屏幕阅读器
苹果系统自带了 voice over 的辅助功能，可以通过 command + F5 进行开启。
具体使用可以参考 youtube 的教程
3. 如何实现网页无障碍
实现网页无障碍需要多部门合作，包括研发、设计和产品。
- 研发：给网页内容增加补充标签，使得辅助工具可以工作。
- 设计：例如 UI 设计时考虑颜色对比度是否对色弱人群友好、可操作按钮的大小和布局是否对运动障碍人群（癫痫、手抖）友好等等。
- 产品：产品功能是否清晰，有认知障碍的人能否正确理解并使用
实现网页无障碍化需要考虑各个人群的需求，需要知道各类残障人士以何种方式访问网页。
3.1 最佳实践
目前大家公认的最佳实践是遵循 WCAG 的指导，所谓 WCAG，是 Web Content Accessibility Guidelines，是 W3C 指定的 Web Accessibility 的参考指南。
WCAG 最近版本是 2.2，提供了 xx 条实现 Web accessibility 的需要考虑的点，包含了三个级别的要求，分别是 A、AA 和 AAA, A 是最低要求，如果网站满足了 A level 的所有标准，那么网站到达了 A 级别的可访问性。
需要注意的是，在实现网站可访问性时，不需要要求达到 AAA 的等级，在细看了 WCAG 的标准就知道，AAA 对网站的要求太过严苛，甚至会影响到正常的页面呈现，因此只需要达到 AA 即可。
3.2 出示报告
当网站最终评测 Web Accessibility 时，用 VPAT 去记录网站在 WCAG 各个点达到了什么等级。VPAT 记录好后，可以提供给客户，证明网站是 accessible 的。
VPAT ： Voluntary Product Accessibility Template，是一个模板，标明产品的可访问性达到什么级别。
"用 VPAT 去记录网站在 WCAG 各个点达到了什么等级" 这个行为，也就是审计的过程。
4. 如何审计
如果网站有多个页面，并不需要检查所有的页面，需要确定检查范围
- 首页
- 主要基于文本的页面
- 有图片等媒体图片
- 表单类交互组件
- 动态内容例如 pop up、modal
- 包括登录功能的页面
从上面的条件中，挑取一些页面作为样本进行
4.1 文本内容
4.1.1 标题
如果是标题类的文本，不要仅仅通过 css 样式进行加粗放大，这样子屏幕阅读器无法识别出是标题。
可以通过 DigitalA11Y Tublets Chrome Extension 的谷歌插件去检查是否设置了正确的 heading role 或者语义化标签。
4.1.2 内容表述合理
需要保证指令的内容是不依赖于用户的视觉能力，例如内容为：“点击红色按钮”，“点击如下的按钮”，视障人群无法感知。
4.1.3 链接是否有意义
页面的链接确保表述正确，视障人群通过链接跳转时，丢失了上下文信息，需要清晰告知链接的作用。
4.1.4 颜色对比度
文本与文字背景的颜色对比度是否符合条件，色弱人群也可以清晰阅读文字。
tips：火狐浏览器提供了色弱模式，可以开启这个模式，更直观的带入色弱、色盲人群的视角。
4.2 图片、音频、视频内容
4.2.1 图片是否有描述
检查图片是否有描述信息，即使用户看不到图片，也可以访问信息。
检查 img 标签是否有 alt 属性。
同样可以使用 DigitalA11Y Tublets Chrome Extension 的谷歌插件
4.2.2 图像文本
检查网页中是否有转成图像的文本，如果是图像文本，视力有限人群不能通过更改字体大小、间距等操作来提高可读性。
4.2.3 音频视频是否提供描述信息
- 听力障碍人群：音频提供字幕或者画面描述
- 视力障碍人群：提供音频等替代媒体
4.3 交互
4.3.1 表单是否提供 label、表述是否清晰
表单元素是否有提供正确的 label，视障人群需要通过屏幕阅读器读取表单控件并进行交互，因此需要提供正确的 label 属性进行说明，
4.3.2 表单结构是否一致
同样的内容，在不同的页面，定义是否一致，例如同样的输入框，其 label 是否在一个页面为 A，在另一个页面为 B
4.3.3 超时提醒
一些页面会在 session 超时后，进行页面跳转，会导致用户数据丢失，此时应该有一个模式，在超时前让用户感知问题，并延长使用时间。
4.3.4 错误信息
表单输入错误后可能会有错误提示，错误提示需要清晰并让屏幕阅读器识别。
4.3.5 review before submit
在提交表单之前，让用户可以进行 review 操作。
场景：金融交易 或 法律合同签订。
4.4 可操作性
检查用户是否能以他们的方式进行交互
4.4.1 移动端、电脑端
在移动、PC 端都可以正常访问页面，即使方向翻转、放大或者缩小网页，网页都可以正常使用，不丢失内容。
4.4.2 键盘操作
可以使用键盘在页面进行跳转、操作。
涉及到：
- 键盘聚焦时样式处理
- 面包屑、导航栏结构
- 可交互元素例如 modal 等，可以通过键盘关闭
- 表单元素通过键盘操作完成
4.5 代码检查
通过工具，看标签是否正确被标记
总结
这篇文章更偏向于如何去做无障碍的审计，具体如何满足上诉内容，可以参考 WCAG 的官方指南，里面会提供一些场景的 best practice。
顺带一提，在做审计的时候，对比了国内网站和国外网站，感觉国内在无障碍这条路上，还是需要提高重视度的。
除此之外，强推 apple 官网，无障碍做的很好。
