本文已参与「新人创作礼」活动，一起开启掘金创作之路
背景：
使残障人士更容易访问 Web 内容和 Web 应用程序（尤其是使用 JavaScript 开发的应用程序）
Accessible Rich Internet Applications：可访问富互联网应用
操作：
ios打开旁白功能/android打开talkback（无障碍）功能，简洁说来就是读屏
—过程：从上往下滑动，单击是读屏，双击才是选中和显示。还有三指滑动翻页
现状：
下单阻碍，元素各自零散识别，很多识别不到，用户很难知道发生了什么
原因：
1、政策因素
2、设计
UI & 交互
HTML5语义化标签 、伪类元素、
没有使用语义化标签（header、footer、button都是div）、图片没有设置alt属性。div和span自身是没有角色的，并不能识别出来页面的结构和作用img和div/span等代替了radio、checkbox等元素（选中的时候也并不会设置checked属性，而是使用不同的样式）——视觉设计的需求所以开发使用了替代性元素
4、机器学习
- 业务知识 + 多音字
- 时间、航班号、价格符号等元素
- 弹窗
修改方向：
希望实现的目标：有障碍人士下单无阻。
主要属性
role： 标识了一个元素的作用：www.cnblogs.com/kunmomo/p/1…
**aria-**属性 ： 描述了与之有关的事物（特征）及其是什么样的（状态）HTML中的ARIA：www.cnblogs.com/kunmomo/p/1…
原则
1、如果你使用的元素(HTML5)具有语义化，应该使用这些元素，而不应该重新定义一个添加ARIA的角色、状态或属性的元素。
2、不改变语义，除非你真的需要使用。例如，开发者想创建一个标题，而且它是一个按钮
如果使用一个非交互的元素做为一个交互的元素，那么开发人员必须使用ARIA添加语义和使用适当的脚本增加交互行为。
3、有的ARIA制作控件都必须具有键盘(keyboard)事件
例如，如果使用role=button必须能够接收到焦点和用户能够使用键盘激活相应动作，比如Win操作系统上的enter和iOS系统上的return或者键盘的空格键(space)。
4、不建议在可获取焦点元素(focusable)使用ARIA的角色：role=presentation或aria-hidden="true"。
可获取焦点元素上使用ARIA这两规则，会导致一些用户无法获取元素焦点。
5、所有交互元素都必须有一个可访问的名称
一些启示：
- 如果盲人用户都能流畅无阻地使用你的产品，想想看视力健全的人用起来体验会有多棒？
- 越早考虑到无障碍，产品开发就越省事
- 包容性设计原则
- 无障碍会让所有人受益
- 无障碍会驱动创新
- 怀疑你的每个假设
- 简易度与一致性
- 直观性（affordance）、反馈、错误修正
- 辅助与效率
后续代码应用：
1、语义化标签
2、eslint校验：
React：github.com/jsx-eslint/…
| 常见error | 解决办法 |
|---|---|
| vuejs-accessibility/click-events-have-key-events | 增加键盘事件，使Enter或空格键触发Click事件行为v-on:keydown.enter="submit" v-on:keydown.space="submit" v-on:keydown.esc = "cancel" |
| vuejs-accessibility/interactive-supports-focusdiv 或 span 等其他不可聚焦元素模拟按钮，会无法获得焦点 | 给元素添加tabindex=”0″，但会影响tab顺序建议还是改成可聚焦元素，如button |
3、多测一测
参考文档：
zhuanlan.zhihu.com/p/124277163
收费文档tabindex：www.w3cplus.com/html5/acces…
收费文档3个属性的区别：www.w3cplus.com/a11y/aria-l…
