Interactive content must be usable by keyboard

New in WCAG 2.2

Applicable Role(s): Developer


Not all site visitors use a computer mouse to navigate a webpage. Some people get around a webpage by using only keyboard controls. Some assistive technologies also act as keyboard emulators, which means they rely on keyboard controls working in order to function. This includes 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.

Elements on focus can't be completely obscured

Patterns like sticky headers/footers, full-width cookie banners, or dialogs can cover up the user's focus, making it harder to tell where they are at on the page. When using these features or similar:

  • Make sure the content is not obscured by providing enough margin to place the focused content above the sticky content.
  • For dialogs or banner content, making them modal by trapping keyboard focus in the component will keep the user's focus on the content until they interact or dismiss the content. This will keep the current focus visible.

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.


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

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


Form elements

Note: the following form elements don't submit any info. They are examples of focusable elements.

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

Keeping focus un-obscured

Accessible Example:

The header of the site is a sticky header, which persists in view at the top of the screen. When tabbing through the page, focus is always visible, even though the header is fixed.

While tabbing through a page navigation, a user can see which link as focus even with a sticky header