今天，本文会给大家介绍一下：什么是无障碍适配。后续我将继续给大家介绍，如何实现无障碍适配。
什么是无障碍
要给网页做无障碍适配，我们需要明白：什么是无障碍。
百度百科定义：
无障碍，在发展过程中没有阻碍，活动能够顺利进行。特指环境或制度的一种属性，即一切有关人类衣食住行的公共空间环境以及各类建筑设施、设备的使用，都必须充分服务具有不同程度生理伤残缺陷者和正常活动能力衰退者（如残疾人、老年人），营造一个充满爱与关怀、切实保障人类安全、方便、舒适的现代生活环境。
维基百科对无障碍环境的定义：
无障碍环境（英语：Barrier Free Environment或Accessible Environment），或畅通易达（Accessibility），意思为一个可以让人通行无阻，而且易于接近及到达的理想环境。
软件上的"有障碍"群体
在使用软件时，大概有以下几种“有障碍”群体，是无法像普通人一样的：
- 视障群体。他们看不清，需要更大的字号。又或者完全看不到，需要语音播报内容。
- 听障群体。他们听不清，需要更大的音量。又或者完全听不到，需要依赖视觉反馈。
- 肢体障碍群体。他们无法自由移动手指来操控手机屏幕。
无障碍解决方案
操作系统
其实无障碍适配的主要工作，都是操作系统实现的：
- 针对视障群体，操作系统提供放大镜、大字号、内容播报、语音控制。
- 针对听障群体，操作系统提供语音识别、字幕。
- 针对肢体障碍群体，操作系统提供语音控制。
前端开发者
但是无障碍适配这项工作，只靠操作系统是完全不够的。
如今的交互方式层出不穷，很多新鲜的交互方式操作系统是无法识别的，这就导致操作系统原生的「无障碍适配」失效了，需要我们前端开发者去适配。
我们要做的核心工作就是：开发 无障碍软件 可识别的 Web页面，让障碍群体借助操作系统的 无障碍软件，可以正常访问、使用我们的 Web页面。
开发前需了解
作为前端开发者，我们要解决的大都是「视障群体」的无障碍适配。我们需要先学会像盲人一样使用手机。
盲人使用手机是依靠「屏幕朗读」，开启该功能后，屏幕上会有一个矩形表示焦点（当前选中的元素），通常：左滑右滑可向前、向后切换焦点，双击屏幕就是点击焦点。每次切换焦点，手机都会语音播报当前焦点的类型和内容。
你可以去手机的设置中搜索“读屏”、“无障碍”、“屏幕朗读”等关键词，开启这一辅助功能，体验一下。
下面是我个人罗列了一些常用操作：
常用 | 表现 | 安卓 Talk Back | iOS Voice Over |
|---|---|---|---|
✅ | 激活（选中）元素，并播放元素内容（元素类型、元素文本、交互提示等） | 单指触碰屏幕（或单指滑动屏幕，也会激活碰到的元素） | 单指触碰屏幕（或单指滑动屏幕，也会激活碰到的元素） |
✅ | 激活（选中）下一个元素，并播放元素内容（类比键盘上的Tab） | 向右滑动（部分软件也可向下滑动） | 向右滑动 |
✅ | 激活（选中）上一个元素，并播放元素内容（类比键盘上的Shift Tab） | 向左滑动（部分软件也可向上滑动） | 向左滑动 |
✅ | 切换可激活的元素类型。（例如选择链接，则以上3个操作只会激活页面的链接，不会激活其它类型元素） | 不支持（部分软件向上滑动、向下滑动来选择） | 转子操作，即双指在屏幕上一起顺/逆指针旋转 |
播放所激活元素的子元素（例如按单词播报元素文本） | 不支持 | 向上/下滑动 | |
✅ | 触发所激活元素onclick事件 | 单指双击屏幕（屏幕任何地方都行，不必点到该元素） | 单指双击屏幕（屏幕任何地方都行，不必单指双击元素） |
触发手指位置的元素onclick事件 | 双指触碰同一元素（双指都要在元素上，不必激活该元素） | 不支持 | |
✅ | 滑动屏幕操作 | 双指同方向滑动 | 三指同方向滑动 |
安卓各个机型的语音播报是有差异的，对无障碍的支持能力参差不齐，而iOS对无障碍适配就非常优秀。所以大部分视障群体更愿意使用Apple系列产品。
我们做无障碍测试时，经常遇到Android和iOS播报有差异。我们要求必须兼容iOS的语音播报，不会花太多心思去兼顾所有安卓机的语音播报软件。
推荐阅读
- MDN对无障碍的介绍
- Apple对无障碍的支持
- Android对无障碍的支持
写在最后
我是HullQin，公众号线下聚会游戏的作者（欢迎关注我，交个朋友）。转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩UNO、斗地主、五子棋、飞行棋、卡坦岛等游戏，不收费无广告。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我噢～我有空了会分享做游戏的相关技术，会在这个专栏里分享：《教你做小游戏》。
