最近项目需要，研究了一下Accessibility，在这之前，作为一个前端开发，我对这个几乎是不了解的，为此感到十分惭愧。所以Web Accessibility到底是什么呢？
首先我们先来了解一下 Accessibility，又简称为A11y(A-y中间一共11个字母)，翻译为中文又叫“无障碍访问”，是指产品、设备、服务以及环境等也能够被残疾人使用。所以Web Accessibility 我们就不难理解了，在W3C上对这个词语有着更加准确的定义：
Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, people can:
- perceive, understand, navigate, and interact with the Web
- contribute to the WebWeb无障碍是指设计和开发网站、工具和技术，使残疾人能够使用它们。更具体地说，所有人可以:
- 感知、理解、导航和与Web交互
- 为Web做贡献
Disabilities 又指的是哪些人呢？同样在W3C上有着明确的定义：
Web accessibility encompasses all disabilities that affect access to the Web, including:
Web无障碍包括所有影响浏览网页的障碍，包括:
- auditory （听觉）
- cognitive （认知能力）
- neurological （神经损伤）
- physical （身体上的）
- speech （语言）
- visual （视觉）Web无障碍对无残疾人士亦有好处，例如:
- 人们使用手机、智能手表、智能电视等具有小屏幕、不同输入模式的设备等
- 随着年龄的增长能力发生变化的老年人
- 有“暂时性残疾”的人，如手臂骨折或眼镜丢失
- 有“情境限制”的人，例如在明亮的阳光下或在无法听音频的环境中
- 使用慢速互联网连接，或带宽有限或昂贵的人
简而言之，这里所指的有障碍的一类人包括失明或低视力、耳聋或听力低下、行动受限、语言障碍、感光性以及这些障碍的组合，以及有学习障碍或认知限制的一类人。
据公开数据统计，全球大概有76亿人，而使用互联网的达到了44.3亿。联合国残联通过调查得出数据，全球大约有10%（约7亿6千万）的人是残疾人。所以这个渺小而又庞大的群里我们软件开发的目标用户吗？他们能够是我们的目标用户吗？虽然我不能感动深受，但是我想他们肯定希望自己能够随心所欲的访问互联网，能够像一个正常人一样去体验科技给人们带来的便捷与快乐。所以，如果我们能够让他们的期望变为现实，那又为什么不尽力去实现呢？
为了使我们的web应用能够被所有的人使用，比较重要的几点包括:
1. 对于所有的鼠标操作，应用程序应该有相应的键盘。
2. 选项卡必须按逻辑顺序排列，以确保导航顺畅。
3. 需要为菜单提供快捷键。
4. 应用程序中的所有标签应准确和易于理解。
5. 应用程序中的颜色需要对所有用户都是可区分的。
6. 图像和图标应该容易被所有终端用户理解。
7. 用户应该能够调整或禁用闪烁、旋转或移动元素。
为了支持无障碍访问，W3C(Wide Word Web Consortium)制定了一系列的标准，这就是WCAG（Web Content Accessibility Guidelines)。WCAG基于可感知、可操作、可理解和健壮性 四个基本原则定义了如何使残障人士更容易访问网站内容的准则。WCAG进行了3次主要修订，即:
- 版本1.0发布于1999年
- 版本2.0，发布于2008年
- 2018年出版的2.1版。
1.0 和 2.0版本主要是针对四项基本原则制定了一些标准，所以在这之前大多数组织使用的是2.0版本。但是大家都有目共睹，从2008年到现在，这十多年来网络技术的发展是突飞猛进的， 例如HTML5的发布使前端技术不再局限于简单网页的编写。所以针对最新的web技术，W3C 在2018年发布了2.1版本。2.1版本的更想主要是以下几点：
1. 提供触摸设备手势的替代品。如缩放或滑动必须使用替代手势，可以使用单点、双点或长点来代替执行。
2. 针对组件的标签和可感知的名称应该是相同的。如一个按钮在屏幕上显示为“搜寻”，则该按钮的标签亦应是“搜寻”。这样，如果用户说“搜索”。然后语音识别软件将识别并触发搜索行动。
3. 网页在纵向和横向模式下应该具有同等的功能。缩放应该是比例的，平滑的，不应该导致功能的损失。
4. 悬停或焦点内容，因为在没有鼠标的情况下，这些小部件是不容易访问的。指南建议用户应该能够停留在这个内容上(例如表单模式)，并使用键盘导航，而不失去对背景页面的关注。用户应该能够使用ESC键关闭这样的内容。
5. 应该清楚地通知用户超时。一个常见的用例是用户将从经过身份验证的站点被注销。应该有非常明确的通知，以便在此类事件发生时清楚地通知所有用户——包括残疾用户
其实早在1973年，国会通过了一项以帮助所有人，包括残疾人的名为《康复法案》的法案。在1998年和1999年，该法案进行了修订，以使电子信息技术更容易访问，该修正案叫做 Section 508。Section 508 主要是针对一个非营利组织，这个组织可能从政府那里得到钱来为其成员建立一个网站，那么这个网站必须符合Section 508标准。在2018年WCAG2.1发布时，国会修改Section 508的指导准则，加入了WCAG关于A和AA符合性的指导方针。
所以在我们的项目中，比较常见的例子和实践：
1. 使用语义化的HTML标签
2. 实现无障碍表单
· 所有的 HTML 表单控制，例如 <input> 和 <textarea> ，都需要被标注来实现无障碍辅助功能。（WAI-ARIA）
· 再出现任何错误时，所有用户都应该知情
3. 控制焦点-确保你的网络应用在即使只拥有键盘的环境下正常运作。不要使用css移除input、a等标签的默认outline样式
4. 使用WebAIM技术实现跳过内容机制
5. 使用程序管理焦点，例如：在一个弹窗被关闭的时候，重新设置键盘焦点到弹窗的打开按钮上。
6. 确保任何可以使用鼠标和指针完成的功能也可以只通过键盘完成。
7. ......
在上面我们提到了一个提高我们无障碍访问的web技术叫做 Accessible Rich Internet Applications (ARIA), 那么什么又是ARIA呢？ ARIA是能够让残障人士更加便利的访问 Web 内容和使用 Web 应用（特别是那些由JavaScript 开发的）的一套机制。ARIA是对超文本标记语言（HTML ）的补充，以便在没有其他机制的情况下，使得应用程序中常用的交互和小部件可以传递给辅助交互技术。ARIA 是一组特殊的易用性属性，可以添加到任意HTML标签上.
如果是用react 开发web应用，推荐以下几个工具：
Eslint-plugin-jsx-a11y : Lint tool in editor
The Accessibility Engine (Chrome plugin)
Wave (Chrome plugin)
Pa11y : CI/CD
