Keyboard access and visual focus
On this page:
Expectation
A visible keyboard focus is a cue like a border or highlight that moves as you tab through the web page. Keyboard focus should follow a logical order through the page elements.
Affected audiences
- People who are blind
- Sighted people with mobility impairments, who rely on a keyboard
- Sighted people, who use assistive technologies that rely on keyboard (voice input, dictation, etc.), or mimic a physical keyboard
- Sighted people, whose computer may have just experienced a hardware malfunction or a device driver problem with their mouse or other pointing device
Evaluate keyboard focus
What to check
Make sure the following apply to your pages:
- You can easily tell what has focus. You should be able easily tell which element has focus (for example, links have an outline around them or are highlighted). Check that the focus remains visible in the browser window as you tab through the elements.
- You can tab to all interactive things. Check that you can get to the interactive elements, including links, form fields, buttons, and media player controls.
- You can tab away from interactive things. Check that you can tab away from all elements that you can tab into. (A common problem is the keyboard focus gets caught in media controls or a modal dialog, and you cannot get out; when that happens, it is a "keyboard trap".)
There is a logical tab order. Ensure that your tabbing follows an expected, logical reading order. For example, for left-to-right languages: top to bottom, left to right in sequence.
Check that you can perform all expected tasks with the keyboard. You shouldn't need the mouse to trigger actions, activate options, visible changes, and other functionality. A common problem is that some functionality is available only via mouse clicks or hovering, which makes it inaccessible for some people.
- You can perform all tasks in a predictable way. It's not enough to be able to do everything with the keyboard, but doing it should follow the predictable patterns of keyboard interaction so there are no surprises.
You can get to all items in drop-down lists. Check that once you tab into a drop-down list, you can use the arrow keys to move through all the available options without triggering an action. A common problem seen in drop-downs used for navigation is that when you arrow down, it automatically activates the first item in the list and goes to the new page. That effectively blocks you from getting to the other items in the list.
To select a specific item within a drop-down list:
- Tab into the list box.
- Use the arrow keys to move the focus to items.
- When an item has focus, press the
Enter
key or Spacebar to select that item.
- You can see which images are linked. Check linked images for clear visual focus, and that they can be activated using the keyboard (usually by pressing the
Enter
key).
For more, see the General Service Administration's guide to performing keyboard-only accessibility testing. For a demonstration, view TetraLogical's 1-minute Quick accessibility test: Keyboard support video.
How to check
In browsers that support keyboard navigation with the Tab
key (Firefox, Edge, Chrome, Safari; not Opera):
- Reload the web page, and then put your mouse aside and do not use it.
- Press the
Tab
key to move forward through the elements on the page. - Press
Shift-Tab
to move backwards.
In macOS, you first must enable keyboard navigation to all controls to be able to tab through web pages, and then enable "highlighting of each item" in Safari.
- Newer macOS: Select . Select the option button.
- Older macOS: Select . In the "Full Keyboard Access" section, check .
- Safari: Select . In the "Accessibility" section, check .
This is document aryr in the Knowledge Base.
Last modified on 2023-10-04 10:58:54.