Accessibility rule: Keyboard focus indicator is missing, explained

Summary

A focus indicator shows keyboard users which element is currently active on a page. Without it, users may not be able to navigate or interact with content effectively, especially those relying on keyboard navigation.

Overview

A focus indicator is visually presenting to keyboard users which part of the web page they are focusing on. Without a focus indicator, it would be very hard for a keyboard user to know where they are on a page. When an interactive element is receiving focus, it is ready for user input. In practice, when you focus on a search function, it would be ready to receive text, or if you focus on a button, it would be ready to be pressed.

You could say, that the focus indicator is to keyboard users what the mouse cursor is to mouse users. And anything you can interact with a keyboard, should have a focus indicator.

Below, are two images showing a "contact us" button with and without a focus indicator.

Contact us -button

Contact us -button, focused

Who is impacted by this?

Who is impacted by this barrier?

Using a mouse requires a lot of fine muscle control. Using a traditional or modified keyboard allows people who have motor disabilities, tremors, or little or no use of their hands, to navigate on a website. There are also a lot of users, who may use keyboard navigation for efficiency. All these users need focus indicators to be present when navigating a website.

How this is evaluated (or how it works)

How does the check work?

It is not always possible with 100% certainty to detect automatically if the focus indicator is present for all focusable elements, which is why this check, oftentimes, requires input. You would need to, in other words, confirm if the focus indicator is applied consistently across the page, on all focusable elements. Once the potential issue is confirmed, it will be added to the Issues list.

In technical terms, the check uses CSS classes :focus, :focus-visible,, and :focus-within to determine, if the focus indicator is present. A common situation where automation is not able, by itself, to detect if the focus indicator is present is when the focus indicator is injected on the website using JavaScript, instead.

The potential issue is called: Is it clear which page element has focus from the keyboard?

What this article does not cover

You can read more about the rule, in the technical documentation.