Accessibility basics
- React course
- Advanced
- Lesson 41/56
- 4 min
Learn why accessible components matter.
Accessibility basics
Accessibility (a11y) means anyone using a screen reader, keyboard or voice commands can use your app comfortably. Semantic HTML does most of the work: a <button> is naturally focusable and triggers on Enter.
For custom components you add meaning with role and aria-label. The tab order should match the visual order. Colour alone must never carry meaning; pair it with an icon or text.
Accessibility also comforts everyone who loves keyboard shortcuts.
ARIA and keyboard
ARIA is used only when semantic HTML falls short. The most common attributes are aria-label, aria-expanded and aria-hidden.
In a dropdown the toggle button should announce its state with aria-expanded. A keyboard user navigates with Tab and interacts with Enter and Esc.
Set tabIndex to 0 to put a custom element into the tab order; -1 allows programmatic focus only.
Practice Write the IconButton component
Write an IconButton component. Take a label prop and render a <button aria-label={label}> containing an <svg>. Export it.
Starter code
// Write the IconButton component hereSample solution
function IconButton({ label }) {
return (
<button aria-label={label}>
<svg width="16" height="16" />
</button>
);
}
export default IconButton;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which is the best choice for an accessible button?
- <button onClick={save}>Save</button> Correct answer
- <div onclick="...">Save</div>
- <span role="button">Save</span>
- <a href="#">Save</a>
Explanation: button is naturally focusable and keyboard friendly.
2 Fill in the blank: add state to the dropdown button
function Menu({ open }) {
return (
<button aria-expanded={____}>
Menu
</button>
);
}function Menu({ open }) {
return (
<button aria-expanded={open}>
Menu
</button>
);
}Explanation: aria-expanded takes the open value.
3 Match accessibility concepts
| Term | Meaning |
|---|---|
aria-label |
Label without visible text |
tabIndex 0 |
Into tab order |
role |
Adds meaning |
Esc |
Closes menu |