keyboard-focus-visible

Ensure that all components with keyboard focus are visually identifiable.

Description

Whenever a user interfacing element receives keyboard focus, it must be visually identifiable. The best technique to visually distinguish an element that receives focus is to use a visible border.

Users with visual difficulties like color blindness might struggle to identify which element has keyboard focus. To improve the user experience of such users, elements that receive keyboard focus need to be visually identifiable.

The most efficient way to distinguish elements with keyboard focus is to use a visually identifiable border.

Example

Consider the following image:

The button ‘Seasonal Dishes’ has keyboard focus. Although the appearance of the button changes slightly, it is hard to differentiate it from the background.

In contrast, consider the following image:

Here, the button ‘Seasonal Dishes’ gets a bright purple background when it receives keyboard focus. This contrast from the grey background and the bold text makes it easy for a user to identify that the button has keyboard focus.

In the following example code, it is not easy to visually identify if the button has keyboard focus. This is because it doesn’t have a border (outline: none) when it receives focus.

The following sample code corrects the issue in the earlier example:

The following features help to distinguish the button whenever it receives focus:

• A bright orange (#ff5722) outline for the border.
• A yellow (#ffeb3b) shadow effect.
• An outline-offset for visual separation from the button.

How to fix?

Follow these steps to fix any violations in the keyboard-focus-visible rule:

• Add a visible border when an element receives keyboard focus. A contrast ratio of 3:1 between the focussed and non-focussed states is ideal.
• Use a contrasting two-color focus indicator to ensure visibility on both light and dark backgrounds.
• Use the default browser focus indicator to highlight elements in focus.

Reference

• WCAG 2.4.7: Focus Visible (Level AA)
• Technique G195