WCAG 2.4.11: Fokus nicht verdeckt (Minimum)

Wenn ein Element den Tastaturfokus erhält, darf es nicht vollständig von anderen Inhalten verdeckt sein – von Sticky-Headern, Cookie-Bannern, Chat-Widgets oder klebenden Fußleisten. Ein Fokus hinter einem Banner ist so nützlich wie gar keiner. (Englisch: Focus Not Obscured (Minimum).)

Was verlangt das Kriterium?

Das Minimum: teilweise Verdeckung ist erlaubt, vollständige nicht (die strengere Variante ohne jede Verdeckung ist 2.4.12 auf AAA). Der typische Hergang: Nutzer tabbt durch die Seite, der Browser scrollt das fokussierte Element gerade so in den Viewport – und exakt dort klebt der Sticky-Header darüber. Der Nutzer sieht seinen Fokus nie.

Wen betrifft es besonders?

Sehende Tastaturnutzer – sie sind auf den sichtbaren Fokus angewiesen; wird er verdeckt, ist die Orientierung weg. Verschärft bei Vergrößerung: Sticky-Elemente belegen dort einen viel größeren Anteil des sichtbaren Ausschnitts.

Richtig & falsch im Code

/* Falsch: Sticky-Header ohne Rücksicht – fokussierte Elemente
   scrollen genau darunter */
.site-header { position: sticky; top: 0; }

/* Richtig: Scroll-Puffer für alle fokussierbaren Elemente */
:focus,
:target {
  scroll-margin-top: 6rem; /* Höhe des Sticky-Headers + Luft */
}

/* Alternative an der Wurzel: Scroll-Padding am Viewport */
html { scroll-padding-top: 6rem; }

Zweite Baustelle: selbst positionierte Overlays. Ein Cookie-Banner, das den unteren Viewport-Rand belegt, verdeckt beim Durchtabben genau die Elemente, die dort entlangscrollen – Banner deshalb so bauen, dass es den Fokus zuerst erhält oder Platz freigibt.

So testest du es

1. Tab-Durchlauf auf Seiten mit Sticky-Elementen (Header, Filterleisten, Fußbanner): Ist das fokussierte Element jederzeit mindestens teilweise zu sehen?
2. Gezielt rückwärts (Shift+Tab) von unten nach oben – die klassische Sticky-Header-Falle.
3. Mit offenem Cookie-Banner und Chat-Widget wiederholen; auch im Querformat mit wenig Höhe.

Verwandte Themen

• 2.4.7 Fokus sichtbar – erst sichtbar, dann unverdeckt
• Die neuen WCAG-2.2-Kriterien – alle Neuerungen im Überblick
• Tastaturbedienung & Fokus – die Praxis-Seite mit scroll-margin-Rezept