Zum Inhalt springen

Tastaturfokus nicht sichtbar

SchwerwiegendWCAG-Kriterium 2.4.7BFSG-relevant

Was ist das Problem?

Beim Durchlaufen der Seite mit der Tab-Taste ist nicht erkennbar, welches Element gerade den Fokus hat — die Fokus-Umrandung wurde entfernt oder ist unsichtbar. Tastatur-Nutzer verlieren die Orientierung und können die Seite praktisch nicht bedienen.

Warum ist das relevant?

WCAG 2.1 Erfolgskriterium 2.4.7 (Fokus sichtbar, Stufe AA) verlangt einen sichtbaren Tastaturfokus. BarriereWache prüft dies mit einem eigenen Tastatur-Kurztest über die ersten fokussierbaren Elemente — über den axe-Regelsatz hinaus. Relevant für die BFSG-Bewertung.

So behebst du es

Stelle den sichtbaren Tastatur-Fokus wieder her: Entferne pauschale outline: none / outline: 0-Regeln aus dem CSS. Wenn der Standard-Ring optisch stört, gestalte ihn statt ihn zu löschen: :focus-visible { outline: 2px solid #1f6d86; outline-offset: 2px; } — so bleibt Maus-Klick ohne Ring, Tastatur-Fokus aber sichtbar.

Shopware

Meist steckt ein globales outline:none im Theme-CSS: im Theme-Child suchen und durch eine :focus-visible-Gestaltung ersetzen.

Shopware gezielt prüfen

WooCommerce

Theme-CSS bzw. Customizer → „Zusätzliches CSS" nach outline:none durchsuchen und durch :focus-visible-Stile ersetzen. Auch Page-Builder-Einstellungen („Fokus-Rahmen entfernen") prüfen.

WooCommerce gezielt prüfen

Shopify

Im Code-Editor die CSS-Assets nach outline durchsuchen; aktuelle Themes bringen :focus-visible-Stile mit — eigene Overrides entfernen.

Shopify gezielt prüfen

WordPress

Im Child-Theme bzw. „Zusätzliches CSS" nach outline:none suchen und ersetzen; viele Themes bieten eine Option „Fokus-Stile" — aktivieren.

WordPress gezielt prüfen

TYPO3

Im Site-Package-CSS nach outline:none suchen und durch :focus-visible-Gestaltung ersetzen.

TYPO3 gezielt prüfen

Ist deine Website betroffen?

Der kostenlose Schnell-Check prüft bis zu 5 Seiten in wenigen Minuten — ohne Registrierung.

Kostenlosen Schnell-Check starten

Verwandte Regeln

Alle Regeln