2.4.11 Fokus nicht verdeckt (Minimum)

Was bedeutet das?

Feststehende Kopfzeilen, Fußleisten, Chat-Fenster und Cookie-Hinweise überlagern oft einen Teil der Seite. Springt der Tastaturfokus auf ein Element darunter, sieht die Person nicht, wo sie sich befindet. Dieses Kriterium verlangt, dass das fokussierte Element zumindest teilweise sichtbar bleibt.

Gemeint sind nur Überlagerungen, die die Website selbst erzeugt. Hat die Person einen Bereich selbst geöffnet und kann ihn schließen, ohne den Fokus zu verschieben, etwa per Esc, gilt das in der Regel nicht als Verstoß. Die strengere Stufe 2.4.12 (AAA) verlangt, dass gar nichts verdeckt wird.

Wem hilft das?

• Tastaturnutzer, die dem Fokus über die Seite folgen
• Menschen mit Bildschirmlupe, die nur einen kleinen Ausschnitt sehen
• Menschen mit Sprach- oder Schaltersteuerung

Typische Fehler

• Eine feststehende Kopfzeile verdeckt Links und Felder ganz, sobald die Seite beim Tabben nach oben scrollt
• Ein Cookie-Hinweis am unteren Rand liegt über den Fußzeilen-Links und bleibt offen, während man weitertabbt
• Ein Chat-Knopf oder eine Werbeleiste überdeckt die Schaltfläche zum Absenden

So prüfen wir das

• Belege Belege: Unser Scanner sammelt Material, zum Beispiel Screenshots, Listen und Messungen.

Prüffrage: Wird ein fokussiertes Element je ganz verdeckt (z. B. durch Sticky Header oder Cookie-Banner)? Markierte Fälle gelistet.

Entschieden wird jedes Kriterium von einem Menschen. Kein Kriterium gilt automatisch als erfüllt.

So beheben Sie es

.kopfzeile {
  position: sticky;
  top: 0;
  height: 5rem;
}

.kopfzeile {
  position: sticky;
  top: 0;
  height: 5rem;
}
html {
  scroll-padding-top: 6rem;
  scroll-padding-bottom: 4rem;
}

Mit scroll-padding hält der Browser beim Scrollen zum Fokus Abstand zu Kopf- und Fußleiste, das Element bleibt sichtbar.

Praxistipps

• Legen Sie Cookie-Hinweise so an, dass sie zuerst den Fokus erhalten und vor dem Weiterarbeiten geschlossen werden.
• Prüfen Sie auch kleine Bildschirmbreiten und starke Vergrößerung, dort verdecken feste Leisten anteilig mehr.

Ratgeber und Muster dazu

• Kontraste, die jeder lesen kannBlasse graue Schrift sieht elegant aus, ist aber für viele Menschen schwer zu lesen, bei Sonne auf dem Smartphone für alle. Hier stehen die Werte, die WCAG 2.2 verlangt, und wie Sie sie dauerhaft im Design verankern.
• Ohne Maus ans Ziel: Tastatur und FokusViele Menschen bedienen das Web ohne Maus: mit Tastatur, Schaltern, Sprachsteuerung oder Screenreader. Hier lesen Sie, was dafür funktionieren muss und wie Sie den Fokus in modernen Web-Apps richtig führen.
• Cookie-Banner, die niemanden aussperrenDer Cookie-Banner ist oft das Erste, was Besucher sehen, und für manche das Letzte: Wer ihn mit Tastatur oder Screenreader nicht bedienen kann, kommt nicht weiter. So machen Sie ihn für alle bedienbar.
• Modaler DialogFokus beim Öffnen hinein, Escape schließt, Fokus zurück.

Offizielle Quelle

Understanding WCAG 2.2 beim W3C (Englisch): 2.4.11 Focus Not Obscured (Minimum)