Accessibility is an important consideration when building modern web apps. React provides useful tools to make accessible, inclusive products.
Let’s look at some best practices for web accessibility with React:
Semantic HTML
Use proper HTML semantics. For example:
// Good
<button>Save</button>
// Avoid
<div onclick="save">Save</div>
Semantic HTML is parsed correctly by screen readers.
alt Text
Images should have alt text describing content/purpose:
<img src="logo.png" alt="Company logo" />
Screen readers can’t interpret images. alt text substitutes meaning.
ARIA Roles
ARIA roles describe non-semantic elements:
<div role="button">Add</div>
This makes the <div> behave like a button for assistive tech.
Focus Management
Manage focus properly for keyboard/screen reader users:
function Login() {
const [focused, setFocused] = useState(false);
return (
<>
<input
onFocus={() => setFocused(true)}
onBlur={() => setFocused(false)}
/>
<button tabIndex={focused ? -1 : 0}>Submit</button>
</>
);
}
This shifts focus control to the <input> when focused.
Accessible Forms
Label form fields correctly:
<label htmlFor="name">Name</label>
<input id="name" />
Associates labels with inputs via the htmlFor attribute.
Summary
- Use proper semantic HTML
- Provide image alt descriptions
- Apply ARIA roles appropriately
- Manage focus and keyboard interaction
- Label form fields clearly
Building accessible React apps improves experience for all users.
