On this page

Keyboard Access and Visual Focus

What is expected

A visible keyboard focus 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.

Who is impacted

  • 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.

What to check for

Can you tell what has focus?

Can you easily tell which element has focus, e.g., 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.

Can you tab to all the interactive things?

Check that you can get to the interactive elements, including links, form fields, buttons, and media player controls.

Can you tab away from those 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”.)

Is there 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 users.

Can you 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.

Can you get to all items in the 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 Space bar to select that item.

Can you 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). An office in the US government’s General Service Administration has created a nice guide to performing keyboard-only accessibility testing, which you may find helpful and easy to follow.

How to check this

In browsers that support keyboard navigation with the Tab key (Firefox, IE, Chrome, Safari; not Opera):

  • Reload the web page, 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.

  • 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”.