Focus Indicator

A focus indicator is the visual marker showing which element currently holds keyboard focus, and it is essential for everyone operating a website without a mouse – required by WCAG success criterion 2.4.7 (Focus Visible).

In practice

outline: none should never be set without a visible replacement, otherwise focus disappears entirely for keyboard users. The :focus-visible pseudo-class lets you show the focus ring only during keyboard operation, without it getting in the way on mouse clicks. The indicator should have a contrast of at least 3:1 against its surroundings and be designed consistently across the whole site, rather than differing from component to component.

Matching service

Sources

← Back to the glossary