【React高级】一、无障碍辅助功能

1. 为什么我们需要无障碍辅助功能？
   网络无障碍辅助功能（Accessibility，也被称为 a11y，因为以 A 开头，以 Y 结尾，中间一共 11 个字母）是一种可以帮助所有人获得服务的设计和创造。无障碍辅助功能是使得辅助技术正确解读网页的必要条件。

React 对于创建可访问网站有着全面的支持，而这通常是通过标准 HTML 技术实现的。

2. 注意：JSX 支持所有 aria-* HTML 属性。虽然大多数 React 的 DOM 变量和属性命名都使用驼峰命名（camelCased），但 aria-* 应该像其在 HTML 中一样使用带连字符的命名法（也叫诸如 hyphen-cased，kebab-case，lisp-case)。
3. 有时，语义化的 HTML 会被破坏。比如当在 JSX 中使用
   元素来实现 React 代码功能的时候，又或是在使用列表（

   ，
   和

   ）和 HTML 时。 在这种情况下，我们应该使用 React Fragments 来组合各个组件

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

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

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

   4. 所有的 HTML 表单控制，例如 和 ，都需要被标注来实现无障碍辅助功能。我们需要提供屏幕朗读器以解释性标注。</li> </ol> <p>以下资源向我们展示了如何写标注：</p> <p>W3C 向我们展示如何标注元素<br> WebAIM 向我们展示如何标注元素<br> Paciello Group 解释什么是无障碍名称</p> <pre><code><label htmlFor="namedInput">Name:</label> <input id="namedInput" type="text" name="name"/> </code></pre> <p><a href="https://react.docschina.org/docs/accessibility.html" target="_blank">https://react.docschina.org/docs/accessibility.html</a></p>