一、Accessibility

1. Why Accessibility

  • Web Accessibility（网络无障碍辅助）用于创建每个人都能使用的网站的设计
  • Accessibility 的支持是辅助技术正确解读网页的必要条件
  • React 完全支持构建 accessible 网站，通过使用标准的 HTML 技术

2. 标准和指南

  1. <input
  2.   type="text"
  3.   aria-label={labelText}
  4.   aria-required="true"
  5.   onChange={onchangeHandler}
  6.   value={inputValue}
  7.   name="name"
  8. />

3. 语义化的 HTML

  1. import React, { Fragment } from 'react';
  3. function ListItem({ item }) {
  4.   return (
  5.     <Fragment>
  6.       <dt>{item.term}</dt>
  7.       <dd>{item.description}</dd>
  8.     </Fragment>
  9.   );
  10. }
  12. function Glossary(props) {
  13.   return (
  14.     <dl>
  15.       {props.items.map(item => (
  16.         <ListItem item={item} key={item.id} />
  17.       ))}
  18.     </dl>
  19.   );
  20. }
  23. function Glossary(props) {
  24.   return (
  25.     <dl>
  26.       {props.items.map(item => (
  27.         // Fragments should also have a `key` prop when mapping collections
  28.         <Fragment key={item.id}>
  29.           <dt>{item.term}</dt>
  30.           <dd>{item.description}</dd>
  31.         </Fragment>
  32.       ))}
  33.     </dl>
  34.   );
  35. }
  37. function ListItem({ item }) {
  38.   return (
  39.     <>
  40.       <dt>{item.term}</dt>
  41.       <dd>{item.description}</dd>
  42.     </>
  43.   );
  44. }
  • 语义化的 HTML 是 web 应用中 accessibility 的基础。使用各种 HTML 元素强化我们网站中的信息含义可以让我们获得 accessiblity，参看 https://developer.mozilla.org/en-US/docs/Web/HTML/Element
  • React 的 Fragments 能够将多个元素组合起来，如果它上面不需要加属性，可以使用简短语法

4. Accessible 表单

  1. <label htmlFor="namedInput">Name:</label>
  2. <input id="namedInput" type="text" name="name"/>
  • 每个 HTML 表单控件，比如 和