Digital Accessibility Knowledge Base

missing-focus-indication

Any operable UI element must have a visual focus indication

Who might be affected
Keyboard
Low Vision

Description

Keyboard users, and sometimes others with certain visual impairments, rely on the focus indication to perceive the currently active control and its position within the interface flow. When such an indication does not exist, these users have no way of knowing where they are in the interface and what actions they can perform.

Quick Fixes

Most user agents have a default style for the focus indication, which will do the work in most cases. However, if the user agent's default focus indication style works for you, ensure that no CSS rule overrides it. For example, most user agents are using the CSS "outline" property for the focus indication, so you should avoid rules like those shown below:

1✗ a:focus {
2    outline: none;
3}
4

5✗ button:focus {
6    outline-color: transparent;
7}

In case that you want to implement your own focus indication, you should ensure that it is prominently displayed, clear and not obscured by other elements. You can find more information about the recommended appearance of focus indication see this entry: insufficient-focus-indication (relevant if you need to meet WCAG 2.2 requirements)

How Users Are Affected

Since keyboard users do not directly point to the controls on the UI as a mouse user would, they need some indication of the currently active control. When such an indication is not present, the reliability of the interface is compromised, and users will lose confidence and may avoid using controls and even abandon the interface.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
2.4.7 Focus Visible (AA on WCAG 2.1, A on WCAG 2.2)