无障碍辅助功能(精读React官方文档—13)

什么是无障碍辅助功能？

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

解读

无障碍辅助功能指的是一种可以帮助所有人获得服务的设计和创造。

标准和指南

网络内容无障碍指南（Web Content Accessibility Guidelines，WCAG） 为开发无障碍网站提供了指南。

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

解读

虽然React大多数的DOM变量和属性命名都使用驼峰命名法，但是在无障碍辅助这方面JSX 支持所有 aria-* HTML 属性。aria-* 应该像其在 HTML 中一样使用带连字符的命名法。

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

语义化的HTML

官方描述：语义化的 HTML 是无障碍辅助功能网络应用的基础。 利用多种 HTML 元素来强化您网站中的信息通常可以使您直接获得无障碍辅助功能。

import React, { Fragment } from 'react'; function ListItem({ item }) { return ( <Fragment> <dt>{ item.term}</dt> <dd>{ item.description}</dd> </Fragment> ); } function Glossary(props) { return ( <dl> { props.items.map(item => ( <ListItem item={ item} key={ item.id} /> ))} </dl> ); }

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