Interactive content must be usable by keyboard
New in WCAG 2.2
Overview
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.
Links
I'm an example link (doesn't go anywhere)
I'm a second example link (doesn't go anywhere)
Buttons
Form elements
Note: the following form elements don't submit any info. They are examples of focusable elements.
Keeping focus un-obscured
Accessible Example: ashlar.wwu.edu
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.
