React 完全支持构建可访问的网站, 通常使用标准的 html 技术.
1, 可访问小部件
ARIA https://www.w3.org/WAI/standards-guidelines/aria/ 文档包含用于构建完全可访问的 JavaScript 小部件的技术.
JSX 完全支持所有 aria- * HTML 属性. 尽管 React 中的大多数 DOM 属性和属性都是 camelCased 的, 但这些属性应该是小写的:
- <input
- type="text"
- aria-label={labelText}
- aria-required="true"
- onChange={onchangeHandler}
- value={inputValue}
- name="name"
- />
2,html 语义
语义 HTML 是 web 应用程序可访问性的基础. 使用各种 HTML 元素来加强我们网站中信息的含义通常会使我们免费获得可访问性.
有时我们在向我们的 JSX 添加 < div > 元素以使我们的 React 代码正常工作时, 特别是在处理列表 (<ol>,<ul > 和 < dl>) 和 HTML <table > 时, 会破坏 HTML 语义. 在这些情况下, 我们应该使用 React Fragments 将多个元素组合在一起.
当使用一个 key prop 时可以使用 < Fragment>
- import React, { Fragment } from 'react';
- function Glossary(props) {
- return (
- <dl>
- {props.items.map(item => (
- // Without the `key`, React will fire a key warning
- <Fragment key={item.id}>
- <dt>{item.term}</dt>
- <dd>{item.description}</dd>
- </Fragment>
- ))}
- </dl>
- );
- }
也可以在任何地方使用<></>
- function ListItem({ item }) {
- return (
- <>
- <dt>{item.term}</dt>
- <dd>{item.description}</dd>
- </>
- );
- }
- 3,label for
- <label htmlFor="namedInput">Name:</label>
- <input id="namedInput" type="text" name="name"/>
的
来源: http://www.bubuko.com/infodetail-2648537.html