Chapter 6 of 8 · 4 practices · 2 min · 4-question quiz
Accessibility
React does not make an app accessible on its own. These practices cover semantic markup, labels, focus and how to check your work.
Start: Use native HTML elements before ARIA4 practices in this chapter
- 1Use native HTML elements before ARIAA
<button>is focusable, works with Enter and Space, and is announced as a button by screen readers. A<div onClick>does none of that unless you add a role, a tab index and key handlers, and… - 2Give every form control a visible labelEvery input needs a label that is connected to it, either by wrapping the input in
<label>or by matchinghtmlForto the input'sid. - 3Move focus deliberately when content changesKeyboard and screen reader users follow focus. When content changes and focus does not, they lose their place. Dialogs: when one opens, focus moves into it and stays there until it closes, then…
- 4Test every screen with the keyboard and an automated checkerAccessibility problems are easy to miss with a mouse. Use two checks and add both to your definition of done for new UI.
Check yourself on this chapter
4 questions, right here once you are signed in. Your progress is saved as you read.