- Stufe
- AA
- Seit
- WCAG 2.2
- Einträge
- 49 / 193
2.4.11 Fokus nicht verdeckt (Minimum)
Wenn ein Element den Tastaturfokus erhält, darf es nicht vollständig hinter etwas verschwinden, das die Seite darüberlegt, etwa hinter einer fixierten Kopfzeile oder einem Cookie-Banner.
/ Was es verlangt
Fixierte Kopfzeilen, feste Fußleisten, Cookie-Banner und Chat-Widgets bleiben stehen, während die Seite darunter scrollt. Steuert jemand per Tab einen Link an, den der Browser unter eines dieser Elemente gescrollt hat, dann hat der Link den Fokus und sein Indikator wird gezeichnet, aber niemand sieht ihn. Die Person drückt weiter Tab, ohne zu wissen, wo sie ist. Aufgehalten werden Menschen, die auf Tastatur und Augen angewiesen sind, und Menschen mit Vergrößerung.
Das Kriterium ist nur verletzt, wenn die fokussierte Komponente vollständig von Inhalt verdeckt ist, den der Autor erstellt hat. Eine teilweise verdeckte Komponente besteht auf dieser Stufe, und das AAA-Kriterium 2.4.12 verlangt, dass kein Teil verdeckt ist. WCAG ergänzt Anmerkungen: Können Nutzende Inhalte verschieben, zählt nur deren Ausgangsposition, von Nutzenden geöffneter Inhalt darf den Fokus verdecken, und lässt sich der verdeckende Inhalt schließen, ohne den Fokus zu bewegen, etwa mit Escape, gilt die Komponente nicht als verdeckt.
Dieses Kriterium ist neu in WCAG 2.2 und nicht Teil von WCAG 2.0 oder 2.1.
/ Woran Seiten scheitern
- Eine fixierte Kopfzeile verdeckt Links am oberen Rand des Viewports, wenn man mit Umschalt+Tab rückwärts geht.
- Eine feste Fußleiste verdeckt Bedienelemente am unteren Rand des Viewports, wenn man mit Tab vorwärts geht.
- Ein Cookie-Banner, das den Fokus nicht in sich hält, liegt über der Seite, während der Fokus durch die Links darunter wandert.
- Ein Chat-Widget oder eine schwebende Werbefläche in einer Ecke liegt auf der Absenden-Schaltfläche eines Formulars.
- Ein fixierter Tabellenkopf oder eine Seitenleiste verdeckt die fokussierte Zelle oder den fokussierten Link im Scrollbereich darunter.
/ So prüfen Sie es selbst
- Laden Sie die Seite frisch, lassen Sie ein Cookie-Banner offen und gehen Sie mit Tab durch die ganze Seite. Prüfen Sie an jedem Stopp, ob wenigstens ein Teil des fokussierten Elements sichtbar ist.
- Gehen Sie am Seitenende mit Umschalt+Tab wieder nach oben. In dieser Richtung verdecken fixierte Kopfzeilen den Fokus am häufigsten.
- Wiederholen Sie den Test in einem kleinen Fenster oder mit vergrößerter Browseransicht, wo fixierte Leisten mehr vom Viewport einnehmen.
- Verschwindet der Fokus, geben Sie in der DevTools-Konsole document.activeElement ein und untersuchen Sie das Element, um zu sehen, was darüber gezeichnet wird.
/ So beheben Sie es
- Setzen Sie am html-Element scroll-padding-top auf die Höhe der fixierten Kopfzeile und scroll-padding-bottom für eine feste Fußleiste, damit der Browser das Scrollen beendet, bevor das fokussierte Element unter die Leiste gerät.
- Oder setzen Sie scroll-margin-top und scroll-margin-bottom an den fokussierbaren Elementen selbst.
- Nehmen Sie das Cookie-Banner in den Seitenfluss auf, sodass es den Inhalt nach unten schiebt, oder bauen Sie es als modalen Dialog, der den Fokus hält, bis geantwortet wurde.
- Lösen Sie Leisten bei geringer Viewport-Höhe mit einer Media Query, die position: sticky auf position: static umstellt.
- Rücken Sie Chat-Widgets und schwebende Schaltflächen von Formularelementen weg und lassen Sie sie per Schaltfläche und per Escape schließen.
/ Was unser Scanner prüft
Die Prüfung focus-obscured läuft in einem echten Browser. Sie fokussiert bis zu 80 Tabstopps, lässt den Browser dorthin scrollen und fragt, was an drei Punkten gezeichnet wird: an den beiden oberen Ecken und in der Mitte. Sind mindestens zwei von etwas mit position fixed oder sticky überdeckt, meldet sie den Stopp. Ob sich der verdeckende Inhalt schließen lässt, prüft sie nicht, und sie kann ein nur teilweise verdecktes Element melden.
/ Wer es verletzt, nach unseren eigenen Messungen
Eine Seite je Stelle, automatisch im Wochenrhythmus gemessen. Behebungen seit dem letzten Durchlauf erscheinen beim nächsten, und jede Eintragsseite bietet ein Recht auf Gegendarstellung.
/ Fragen zu diesem Kriterium
Verstößt eine fixierte Kopfzeile gegen WCAG 2.2?
Nicht durch ihre bloße Existenz. Sie verstößt gegen 2.4.11, wenn eine Komponente, die den Tastaturfokus erhält, vollständig dahinter verschwindet. Hält der Browser das fokussierte Element von der Kopfzeile frei, was scroll-padding-top bewirkt, besteht eine fixierte Kopfzeile. Testen Sie, indem Sie rückwärts nach oben tabben, denn dann rutschen Elemente unter die Kopfzeile.
Ist ein teilweise verdecktes fokussiertes Element ein Verstoß?
Nicht auf Stufe AA. 2.4.11 ist die Minimalfassung und nur verletzt, wenn die Komponente vollständig verdeckt ist. 2.4.12 Fokus nicht verdeckt (Erweitert) auf Stufe AAA verlangt, dass kein Teil der Komponente verdeckt ist. Ein teilweise verdeckter Fokus ist trotzdem schwer zu bedienen, daher lohnt sich die Korrektur mit derselben scroll-padding-Änderung.
Verstößt ein Cookie-Banner gegen 2.4.11?
Das kann es. Ein am unteren Rand des Viewports fixiertes Banner, das offen bleibt, während der Fokus durch die Seite darunter wandert, verdeckt manche fokussierten Elemente vollständig. Ein Banner als modaler Dialog, der den Fokus hält, bis geantwortet wurde, tut das nicht, ebenso wenig eines, das den Seiteninhalt nach unten schiebt, statt ihn zu überdecken.