Testing keyboard accessibility

Test that all interactive content is focusable and operable via keyboard.

To test web content, you must be familiar with the standard keyboard commands for navigating and operating web content.

For brief instructions on how to perform a simple keyboard accessibility test of any web page, see this YouTube video from TetraLogical: Quick Accessibility Test: Keyboard support.

Testing keyboard focus

Notice what happens when you use a keyboard to move focus between elements on the page.

1. Load or reload the web page.
2. Press the Tab key. Check that the following all work correctly.
3. Focus moves to the next item in the focus order.
4. There is no change of context (disorienting major change of content or focus) when the element receives focus.
5. The focused element’s position in the focus order is logical and does not change or confuse its meaning or operation.
6. The focused element shows a visible focus indicator.
7. Shift + Tab can be used to move focus to the previous item in the focus order.
8. Repeat step #2 until all focusable elements have been checked.

Tracking focus with document.activeElement

It’s not uncommon for visible keyboard focus to disappear — see Default indicators are not always visible.

There are different ways you can identify which element has focus:

• For a Chrome plugin and some bookmarklets that help you to see the focused element, see Force Focus Tools — Web Axe.
• For a browser plugin that highlights the visual sequence in which elements receive focus, see Microsoft’s Accessibility Insights for Web.
• In the console of your browser’s developer tools, use the document.activeElement property to programmatically identify which element has focus. See Console logging the focused element as it changes — Hidde de Vries.
• In Chrome, you can set up document.activeElement as a Live Expression that always identifies which element has focus. See Track element focus — Chrome Developers.

Testing keyboard operability

Check that you can reach and operate all user interface components using just the keyboard, unless some other keyboard accessible way to achieve the same outcomes is available — for example, a dropdown menu command that allows you to achieve the same outcome.

For an overview of keyboard commands to test with common user interface components, see Keyboard Testing — WebAIM.

For more complex or custom widgets, it’s usually expected that the standard keyboard methods will work in some way. If non-standard keystrokes are required to operate the widget by keyboard, make sure that these keystrokes are explained to the user in an accessible way.

For guidance on what keystrokes to test with for more complex interactive widgets, see Common keyboard interaction patterns.