Dominic2583
Dominic2583

React高级指引：无障碍

上一节：以React的方式思考
下一节：代码分割

React高级指引：无障碍

  • 为什么要使用无障碍辅助功能
  • 标准和指南
    • WCAG
    • WAI-ARIA
  • 语义化的HTML
  • 无障碍表单
    • 标签
    • 向用户提醒错误
  • 控制焦点
    • 键盘焦点及焦点轮廓
    • 跳过内容的机制
    • 以编程方式管理焦点
  • 鼠标和指针事件
  • 更复杂的部件
  • 其他需要考虑的点
    • 设置语言
    • 设置文章标题
    • 色彩对比度
  • 开发与测试工具
    • 键盘
    • 开发辅助
      • eslint-plugin-jsx-a11y
      • 在浏览器测试无障碍辅助功能
        • aXe, aXe-core and react-axe
        • WebAIM WAVE
        • 无障碍辅助检测器和无障碍辅助树
      • 屏幕朗读器
      • 常用的屏幕朗读器
        • Firefox的NVDA
        • Safari的VoiceOver
        • IE的JAWS
      • 其他屏幕朗读器
      • 谷歌Chrome的ChromeVox

为什么要使用无障碍辅助功能

网络无障碍辅助功能（也成为a11y）能够被任何人使用的网站功能。无障碍辅助功能是允许辅助性技术解释网站所必需的。

React通过使用标准HTML技术支持构建无障碍辅助网站。

标准和指南

WCAG

网络内容无障碍指南( Web Content Accessibility Guidelines ) 为构建无障碍网站提供了指南。

以下清单概述了WCAG的内容：

  • Wuhcag提供的WCAG清单（WCAG checklist from Wuhcag）
  • WebAIM提供的WCAG清单（WCAG checklist from WebAIM）
  • A11Y project提供的清单（Checklist from The A11Y Project）

WAI-ARIA

网络无障碍协议-无障碍互联网应用（Web Accessibility Initiative - Accessible Rich Internet Applications）包含了构建无障碍JavaScript部件所需的技术。

所有以aria-开头的HTML属性在JSX中都是支持的。然而React中大部分DOM属性都是小驼峰命名格式的（camelCased），但是aria-*则还是按照HTML中的带连字符的命名格式（也称为hyphen-cased、 kebab-case、lisp-case等）：

语义化的HTML

在Web应用中，语义化的HTML是无障碍辅助功能的基础。使用多种HTML来强化网站中的信息通常会让用户直接获得无障碍辅助功能。

  • MDN HTML 元素参考

有时候我们为了符合React的语法在JSX中加入

元素，但这破坏了HTML的语义，这点在使用列表（
    ，
      或
      ）或者时更加突出。在这些场景下我们应该使用React Fragment来组合其他元素。

      实例：

       import React, { Fragment } from 'react';

function ListItem({ item }) {
  return (
    
      
      {item.term}
      
      
      {item.description}
      
          
  );
}

function Glossary(props) {
  return (
    
      
      {props.items.map(item => (
        
      ))}
    
      
  );
}

      和其他元素一样，你可以把把元素映射到fragement数组中。

      function Glossary(props) {
  return (
    
      
      {props.items.map(item => (
        // Fragments should also have a `key` prop when mapping collections
        
          
      {item.term}
      
          
      {item.description}
      
              
      ))}
    
      
  );
}

      如果你的开发工具支持且不需要使用props，你可以使用最短语法：

      function ListItem({ item }) {
  return (
    <>
      
      {item.term}
      
      
      {item.description}
      
    
  );
}

      想要了解更多，请查看Fragment。

      无障碍表单

      标签

      每一个表单控制，例如,