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 (that 3:1 figure follows from success criterion 1.4.11 and from the level AAA criterion 2.4.13 "Focus Appearance", not from 2.4.7 itself) and be designed consistently across the whole site, rather than differing from component to component.

Matching service

Sources

← Back to the glossary