Overview
Many people interact with, navigate, and read digital content either primarily or exclusively using a keyboard, instead of using a mouse, trackpad, or touchscreen. This includes people with limited use of their hands and people who use screen readers (including people who are blind or who have low vision). Additionally, some people with limited use of their hands and people who cannot use a keyboard or mouse (including people with missing limbs, limb differences, quadriplegia, etc.) may use an alternative input device that relies on keyboard emulation.
All functionality of your digital content must be accessible via the keyboard alone. This includes standard content navigation, using menu options, and filling out forms. If any functionality is not accessible from the keyboard, some users will be prevented from using it, and if keyboard focus becomes "trapped" at any point, all use of the content may be blocked.
Guidelines
Focus Order
- All interactive content must be accessible using the keyboard. This includes links, buttons, forms, and controllable elements like image carousels. It does not include images, headings, and standard text (unless they are links or are otherwise interactive).
- Elements must receive focus in a logical reading order. This is generally left-to-right, top-to-bottom for English-language content, but may vary slightly if someone would reasonably read or use the content in a different order.
- Standard interactive HTML elements (links, inputs, etc.) automatically receive keyboard focus, and receive focus in the order in which they appear in the code. Custom content or content that needs to receive focus in a different order (or that needs to have focus suppressed) needs to have it manually assigned, typically via the
tabindex
attribute.
Visual Focus Indicators
- When an element receives keyboard focus, it must be visually indicated, so that users knows where they are on the page and which element will be activated if they take an action.
- Focus indicators must have sufficient contrast (a 3:1 contrast ratio) against the background, whether the indicator is a box added around the element, a change in element color (often used for buttons), or a change in background color (often used in dropdowns).
- Ideally, this focus indicator should be consistent for all elements on a page. A box added around an element is usually the best option for this purpose.
- Ensure that the visual focus indicator is obvious and noticeable.
- Keyboard focus indicators do not have to match mouse hover indicators.
Maintain State
- If the state of the content changes, such as a dialog box opening up, the keyboard focus should shift to the first element in that box. Closing the box should return the keyboard focus to where it was before the change of state.
- The user changing focus should never cause new pages to open (dialogs and popups are OK), forms to submit, or page content to change in a substantial or irreversible way.
- There should not be any “keyboard traps”, windows, options, or other states where a user is unable to back out of their current selection without reloading the page.
How to Test
Keyboard navigation can be done manually without any special tools. Keyboard navigators use the following keys to navigate around the pages:
- Tab, to move forward through the content.
- Shift-Tab, to move backwards through the content.
- Enter, to activate the current element.
- Escape, to back out of any open prompts or dialog boxes.
- Arrows, especially when navigating dropdown menus, and for some types of tabular content like spreadsheets.
- Less commonly, Spacebar is used as an alternative to Enter for selecting items, especially in forms.
Tab through all the elements on the page, then shift-tab back up to the top. Verify every interactive element is accessible, that the items receive focus in a logical reading order, that each item has a consistent visual focus indicator.
Select interactive items and verify they behave the same as if you clicked on them with a mouse.
Open up menus or dialog boxes, if applicable, and verify you are able to back out of them with the escape key. Verify that these actions do not substantially change the state of the page.