Fokus auf unsichtbarem Element (keyboard:focus-invisible)

Die Regel keyboard:focus-invisible meldet einen Tab-Schritt, der auf einem Element landet, das niemand sieht: Es liegt außerhalb des Bildschirms, ist vollständig durchsichtig, versteckt oder hat keine Größe. Der Fokusrahmen mag perfekt sein – er wird dort gezeichnet, wo niemand hinschaut. Die Lösung: Das Element beim Fokus sichtbar machen oder es aus der Tab-Reihenfolge nehmen, solange es versteckt ist.

Was die Regel bedeutet

WCAG 2.4.7 verlangt einen sichtbaren Fokus. Ist das fokussierte Element selbst nicht zu sehen, ist es sein Fokusrahmen auch nicht. Die Person drückt Tab ins Leere: Auf dem Bildschirm ändert sich nichts, und das nächste Enter löst womöglich einen Link aus, den sie nie gesehen hat.

Das ist ein anderer Fehler als undefined. Dort ist das Element sichtbar, aber nichts markiert es; hier ist das Element gar nicht sichtbar. Beides verletzt 2.4.7. Ein sichtbarer Fokus, den ein klebender Header oder ein Cookie-Banner verdeckt, ist ein dritter Fall – er gehört zu 2.4.11 und wird von dieser Regel nicht erkannt.

Wen es betrifft

Sehende Tastatur-Nutzende: Menschen mit motorischen Einschränkungen mit Tastatur oder Schalter, Menschen mit Sehbehinderung mit Bildschirmlupe und alle, die lieber mit der Tastatur arbeiten. Jeder unsichtbare Halt kostet einen Tastendruck und, schlimmer, die Orientierung. Ein geschlossenes Off-Canvas-Menü kann zwanzig solcher Halte vor den eigentlichen Inhalt setzen.

Warum die Prüfung anschlägt

• Skip-Links außerhalb des Bildschirms mit left: -9999px, ohne Regel, die sie bei :focus zurückholt.
• Off-Canvas-Menüs, die geschlossen aus dem Bild geschoben sind, deren Links aber in der Tab-Reihenfolge bleiben.
• Mit opacity: 0 versteckte Inhalte – geschlossene Dropdowns, nicht angezeigte Karussell-Folien –, die weiter fokussierbar sind.
• Wrapper ohne Größe, die fokussierbare Inhalte abschneiden, etwa zugeklappte Akkordeons mit height: 0; overflow: hidden.
• Optisch versteckte Formularelemente, zum Beispiel eine eigene Checkbox, deren echtes Eingabefeld durchsichtig ist.

So beheben Sie es

Zeigen Sie das Element, sobald es den Fokus bekommt – oder machen Sie es unfokussierbar, solange es versteckt ist.

/* Vorher: Der Skip-Link bleibt auch mit Fokus außerhalb des Bildschirms */
.skip-link { position: absolute; left: -9999px; }

/* Nachher: Er erscheint in dem Moment, in dem er den Fokus bekommt */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; }

Ein Menü, das geschlossen außerhalb des Bildschirms liegt, verstecken Sie richtig: visibility: hidden (oder das Attribut inert) nimmt seine Links aus der Tab-Reihenfolge, bis es sich öffnet:

/* Vorher: geschlossen, aber die Links sind weiter Tab-Halte */
.offcanvas { position: fixed; top: 0; left: -20rem; width: 18rem; }

/* Nachher: geschlossen heißt auch für die Tastatur versteckt */
.offcanvas { position: fixed; top: 0; left: -20rem; width: 18rem; visibility: hidden; }
.offcanvas.is-open { left: 0; visibility: visible; }

So prüfen Sie es von Hand

1. Drücken Sie vom Seitenanfang an Tab und beobachten Sie nach jedem Druck den Bildschirm.
2. Ändert sich nichts Sichtbares, geben Sie in der Konsole der Entwicklertools document.activeElement ein und sehen nach, wo der Fokus ist.
3. Öffnen und schließen Sie Menüs, Akkordeons und Karussells und gehen Sie sie in beiden Zuständen erneut mit Tab durch.
4. Wiederholen Sie das in der Mobilansicht, wo die Navigation meist ein Off-Canvas-Menü ist.

Zugehöriges WCAG-Kriterium

2.4.7 Fokus sichtbar, Stufe AA. Verwandt: 2.4.11 Fokus nicht verdeckt (Minimum) für Fokus, den andere Inhalte verdecken, und 2.4.3 Fokus-Reihenfolge.

So meldet Reviseberg diese Regel

Diese Regel stammt vom Tastatur-Agenten von Reviseberg, nicht aus axe-core. Der Agent geht die Nutzerreise, die Sie festlegen, mit echten Tab-Tastendrücken in Chromium durch und vermisst bei jedem Schritt das fokussierte Element: Hat es keine Breite oder Höhe, ist es opacity: 0 oder visibility: hidden oder liegt es ganz oberhalb oder links der Seite, scheitert der Schritt mit „Focus moved to an element with no size on screen“ oder „Focus moved to an element that is transparent or off-screen“.

Zum Befund gehören der Selektor, der Schritt in der Tastenfolge und bei einem vollständigen Crawl ein zugeschnittener Screenshot. Der Agent vermisst das fokussierte Element selbst, nicht das, was daneben gezeichnet wird: Eine eigene Checkbox mit durchsichtigem Eingabefeld und Fokusrahmen am Label wird ebenfalls gemeldet. Ist der Rahmen deutlich sichtbar, markieren Sie den Befund mit dieser Begründung als „Fehlalarm“. Fokus hinter einem anderen Element erkennt der Agent nicht.

Verwandte Regeln

• undefined – das Element ist sichtbar, aber nichts markiert es.
• undefined – die Seite hat keinen funktionierenden Skip-Link.
• undefined – fokussierbare Inhalte, die vor Hilfstechnik versteckt sind.

Tastatur-Agent auf Ihrer Website – kostenloser Bericht