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.
- 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.
FAQ
What is the focus outline on a website?
The focus outline is the visible marker around the currently active control element — usually a coloured border around a link, button, or input field. It moves on with every press of the Tab key and shows keyboard users what Enter would trigger. Browsers come with a default outline; websites may restyle it, but never remove it with nothing to replace it.
Why do designers remove the focus outline?
Because the browser's default outline can briefly flash even on a mouse click, and some find that jarring. But turning it off hits the wrong people: mouse users barely notice the difference, while keyboard users lose their only means of orientation. The clean solution is a styled outline in your own brand colour — it fits the design and stays visible.
How does the audit service check whether focus is visible?
With an actual pixel comparison: every checked element is photographed without and with focus, and both images are compared pixel by pixel. If focus changes fewer than 0.2 percent of the pixels, the indicator counts as invisible and the criterion as violated — with a supporting screenshot in the report. The measurement excludes elements in restless, animated surroundings from the assessment.