This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
Accessibility
Why must keyboard focus be visible on a website?
Keyboard focus must be visible, because otherwise keyboard users navigate blind: without a visible marker — usually a coloured outline around the active element — it's impossible to tell which element is currently selected and what Enter would trigger next. Many designers remove this outline for visual reasons and thereby lock keyboard users out. WCAG criterion 2.4.7 requires a visible focus indicator.
The focus outline is the keyboard's mouse pointer
Mouse users can see at any time where their pointer is. Keyboard users have the focus outline for that: it moves to the next element with every press of the Tab key and shows what Enter would trigger. If this outline disappears, operation turns into guesswork — like using a mouse with an invisible pointer. The most common cause is a single line in the style rules that turns off the browser's default outline, because it was felt to be disruptive. The right solution is never removal, but design: an outline in your brand colour, strong enough to stand out against any background.
How the audit service measures focus visibility with a pixel comparison
The audit service photographs every checked control element twice: once without focus, once with it. It then compares both images pixel by pixel. If focus changes fewer than 0.2 percent of the pixels around the element, the focus indicator is practically invisible — the criterion counts as violated, and the report names the affected element along with a supporting screenshot. The measurement detects restless surroundings, such as from animations, through an initial comparison of two images with no focus, and excludes such elements from the assessment. The report additionally notes when the style rules turn off focus outlines across the board.
Examples
Focus frame removed
*:focus { outline: none; }:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; }outline: none makes the keyboard operation blind.:focus-visible shows the frame only at keyboard, not at mouse click.
- Tab through your homepage and watch: is it clear at every stop which element is currently selected?
- Ask your agency to remove any rule that turns off the focus outline across the board.
- Have a styled focus outline defined in your brand colour — strong enough for both light and dark backgrounds.
- Check focus on images and coloured areas too — a thin grey outline disappears quickly there.
