Accessibility rule: Keyboard focus indicator is missing, explained

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 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 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.
You can read more about the rule, in the technical documentation, here.

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

How do I check if the focus indicator is present?

When answering the potential issue, the easiest way to make sure the focus indicator is present is to perform a manual keyboard test by using the tab key to confirm, if the focus indicator is always present and visible. This should be performed on the live page rather than in the page report.