WAI-ARIA
The Web Accessibility Initiative - Accessible Rich Internet Applications document contains techniques for building fully accessible JavaScript widgets.
All aria-* HTML attributes are fully supported in JSX. Whereas most DOM properties and attributes in React are camelCased, these attributes should be hyphen-cased (also known as kebab-case, lisp-case, etc) as they are in plain HTML
Semantic HTML
Sometimes we break HTML semantics when we add <div> elements to our JSX to make our React code work, especially when working with lists (<ol>, <ul> and <dl>) and the HTML <table>. In these cases we should rather use React Fragments to group together multiple elements.
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>
);
}
When you don’t need any props on the Fragment tag you can use the short syntax, if your tooling supports it
function ListItem({ item }) {
return (
<>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</>
);
}
Accessible Forms
Labeling
Although these standard HTML practices can be directly used in React, note that the for attribute is written as htmlFor in JSX
<label htmlFor="namedInput">Name:</label>
<input id="namedInput" type="text" name="name"/>
Focus Control
Programmatically managing focus
For example, by resetting keyboard focus to a button that opened a modal window after that modal window is closed.
function CustomTextInput(props) {
return ( <div><input ref={props.inputRef} /></div> );
}
class Parent extends React.Component {
constructor(props) { super(props); this.inputElement = React.createRef(); }
render() {
return ( <CustomTextInput inputRef={this.inputElement} /> );
}
}
this.inputElement.current.focus(); // set focus when required.