Mit der Tab-Taste kann man sich auf der Seite bewegen. Dabei sieht man immer, wo man ist. Die Markierung verschwindet nicht.
Der Fokus-Anzeiger zeigt, auf welchem Teil der Seite man mit der Tastatur ist. Am Anfang ist das oft eine dünne, blaue Linie. Manche Designs nehmen diese Linie weg, weil sie sie nicht schön finden. Dann kann man die Seite nicht mehr mit der Tastatur benutzen.
Es gibt eine Regel, die klare Markierungen verlangt. Die Markierung muss mindestens 2 Mal so dick sein wie ein Punkt auf dem Bildschirm. Es muss ein starker Kontrast zum Hintergrund da sein. Ohne diese Markierung weiß man nicht, wohin man springt. Auch wichtig: Der Mauszeiger braucht keine Markierung, die Tastatur schon.
Wir bieten ein erstes Gespräch an. Wir finden heraus, ob das Thema wichtig für Ihre Seite ist. Weitere Infos: Übersicht über Barrierefreiheit, unsere Leistungen, Förderung, Antworten auf häufige Fragen.
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
