Keyboard access and visual focus

• Overview
• Guidelines
• Affected audiences
• Evaluate keyboard focus

---

Overview

Keyboard access and visual focus are crucial elements of web accessibility. Keyboard access ensures that users who cannot use a mouse or other pointing device can still navigate and interact with a website. Visual focus helps users understand where they are on a page and what elements are currently active.

Many different groups of people rely on keyboard-only access. Each has their own required or preferred technology, such as a standard or specialized keyboard, a screen reader, or speech recognition software. Prioritizing keyboard access and visual focus helps websites become more inclusive and user-friendly for all visitors.

Guidelines

The following should apply to your pages:

• You can easily tell what has focus. You should be able to 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.
• 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".
• Make sure there is a logical tab order. Ensure that your tabbing follows the expected, logical reading order. For example, for left-to-right languages: top to bottom, left to right in sequence.
• You can perform all expected tasks with the keyboard. You should not need the mouse to trigger actions, activate options, 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 is 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.

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.

Affected audiences

When designing a website, it is important to consider the needs of all users, including those with disabilities. People who use a keyboard or keyboard emulator include:

• People who use screen readers
• People who use braille devices
• People who use speech recognition software
• People who use switch devices
• People using a mouth stick with a modified keyboard
• People who use only a keyboard
• People experiencing hardware or device driver issues with their mouse or pointing device

By ensuring that your site is keyboard accessible, you can make it more inclusive and user-friendly for everyone.

Evaluate keyboard focus

In browsers that support keyboard navigation with the Tab key (Firefox, Edge, 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.

Enable keyboard navigation in macOS

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.

Items requiring special attention

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.

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.

Linked images

Check linked images for clear visual focus, and that they can be activated using the keyboard (usually by pressing the Enter key).