Design Systeme und Komponenten
Besonders relevant für Buttons, Inputs, Menüs, Tabs und Dialoge.
CSS und HTML eingeben
Fügen Sie HTML und CSS-Code ein. Der Check sucht nach focus-Styles und warnt vor verborgenem oder vermutlich zu schwachem Fokus.
Fokus-Sichtbarkeit prüfen
Für wen dieses Tool geeignet ist
Der Check ist als schneller Einstieg gedacht und hilft vor allem bei klar eingrenzbaren Teilproblemen.
Frontend Teams
Hilft bei CSS-Reviews und beim Erkennen von outline-none Mustern ohne Ersatz.
QA für Tastaturnutzung
Gut geeignet, wenn ein Interface zwar bedienbar ist, der aktulle Fokus aber schwer erkennbar bleibt.
Was wird geprüft?
Die Auswertung deckt typische Muster und häufige Fehler ab, ersetzt aber kein vollständiges Accessibility Audit.
Vorhandene focus-Styles
Der Check markiert, wenn Überhaupt keine sichtbaren Fokus-Indikatoren definiert sind.
Entfernte Outline
outline:none ohne robusten Ersatz wird als hohes Risiko erkannt.
Hinweise auf schwachen Kontrast
Farbangaben und generische Muster werden auf möglich zu geringe Sichtbarkeit abgeklopft.
WCAG 2.2 Bezug
Die Ergebnisse lassen sich den folgenden WCAG-Erfolgskriterien und Prinzipien zuordnen.
2.4.7 Focus Visible
Direkter Bezug für die Sichtbarkeit des Tastaturfokus.
1.4.11 Non-text Contrast
Fokusrahmen und andere visuelle Zustandsmarker brauchen ausreichend Kontrast.
2.4.13 Focus Appearance (Minimum, unterstützend)
Das Tool hilft dabei, zu schwache oder fehlende Fokusindikatoren früh zu erkennen.
Passende nächste Schritte
Sinnvoll wird der Check vor allem dann, wenn die Ergebnisse direkt mit weiteren Prüfungen oder Maßnahmen verbunden werden.
Keyboard Check
Der nächste Schritt, wenn nicht nur Sichtbarkeit, sondern die gesamte Tastaturbedienung geprüft werden soll.
Kontrast Checker
Hilft dabei, Fokusrahmen und interaktive Zustandsfarben gezielt numerisch abzusichern.
Quick WCAG Check
Für den groberen Gesamtblick auf mehrere WCAG Basisprobleme.
Häufige Fragen
Ist outline none immer falsch?
Nein, aber nur dann, wenn ein gleichwertiger oder besserer Fokusindikator sauber umgesetzt wird. Ohne Ersatz ist es fast immer ein Problem.
Reicht focus-visible statt focus?
Das kann sinnvoll sein, wenn das Verhalten bewusst gesteuert wird. Wichtig ist, dass Tastaturnutzer in allen relevanten Situationen einen klaren Fokus sehen.
Warum ist Fokus für A11y so wichtig?
Ohne sichtbaren Fokus verlieren Tastaturnutzer schnell die Orientierung. Dann werden selbst technisch erreichbare Funktionen praktisch schwer nutzbar.