WCAG 2.4.11 Fokus nicht verdeckt (Minimum)

Erfolgskriterium 2.4.11 verlangt, dass ein Element, wenn es den Tastaturfokus erhält, nicht vollständig durch anderen, vom Autor kontrollierten Inhalt verborgen wird, wie einen fixierten Header, einen fixierten Footer oder einen dauerhaften Cookie-Banner. Es ist ein Kriterium der Stufe AA unter Richtlinie 2.4 (Navigierbar) – neu in WCAG 2.2.

Das konkrete, moderne Problem, das dies adressiert

Fixierte Header und Footer wurden erst deutlich nach den früheren WCAG-Versionen zu einem verbreiteten Webdesign-Muster und schufen einen neuen Fehlermodus, den keines der älteren fokusbezogenen Kriterien wirklich erfasste: Ein Tastaturnutzer tabbt eine Seite hinunter, und das Feld oder der Link, den er gerade fokussiert hat, scrollt unter einen fixierten Header – der Fokusindikator existiert technisch (erfüllt 2.4.7), ist aber nun vollständig unsichtbar, verborgen hinter einem überlappenden, fest positionierten Element. Der Nutzer hat tatsächlich den Überblick darüber verloren, wo der Fokus liegt, obwohl nichts auf die Weise "kaputt" ist, die ältere Kriterien beschrieben.

Warum dies ein eigenes neues Kriterium brauchte

2.4.7 Fokus sichtbar verlangt, dass irgendwo in der Gestaltung der Seite ein Fokusindikator existiert. Es adressiert nicht, was passiert, wenn dieser sichtbare Indikator nach dem Scrollen von einem unbezogenen überlappenden Element verdeckt wird – ein tatsächlich anderer Fehlermodus, der erst mit dem Aufkommen von fixierter/absoluter Positionierung als verbreitetem Layout-Muster üblich wurde, weshalb WCAG 2.2 genau deshalb ein gezieltes neues Kriterium hinzufügte, statt sich allein auf 2.4.7 zu verlassen.

Was "Minimum" erlaubt (im Vergleich zur strengeren AAA-Version)

Dieses AA-Stufen-Kriterium verlangt nur, dass das fokussierte Element nicht vollständig verborgen ist – teilweise Verdeckung ist erlaubt. Ein begleitendes AAA-Stufen-Kriterium, 2.4.12 Fokus nicht verdeckt (Erweitert), verlangt, dass kein Teil des fokussierten Elements verborgen ist. Die meisten Websites müssen nur die AA-Stufen-Messlatte "mindestens teilweise sichtbar" erfüllen.

Die praktische Lösung

scroll-margin-top (oder scroll-padding-top auf dem scrollenden Container), auf die Höhe eines fixierten Headers eingestellt, stellt sicher, dass der Browser, wenn ein Element per Fokus oder Anker-Navigation in die Ansicht scrollt, genug Platz lässt, um es vom fixierten Overlay freizuhalten:

:focus {
  scroll-margin-top: 80px; /* entspricht der Höhe des fixierten Headers */
}