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

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

2.标准和指南

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

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

3.语义化的HTML

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

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

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

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

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

4.无障碍表单

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

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

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

焦点管理示例插件：react-aria-modal

5.鼠标和指针事件

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

• 示例1：click事件

示例2：onBlur、onFocus

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