BARRIEREFREIHEIT ≠ OVERLAY · 38
Sichtbarer Tastaturfokus bei überlagernden Kopfzeilen
📅 11. November 2026 · ⏱ 6 Min. Lesezeit
Beim Drücken der Tabulatortaste kann der Browser den Fokus auf ein Element hinter einer fixierten Kopfzeile verschieben. Die Seite reagiert weiterhin, doch die sichtbare Orientierung für den nächsten Schritt fehlt.
01. Eine Buchung als Testaufgabe
Öffnen Sie eine Buchungsseite und wählen Sie mit der Tastatur einen Termin. Beim nächsten Tab erwarten Sie einen Link mit Hinweisen zu Änderungen oder die Schaltfläche zum Fortfahren. Das Dokument verschiebt sich um wenige Pixel und die Umrandung verschwindet. Der Fokus hat das richtige Element erreicht, aber die oben fixierte Kopfzeile verdeckt es. Mit der Eingabetaste können Sie den nächsten Schritt auslösen, ohne vorher gesehen zu haben, welche Aktion ausgewählt war.
Bei einer Prüfung mit der Maus fällt diese Situation leicht durch das Raster. Der Zeiger markiert die gewählte Position und man kann die Seite vor dem Klick verschieben. Mit der Tastatur folgt der Browser der Fokusreihenfolge und scrollt bei Bedarf. Behalten Sie diese Abfolge beim Test bei. Manuelles Scrollen vor der Beobachtung kann den gesuchten Fehler verdecken.
02. Fokus, Anzeige und Reihenfolge getrennt untersuchen
Der Fokus bestimmt, welches Element Tastatureingaben empfängt. Die Fokusanzeige ist das sichtbare Merkmal, an dem sich diese Position erkennen lässt. Die Reihenfolge bestimmt, welches Element danach folgt. Eine überlagernde Kopfzeile kann eine Schaltfläche mit einem gut gestalteten Fokusrahmen verdecken. Eine frei sichtbare Schaltfläche kann beim Fokussieren ohne Markierung bleiben. Auch ein deutlich sichtbarer Fokus kann zum falschen Zeitpunkt in einem Arbeitsablauf erscheinen.
Notieren Sie das erwartete Element und dasjenige, das tatsächlich den Fokus erhält. Prüfen Sie das aktive Element mit vorbereiteten Entwicklerwerkzeugen oder wiederholen Sie die Abfolge, ohne den Seitenfokus während des Tests zu verändern. Vergleichen Sie den Begrenzungsbereich des Elements mit dem Bereich der überlagernden Ebene. Ein Bildschirmfoto zeigt das Symptom. Die Tastenschritte und der Zustand des Elements machen den Fehler nachvollziehbar.
03. Die Anforderungen der WCAG 2.2
Erfolgskriterium 2.4.7 auf Stufe AA behandelt die Sichtbarkeit der Fokusanzeige. Kriterium 2.4.11, ebenfalls AA, prüft, ob ein fokussiertes Bedienelement durch vom Anbieter erstellte Inhalte vollständig verdeckt wird. Bewerten Sie diese Fälle getrennt. Ein sichtbarer Rand einer Schaltfläche kann eine vollständige Verdeckung verhindern und dennoch zu wenig Information bieten, um die Aktion bequem zu erkennen.
Kriterium 2.4.12 auf Stufe AAA behandelt auch teilweise Verdeckung. Als Gestaltungsziel sollten das gesamte Bedienelement und seine Markierung sichtbar bleiben. Kriterium 2.4.3 auf Stufe A betrifft eine Fokusreihenfolge, die Bedeutung und Bedienbarkeit erhält, wenn die Abfolge dafür relevant ist. Bei einer fixierten Kopfzeile kann eine Anforderung verletzt sein, obwohl die anderen erfüllt sind. Beschreiben Sie im Bericht das beobachtete Verhalten und ordnen Sie es dem passenden Kriterium zu.
04. Die überlagernde Ebene ermitteln
Eine fixierte Kopfzeile kann beim Scrollen, beim Öffnen des Menüs oder bei schmalerem Fenster ihre Höhe ändern. Ein Hinweis am unteren Rand, eine Aktionsleiste oder ein Hilfebereich können ebenfalls Platz beanspruchen. Jedes Element kann für sich gut funktionieren und zusammen mit den anderen wenig Platz übrig lassen. Entscheidend ist die tatsächlich belegte Höhe im Zustand, in dem das Problem auftritt.
Prüfen Sie, welcher Container scrollt. Auf einer einfachen Seite ist es oft das Dokument. In einer Anwendung kann es ein inneres Panel mit eigenem Scrollbereich und eigener Leiste sein. Eine Einstellung am Dokument erreicht diesen Bereich möglicherweise nicht. Deaktivieren Sie die fixierte Position probeweise im Inspektor und wiederholen Sie die Abfolge. Erscheint das Element wieder, haben Sie einen konkreten Ansatzpunkt für die Vorlage.
05. Platz im Scrollcontainer vorsehen
Eine Möglichkeit ist scroll-padding-block-start am Scrollcontainer, um die Höhe der Kopfzeile zu berücksichtigen. Bei einer fixierten Leiste unten kommt scroll-padding-block-end infrage. Die W3C-Technik C43 zeigt, wie sich Scrollabstand und tatsächlicher Platz im Layout kombinieren lassen, damit das letzte Element hinter einer Leiste hervorkommen kann. Prüfen Sie beide Enden des Ablaufs, weil der mögliche Scrollweg begrenzt ist.
Eine vom Desktop übernommene Höhe reicht unter Umständen nicht, sobald das Menü zweizeilig wird. Wählen Sie Werte, die den tatsächlichen Zuständen der Vorlage entsprechen, und testen Sie Größenänderungen. Auf niedrigen Bildschirmen kann es sinnvoll sein, die Leiste mit dem Inhalt scrollen zu lassen. Kontrollieren Sie das automatische Scrollen beim Fokuswechsel und interne Sprunglinks. Beide können Inhalte nahe an einer Kopfzeile positionieren.
06. Die Fokusanzeige in allen Zuständen sichtbar halten
Behalten Sie die Fokusanzeige des Browsers bei oder gestalten Sie eine Markierung, die sich auf den tatsächlichen Hintergründen abhebt. Ein Rahmen, der auf einer weißen Karte gut sichtbar ist, kann in einem dunkelblauen Menü verschwinden. Prüfen Sie primäre Schaltflächen, Textlinks, Symbole und Felder. Beziehen Sie normale und besuchte Linkzustände ein und beurteilen Sie den Kontrast im jeweiligen Kontext.
Mit dem CSS-Selektor :focus-visible lassen sich Stile anwenden, wenn der Browser eine sichtbare Markierung für angemessen hält. Entfernen Sie Rahmen nicht pauschal ohne eine geprüfte Alternative. Achten Sie auf Container, die den Rahmen mit overflow abschneiden, und auf überlagernde Module. Wenn ein Element nur mit dem Mauszeiger erkennbar ist, wechseln Sie zurück zur Tastatur und prüfen Sie, welcher Zustand vom Theme gestaltet wird.
07. In beide Richtungen und mit Vergrößerung testen
Beginnen Sie in einem nachvollziehbaren Ausgangszustand und notieren Sie Browser, Fenstergröße und Zoom. Gehen Sie mit Tab vorwärts und mit Umschalt+Tab zurück. Beobachten Sie jedes Element genau beim Erhalt des Fokus. Testen Sie die obere und untere Fensterkante und das letzte Element in einem Panel. Manche Ebenen verdecken Inhalte erst beim Zurückgehen, wenn der Browser in Gegenrichtung scrollt.
Wiederholen Sie die Prüfung mit ausgeklappter Kopfzeile, geschlossenem Menü und Hinweisen, die beim ersten Besuch erscheinen. In einem schmalen oder vergrößerten Fenster kann Text umbrechen und die verfügbare Höhe verringern. Eine kurze Aufzeichnung der Tastenfolge hilft, einen Sprung im Scrollbereich von einem Fokuswechsel zu unterscheiden. Das erwartete Ergebnis ist klar. Die Person erkennt das aktuelle Element, bevor sie über die Aktivierung entscheidet.
08. Die Divi-Vorlage korrigieren und den Ablauf prüfen
Klären Sie in WordPress, ob die Kopfzeile aus dem Theme, einer Vorlage des Theme Builders oder einem fixierten Modul stammt. Suchen Sie die Höhenangabe und die Regel für das Scrollen. Korrigieren Sie die Komponente, die die Überlagerung verursacht, und prüfen Sie Seiten, die sie wiederverwenden. Berücksichtigen Sie eine lange Seite, ein Formular und einen Ablauf mit interner Navigation.
Ein Overlay kann Darstellungseinstellungen bereitstellen. Abmessungen der Kopfzeile, Fokusreihenfolge und reservierter Platz gehören zur Implementierung. Automatische Prüfungen können einzelne Probleme aufzeigen. Schließen Sie diesen Fall ab, indem Sie die Buchung erneut mit der Tastatur ausführen, bei jedem Fokuswechsel das aktuelle Element sehen und sich vorwärts und rückwärts orientieren können. Dokumentieren Sie das Ergebnis zusammen mit der ursprünglichen Tastenfolge für die nächste Änderung an der Vorlage.