Fokus nicht verdeckt: Sticky Header, Cookie-Banner und scroll-padding (WCAG 2.4.11)

Was das Kriterium 2.4.11 Fokus nicht verdeckt genau verlangt

Der normative Text ist kurz: Erhält eine Komponente der Benutzeroberfläche den Tastaturfokus, wird sie nicht vollständig durch vom Autor erstellte Inhalte verdeckt. Entscheidend ist das Wort „vollständig“: Auf Stufe AA kann eine teilweise verdeckte Komponente bestehen. Das W3C begründet diese Toleranz mit der Komplexität heutiger responsiver Designs und weist zugleich darauf hin, dass eine Komponente umso schwerer zu sehen ist, je mehr von ihr verdeckt wird. Autorinnen und Autoren sollten daher versuchen, Ausmaß und Häufigkeit der teilweisen Verdeckung zu verringern.

Das ideale Ergebnis, gar keine Überdeckung, deckt ein eigenes Kriterium der Stufe AAA ab: Fokus nicht verdeckt (erweitert). Betrachten Sie Stufe AA als Untergrenze, nicht als Ziel.

Das Kriterium bewertet die fokussierte Komponente, nicht den Fokusindikator. Der Indikator zählt nur, wenn er innerhalb der Komponente liegt oder wenn der Fokus durch eine Veränderung der Komponente selbst angezeigt wird. Laut W3C ergibt das eine klarere Messgröße; ein vollständig verdeckter Fokusindikator würde jedoch wahrscheinlich gegen 2.4.7 Fokus sichtbar verstoßen.

• Anmerkung 1: Können Nutzende Inhalte in einer konfigurierbaren Oberfläche verschieben, wird nur die Ausgangsposition dieser Inhalte bewertet.
• Anmerkung 2: Von Nutzenden geöffnete Inhalte können die fokussierte Komponente verdecken; können Nutzende die fokussierte Komponente sichtbar machen, ohne den Tastaturfokus weiterzubewegen, gilt die fokussierte Komponente nicht als durch vom Autor erstellte Inhalte verdeckt.

Fokus nicht verdeckt: warum ein Sticky Header oder Cookie-Banner den Fokus verdecken kann

Das W3C nennt Sticky Footer, Sticky Header und nicht-modale Dialoge als typische Inhalte, die fokussierte Elemente überlagern können: Während man sich mit der Tab-Taste durch die Seite bewegt, können diese Ebenen das Element, das den Fokus erhält, samt Fokusindikator verdecken.

Das W3C nennt ausdrücklich Cookie-Banner als Beispiel. Eine als fixierter Inhalt umgesetzte Benachrichtigung, etwa ein Cookie-Banner, verstößt gegen das Kriterium, wenn sie eine Komponente, die den Fokus erhält, vollständig verdeckt. Für sehende Menschen, die eine Tastatur oder ein Gerät über die Tastaturschnittstelle nutzen, etwa einen Schalter oder Spracheingabe, ist es entscheidend zu wissen, wo der Fokus liegt: Ohne ihn zu sehen, wissen sie womöglich nicht, wie es weitergeht, oder halten das System sogar für nicht mehr reaktionsfähig.

Auch halbtransparente, weichgezeichnete oder abdunkelnde Overlays verdienen Aufmerksamkeit. Möglicherweise verdecken sie das fokussierte Element nicht vollständig, sodass es 2.4.11 erfüllt; es kann aber separat gegen 1.4.11 Nicht-Text-Kontrast verstoßen: Der Fokusindikator muss so, wie er unter dem Overlay erscheint, nach den Kontrastanforderungen von 1.4.11 bewertet werden.

Abhilfe mit scroll-padding: die CSS-Technik C43

Die hinreichende Technik, die das W3C für dieses Kriterium angibt, ist C43: die CSS-Eigenschaft scroll-padding verwenden, um Inhalte freizulegen. Das Beispiel des W3C: Auf einer Seite mit Sticky Footer wird das fokussierte Element nicht vollständig verdeckt, weil der Inhalt im Viewport dank scroll padding so scrollt, dass das Element mit Tastaturfokus immer angezeigt wird. Auch für Banner erwähnt das W3C scroll padding, damit der Banner keine anderen Inhalte überlagert.

Das folgende Snippet ist eine eigene Illustration, die Sie anpassen müssen: Die Understanding-Seite des W3C nennt die Technik C43, ohne ihre Syntax im Detail zu beschreiben. Wir setzen scroll-padding auf einen Wert, der der Höhe jeder fixierten Leiste entspricht; prüfen Sie das Ergebnis per Tastatur an jedem Breakpoint.

/* Illustration: Platz für fixierten Header und Footer reservieren */
html {
  scroll-padding-top: 5rem;    /* Höhe des Sticky Headers */
  scroll-padding-bottom: 4rem; /* Höhe des Sticky Footers */
}

.site-header {
  position: sticky;
  top: 0;
}

/* Sichtbarer Fokusindikator bei Tastaturbedienung (Technik C45) */
a:focus-visible,
button:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

Cookie-Banner und Benachrichtigungen: weitere Lösungen

scroll-padding ist nicht der einzige Weg. Für einen Cookie-Banner oder eine fixierte Benachrichtigung beschreibt das W3C mehrere Möglichkeiten, das Kriterium zu erfüllen:

• Den Banner modal gestalten, sodass er geschlossen werden muss, bevor man durch die Seite navigiert. Ein korrekt aufgebauter modaler Dialog erfüllt dieses Kriterium immer, weil er beim Erscheinen den Fokus übernimmt und Interaktionen außerhalb verhindert, bis er geschlossen wird.
• scroll padding verwenden, damit der Banner keine anderen Inhalte überlagert.
• Eine Benachrichtigung, die keine Aktion erfordert, bei Fokusverlust schließen.

Dauerhafte, von Nutzenden geöffnete Inhalte

Für dauerhafte Inhalte, die Nutzende selbst öffnen, etwa ein Akkordeon, einen Chatbot oder eine ausklappbare Seitennavigation, beschreibt das W3C Ansätze, die den Fokus nicht verdecken:

• Der neue Inhalt verschiebt den bestehenden, wie ein Akkordeon, das den Rest der Seite nach unten schiebt.
• Der bestehende Inhalt fließt neu um, wie bei einer Seitenleiste, die den Hauptbereich schmaler macht.
• Der geöffnete Inhalt übernimmt den Fokus, und die Tastaturnavigation bleibt bis zum Schließen darauf beschränkt; laut W3C sollte man das vorsichtig einsetzen, da es zu einer ungleichen Erfahrung zwischen Tastatur- und Zeigernutzenden führen kann.
• Der Inhalt öffnet sich in einem Bereich der Seite, der keine anderen Inhalte enthält, vorausgesetzt, an jedem responsiven Breakpoint wird geprüft, dass nichts verdeckt wird.
• Der Inhalt wird automatisch ausgeblendet, sobald der Fokus ihn verlässt, oder über einen eigenen Tastaturbefehl wie die Escape-Taste.

Der Zusammenhang mit Fokus sichtbar (2.4.7)

Das Erfolgskriterium 2.4.7 Fokus sichtbar, ebenfalls Stufe AA, verlangt, dass jede per Tastatur bedienbare Benutzeroberfläche einen Bedienmodus hat, in dem der Tastaturfokusindikator sichtbar ist. Ziel ist, dass man erkennt, welches Element den Fokus hat. Das W3C ergänzt, dass der Indikator nicht zeitlich begrenzt sein darf: Wird er angezeigt, muss er sichtbar bleiben.

Beide Kriterien ergänzen sich. 2.4.7 prüft, ob der Fokusindikator in mindestens einem Bedienmodus sichtbar ist; 2.4.11 prüft, ob die fokussierte Komponente nicht vollständig durch vom Autor erstellte Inhalte verdeckt wird. Ein perfekt gestalteter Fokusrahmen nützt nichts, wenn er unter einem Sticky Header verschwindet. Zu den hinreichenden Techniken für 2.4.7 gehören C15 (Darstellung einer Komponente bei Fokus per CSS ändern), C40 (zweifarbiger Indikator für ausreichenden Kontrast) und C45 (:focus-visible verwenden). Unter den Fehlern betrifft F78 Outline- oder Rahmenstile, die den Fokusindikator entfernen oder unsichtbar machen, und F55 Skripte, die den Fokus beim Erhalt wieder entfernen.

Fokus nicht verdeckt auf Ihrer Website testen

Ein manueller Tastaturtest ermöglicht die Prüfung dieses Kriteriums. Gehen Sie jede Seitenvorlage ausschließlich per Tastatur durch, mit Tab und Umschalt+Tab, und achten Sie bei jedem Schritt darauf, ob das fokussierte Element sichtbar bleibt.

• Testen Sie mit sichtbarem Sticky Header und mit noch geöffnetem Cookie-Banner.
• Gehen Sie die ganze Seite durch, nach unten mit Tab und zurück nach oben mit Umschalt+Tab, um sowohl den Sticky Footer als auch den Sticky Header zu prüfen.
• Wiederholen Sie den Test an jedem responsiven Breakpoint.
• Öffnen Sie dauerhafte Inhalte (Chat, Feedback-Panel, Seitennavigation) und prüfen Sie, ob Escape oder Scrollen per Tastatur das fokussierte Element sichtbar macht.
• Prüfen Sie zusätzlich, ob der Fokusindikator sichtbar und ausreichend kontrastreich ist.

Häufige Fragen

Weiterlesen bei Conformly

• Fokussichtbarkeit in HTML korrigieren
• Leitfaden zum RGAA-Kriterium 10.7
• Alles über den RGAA 5

Quellen

Dieser Artikel stützt sich auf die am Seitenende genannten offiziellen Quellen.

• W3C — Comprendre 2.4.11
• W3C — Comprendre 2.4.7