关于无障碍你需要了解
一、什么是无障碍
根据 W3C 的定义，有生理缺陷的人也能轻松使用，更确切地说是能够感受、理解、操作产品(比如网站、工具…各种现代技术)，就可以被称为"无障碍"(accessibility)。
二、如何支持无障碍
1、评测标准
WAI【网页易读性倡议】组织在相关无障碍标准的设计，使用 A、AA、 AAA 来作为移动端无障碍优化的成功标准级别。
A 级是对广泛的用户群体有重要影响，不 是针对某一特定残疾群体。
AA 级可能针对某一类型残疾群体。
AAA 级通常专注于某一类 群体无障碍的改进，收益-成本率较低。
2、具备能力
- 对键盘友好的支持
- 所有内容可被理解，如语义HTML支持。
- 增加尽可能多的文本信息，如图片增加文案说明。
- 提供高对比清晰的颜色
- 屏幕阅读器的支持
三、无障碍如何修复
1、结构语义化
关闭样式测试能否理解内容层次化结构。
错误案例
<div>Play video</div>推荐案例
<button>Play video</button><button>标签不仅提供了按钮的样式，还提供了键盘的可访问性，如：使用tab键更换按钮，使用回车键点击按钮。
在HTML里面使用语义化，其它好处：
- 更便于开发，方便用户理解
- 更适更多设备
- 更便于SEO优化
2、键盘友好支持
合理使用tabIndex，默认的HTML 元素是具有自带的键盘辅助功能的，当其他元素与JavaScript一起进行交互时，键盘的辅助功能和屏幕阅读器的报告会因此收到影响，可以通过设置tabIndex数字来重新设置tab顺序，你也可以通过负值屏蔽tabIndex。Tab顺利规则，按照从上到下，从左到右。
3、友好的表单支持
表单标签很重要，可以让用户了解您需要输入每个表单输入的内容。
填写您的姓名: <input type="text" id="name" name="name">在上面的示例中，没有任何内容将标签与表单输入明确关联。
建议修正
<div>
<label for="name">填写您的姓名:</label>
<input type="text" id="name" name="name">
</div>3、文字说明
如果用户有视觉和听觉障碍，尽可能多的描述，可以增加可访问性体验，最简单的实现，增加 alt 属性，比如链接，图片，video，表单，table等常用属性，都需要补充说明。
<img src="图片.png" alt="这是个图片说明">如果您想将相同的文本用作多个图像的标签，可以通过：
<img src="图片1.png" aria-labelledby="image-label">
<img src="图片2.png" aria-labelledby="image-label">
<p id="image-label">这是个图片说明</p>4、高对比度支持
对于视觉障碍的用户，相近的颜色会对用户造成视觉干扰，无法正确识别文本内容，可以通过操纵系统配置高对比度模式，对页面进行测试。
- 对于视力不太好的人或者对于不太好的显示设备来说，黑底白字或者白底黑字是最佳的。
- 某些搭配 - 比如黑色和红色，黑色和蓝色，黄色和绿色 - 都会使人产生视觉疲劳甚至癫痫发作。
- 对于视力比较弱的读者，比较近的字母行间距会带有不小的阅读困难。
- 避免花哨的字体
高对比在线颜色测试：https://webaim.org/resources/contrastchecker/
5、WAI-AIRA
WAI-ARIA 是W3C编写的规范，定义了一组可用于其他元素的HTML 特性，用于提供额外的语义化以及改善缺乏的可访问性。
- 角色 — 定义了元素是干什么的。例如 role="navigation"
- 属性 — 我们能通过定义一些属性给元素。例如： aria-required="true"
- 状态 — 用于表达元素当前的条件的特殊属性。例如 aria-disabled="true"
更多文档：https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA
四、无障碍工具
1、在线测试站点
2、Chrome 无障碍检测
3、屏幕阅读器
ChromeVox、NVDA、JAWS 或VoiceOve
打开浏览器，开启屏幕阅读，Mac 通过 Command + F5 开启语言屏幕阅读，测试页面可读性。
更多内容 https://www.ibm.com/developerworks/cn/web/1010_sunqy_jaws/index.html
六、其他
中国信息无障碍联盟 http://www.capa.ac/
W3C无障碍指导纲领 https://www.w3.org/WAI/
浙公网安备 33010602011771号