Level AWCAG 2.2

2.1.1 Keyboard

All functionality is operable through a keyboard interface.

Why it matters

Motor impairments
Users who cannot use a mouse need to access all functionality with the keyboard alone.
Screen readers
Screen readers rely on the keyboard interface. If it cannot be operated by keyboard, it cannot be used.
Alternative input devices
Switch devices and voice control also operate through the keyboard API.
Efficiency
Power users work faster with the keyboard. Accessibility improves productivity for everyone.

Live demo

Keyboard interaction comparison

Tab and Enter to try the controls.

Button built with a div
Submit
Cancel
View details

It does not receive focus with Tab and does not react to Enter

Using a real button element

You can move focus with Tab and activate it with Enter or Space

Code
<div class="btn"
     onclick="submit()">
  Submit
</div>
Code
<button type="submit"
        onclick="submit()">
  Submit
</button>

Understanding through personas

Takahashi (28) — Cervical spinal cord injury

I can't use a mouse, so I operate the keyboard with a mouth stick. Buttons built with div elements don't receive focus and can't be clicked. If you just use the button element, I could do everything with Tab and Enter.

Checkpoints

References