Implementing Accessible Visual Focus Indicators

Introduction

One aspect that is often overlooked when maintaining digital accessibility is visual focus indicators, which are defined as the visual cues that indicate which element is currently active or in focus.
 
Focus indicators are visual cues that distinguish elements that are currently active or focused on a webpage. They help users who rely on keyboards for site navigation or other assistive technologies, ensuring they can identify and interact with elements seamlessly.

Visual focus indicators are put in use when a user uses a keyboard to navigate (often done through the 'tab' key) to a specific element or a mouse to hover over an element. These elements usually have a visual appearance change to signify the element has the current focus.

Interactive elements should have a visual indicator when they are in focus. These include items such as links, form elements, menus, and buttons. In essence, anything a user can click should have a visual focus indicator.

Importance of Visual Focus Indicators

Visual Focus Indicators are crucial for users with motor impairments and users who rely on keyboards for site navigation. Those with attention deficits also benefit from being able to discover where the focus is located. They inform the user what element is currently active within a website or application. It also allows users to quickly determine where their keyboard focus or mouse is on the page. These visual cues help users process large amounts of information.

Implementing Visual Focus Indicators


Contrast and Visibility

To ensure users can clearly see the visual focus indicator, they must maintain sufficient color contrast against the background, so they are easily distinguishable from the focused and unfocused states. Visual focus indicators should have a contrast ratio of at least 3:1 against the background.

Consistency in Design

All visual focus indicators throughout your website or application should be consistent in presence and styling. This reduces confusion and improves the usability of your website or application.

The image below shows an example of a visual focus indicator. The blue border that appears around the Cal Poly Pomona logo in the top left corner indicates that the element is currently in focus.

Cal Poly Pomona homepage with a blue border around the Cal Poly Pomona logo in the top left corner.

General Test

  1. Begin in the browser address bar, as it forces focus to start at the top of the page
  2. Use the Tab key, navigate through all elements until you reach the bottom of the page. You can use Shift + Tab to navigate back one element

Verify that:

  1. All interactive elements display a visual focus indicator when in focus
  2. There are no instances when focus disappears
  3. Visual focus is easy to identify

WCAG 2.1 and References


Guideline 2.1 Keyboard Accessible: All Functionality Available From a Keyboard (WCAG)