Visible focus indicator
Users who navigate using tabs always know where they are. No disappearing outline.
What does "Visible Focus Indicator" mean?
The focus indicator is the visible marker that shows which element is currently being selected via the keyboard. The browser default is usually a thin blue outline. Many themes remove this outline ("it looks ugly") — thus breaking keyboard navigation for anyone not using a mouse.
Obligation and Benefit — WCAG 2.4.11.
WCAG 2.4.11 (Focus Appearance) Requires a focus indicator with a clear visual distinction—at least 2 CSS pixels thick, with a 3:1 contrast ratio to its surroundings. Without a visible focus, keyboard navigation is virtually impossible (you don't know where pressing Enter will take you). Also required: :focus-visible Separates mouse click (no outline needed) from tab focus (outline required) — clean UX.
How we will solve it specifically.
- Global focus style: 3 px solid brand color + 3 px offset, border-radius 6 px — highly visible, AAA contrast.
:focus-visibleinstead of:focusMouse clicks do not receive an outline, but tab focus does.- Never global
outline: nonewithout replacement. - Custom components (carousels, custom dropdowns) are explicitly given their own focus states.
- Verification: Keyboard walkthrough — each interactive element must be clearly identifiable when in focus.
Related building blocks of our module suite
-
Accessible forms
WCAG 3.3.1Clear labels, programmatic error handling, validation — no browser bubbles, no „please fill in".
-
AAA contrasts, tested per component
WCAG 1.4.6≥ 7:1 for text, ≥ 4.5:1 for large font — tested per component, not per page sample.
-
Skip links & semantic landmarks
WCAG 2.4.1The keyboard jumps directly to the main content — without having to navigate through the navigation and header.
-
Plain language (AI-supported)
WCAG 3.1.5Content simplified at the touch of a button — for people with reading difficulties, language learners and those in a hurry.
Do you need this exact module?
15-minute initial consultation — we'll clarify whether it's relevant for your site.
Further information:
BFSG overview ·
Performance overview ·
BAFA funding ·
FAQs
