Definition: A focus indicator is the visible marker on the element that currently has keyboard focus – usually an outline around a link, button or input field. Without it, people using a keyboard cannot tell where they are on the page. WCAG 2.4.7 Focus Visible requires it at Level AA [1].
German: Fokusindikator · Also: focus ring, focus outline · Last reviewed: 27 September 2026
Who needs it
With a mouse, you can see what you are pointing at. With a keyboard, only the focus indicator shows which element will respond to Enter next. That matters to sighted people who use a keyboard or switch because of a motor disability, to people using a screen magnifier who only see part of the page, and to everyone who is simply faster on the keyboard. Without visible focus, a page is guesswork: every press of Tab could land anywhere.
What WCAG requires
- 2.4.7 Focus Visible (AA): there is a visible focus indicator [1].
- 2.4.11 Focus Not Obscured (Minimum) (AA, new in WCAG 2.2): the focused element is not entirely hidden by the page's own content, such as a sticky header or a cookie banner [2].
- 2.4.13 Focus Appearance (AAA): sets a minimum size and contrast for the indicator. Level AAA is not normally mandatory, but it is a good benchmark [3].
In code
/* Failure: outline removed, no replacement */
:focus { outline: none; }/* Better: clear, for keyboard focus only */
:focus-visible {
outline: 3px solid #1a1a1a;
outline-offset: 2px;
}
/* Sticky header: leave room when scrolling */
html { scroll-padding-top: 5rem; }:focus or :focus-visible?
:focus always applies, including on a mouse click. :focus-visible lets the browser decide: it shows the style for keyboard use and usually not when a button is clicked. Text fields normally show it after a click too [4]. For design teams, :focus-visible is often the compromise that saves the outline.
Common mistakes
outline: nonein a reset stylesheet, with no replacement anywhere after it.- An outline in the background colour. On a dark blue button, a dark blue outline is invisible.
- Only a slight change in text colour, which hardly anyone notices.
- A sticky header covering the focused element when tabbing backwards.
- Focus on invisible elements, such as links in a collapsed menu that has been moved off-screen rather than hidden.
How Reviseberg handles it
Before the first press of Tab, the keyboard agent records how every focusable element looks without focus. At each step it compares the focused element with that baseline – on the element itself, its ::before and ::after, and its parent. If nothing visible changes, it reports keyboard:focus-visible. If focus lands on something with no size or off-screen, it reports keyboard:focus-invisible. If an element already draws an outline or shadow without focus, the agent cannot tell the indicator from the design and marks the step for a person rather than guessing. It does not measure the indicator's contrast or size, and axe-core on its own does not check focus indicators at all.
Related terms
Focus order · Keyboard accessibility · Skip link · Non-text contrast · Screen magnifier