1.为什么使用无障碍辅助功能？

无障碍辅助功能是使得辅助技术正确解读网页的必要条件。

2.标准和指南

• WCAG网络内容无障碍指南（Web Content Accessibility Guidelines，WCAG） 为开发无障碍网站提供了指南。
• WAI-ARIA网络无障碍倡议 – 无障碍互联网应用（Web Accessibility Initiative – Accessible Rich Internet Applications） 文件包含了创建完全无障碍 JavaScript 部件所需要的技术。

注意： JSX 支持所有 aria-* HTML 属性

	<input
  type="text"
  aria-label={labelText}
  aria-required="true"
  onChange={onchangeHandler}
  value={inputValue}
  name="name"
/>

3.语义化的HTML

语义化的 HTML 是无障碍辅助功能网络应用的基础。

利用多种 HTML 元素来强化您网站中的信息通常可以使您直接获得无障碍辅助功能。

3.1：使用 React Fragments 来组合各个组件

3.2：可以把一系列的对象映射到一个 fragment 的数组中

3.2：当不需要在 fragment 标签中添加任何 prop 且你的工具支持的时候，可以使用 短语法：

4.无障碍表单

• 标记
• 所有的 HTML 表单控制，例如 <input> 和 <textarea> ，都需要被标注来实现无障碍辅助功能。
• for在JSX中被写作htmlFor

• 在出错时提醒用户
• 控制焦点
• 键盘焦点及焦点轮廓
• 跳过内容机制
• 使用程序管理焦点
• 用 DOM 元素的 Refs 在 React 中设置焦点

• 有时，父组件需要把焦点设置在其子组件的一个元素上。我们可以通过在子组件上设置一个特殊的 prop 来对父组件暴露 DOM refs 从而把父组件的 ref 传向子节点的 DOM 节点。

5.鼠标和指针事件

确保任何可以使用鼠标和指针完成的功能也可以只通过键盘完成。

• 示例1：click事件

6.更复杂的部件

7.其他考虑因素

• 设置语言
• 设置文档标题
• 可以使用 React 文档标题组件（React Document Title Component）来设置标题
• 色彩对比度

8.开发及测试

• 键盘
• 断开鼠标
• 使用 Tab 和 Shift+Tab 来浏览。
• 使用 Enter 来激活元素。
• 当需要时，使用键盘上的方向键来和某些元素互动，比如菜单和下拉选项。

• 开发辅助
• eslint-plugin-jsx-a11y插件
• 启用更多的无障碍规则，可以在项目的根目录中创建一个有如下内容的 .eslintrc 文件：

• 在浏览器中测试无障碍辅助功能
• aXe、aXe-core、react-axe
• WebAIM WAVE
• 无障碍辅助功能检测器和无障碍辅助功能树
• 屏幕朗读器
• 常用屏幕朗读器
• 火狐中的 NVDA
• Safari 中的 VoiceOver
• Internet Explorer 中的 JAWS
• Google Chrome 中的 ChromeVox