Interactive content must be usable by keyboard

Applicable Role(s): Developer

Overview

Not all site visitors use a computer mouse to navigate a webpage. Visitors that are blind or have vision disabilities may operate your site with a keyboard. Visitors that have a motor disability or a repetitive stress injury may also rely on a keyboard, or keyboard emulators like switch devices, eye-tracking software, and voice recognition.

Best Practices

Any functionality that can be done by a mouse should also be doable by the keyboard.

This is especially true for custom components, where the keyboard behavior has to be scripted in. While users should be able to get into all areas of a site, they should also be able to avoid keyboard traps, or get out of one.

Provide a focus indicator

Elements like links, buttons, form inputs, or custom interactive widgets need a focus indicator to tell the user where they are at on the page. This could be a border around an element, a highlight, change in background, or some other visual that clearly shows location on screen. The element also needs to meet color contrast requirements when focused.

Pattern Examples

This section has a series of interactive elements. Tab through to see how to interact with common web elements without a mouse, and see some example focus indicator states.

Links

I'm an example link (doesn't go anywhere)

I'm a second example link (doesn't go anywhere)

Buttons

Form elements

Tab to the radio input, then arrow up or down to select
Tab to each checkbox, then press the Space bar to select