Keyboard access and visual focus

On this page:


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:

    1. Tab into the list box.
    2. Use the arrow keys to move the focus to items.
    3. 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, IE, Chrome, Safari; not Opera):

  1. Reload the web page, and then put your mouse aside and do not use it.
  2. Press the Tab. key to move forward through the elements on the page.
  3. 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 System Preferences > Keyboard > Shortcuts. Select the All controls option button.
  • Older macOS: Select System Preferences > Keyboard > Keyboard Shortcuts. In the "Full Keyboard Access" section, check All Controls.
  • Safari: Select Preferences > Advanced. In the "Accessibility" section, check Press Tab to highlight each item on a web page.

This is document aryr in the Knowledge Base.
Last modified on 2021-05-27 13:55:34.