Semantics and Keyboard

Why this module exists here rather than at the end. Components make it unusually easy to lose accessibility without noticing. A component named Button that renders a styled div looks completely fine in the browser and is unusable without a mouse. Nothing in your editor will tell you.

The rules that carry most of the weight.

Use the element that already does the job. A button for actions, a link for navigation, a real input with a real label.

Every input has a label tied by htmlFor and id. A placeholder is not a label.

Every image has alt, empty when it is decorative.

Everything must work from the keyboard alone.

The same control, twice

Unusable

<div
  className="btn"
  onClick={open}
>
  Open
</div>

Correct

<button
  className="btn"
  onClick={open}
>
  Open
</button>

Compare → The left cannot be tabbed to, does not respond to Enter or Space, and is announced as nothing in particular. The right gives you all three for free. They can look identical.

The test that takes one minute. Put the mouse away. Tab through the whole interface. Can you reach everything? Can you tell where you are? Can you activate every control and get back out of every menu?

If you cannot, neither can a substantial number of the people you built it for.

Mark this lesson complete

Signed in, your progress follows you to every device.

Next: Announcing What Changed →

← Back