Prüfpunkt 2.4.12Stufe AAATastatur und Fokus
Warum darf ein fokussiertes Element nie verdeckt sein?
Wer mit der Tastatur durch eine Seite geht, muss sehen, wo der Fokus ist. Klebende Kopfleisten, Cookie-Banner und Chat-Fenster legen sich über den Inhalt; der Fokus landet darunter und ist unsichtbar. Die Stufe AA (2.4.11, neu in WCAG 2.2) verlangt, dass das fokussierte Element wenigstens teilweise sichtbar bleibt. Das Kriterium 2.4.12 der Stufe AAA verlangt: vollständig sichtbar, kein Pixel verdeckt.
Was das Kriterium verlangt
Wenn ein Element den Tastaturfokus erhält, liegt kein Teil davon hinter einem anderen Inhalt, den der Autor erzeugt hat: keine klebende Kopf- oder Fußleiste, kein Cookie-Banner, kein Chat-Knopf, kein Hinweisfenster. Der Browser scrollt beim Fokuswechsel nur so weit, dass das Element in den sichtbaren Bereich kommt; er weiß nichts von Leisten, die darüberliegen. Die Seite muss deshalb selbst sorgen, dass der Bereich unter einer klebenden Leiste beim Scrollen freigehalten wird.
Die Umsetzung
Die CSS-Eigenschaft scroll-padding auf dem Scroll-Container reserviert oben und unten so viel Platz, wie die klebenden Leisten hoch sind; der Browser scrollt fokussierte Elemente dann unter der Leiste hervor. Fenster, die sich über die Seite legen, fangen den Fokus ein (Fokus bleibt im Fenster) oder schließen sich, wenn der Fokus die Seite betritt. Ein Chat-Knopf in der Ecke bleibt klein oder rückt beim Fokus auf ein Element darunter zur Seite.
So gehen wir damit um
Die Messung geht mit der Tabulatortaste durch die Seite, misst je fokussiertem Element den sichtbaren Anteil und vergleicht mit klebenden Elementen; für Stufe AA gilt teilweise sichtbar, für AAA vollständig. Dieselbe Messung liefert beide Werte. Das Kriterium gehört zur Kategorie AAA im Wissen; im Bericht steht der verdeckte Anteil je Fundstelle.
Beispiele
Fokussiertes Feld halb unter dem Chat-Knopf
.chat { position: fixed; right: 0; bottom: 0; width: 320px; height: 120px; }
/* das letzte Formularfeld liegt zur Hälfte darunter */.chat { position: fixed; right: 16px; bottom: 16px; width: 56px; height: 56px; }
html { scroll-padding-bottom: 88px; }Auf Stufe AA darf ein Teil des fokussierten Elements verdeckt sein, auf AAA kein Pixel.
So gehen Sie es an
- Setzen Sie scroll-padding-top und -bottom auf die Höhe Ihrer klebenden Leisten.
- Lassen Sie Cookie-Banner und Hinweisfenster den Fokus einfangen, bis sie geschlossen sind.
- Gehen Sie mit der Tabulatortaste durch jede Vorlage und beobachten Sie den Fokusrahmen; er darf nirgends verschwinden.
- Halten Sie schwebende Knöpfe (Chat, nach oben) klein und mit Abstand zum Rand.
Weiter im Prüfbereich Barrierefreiheit
- Wie sieht ein Fokusrahmen aus, der wirklich auffällt?WCAG 2.2 Kriterium 2.4.13 (Stufe AAA, neu in 2.2): Der Fokusrahmen ist mindestens 2 Pixel dick und hat 3:1 Kontrast zum Zustand ohne Fokus.
- Wie groß muss eine Schaltfläche für Finger und zittrige Hände sein?WCAG 2.2 Kriterium 2.5.5 (Stufe AAA): Ziele für Zeiger sind mindestens 44 × 44 CSS-Pixel groß, außer Links im Fließtext. Messbar, mit klaren Ausnahmen.
- Warum sollen Maus, Finger, Stift und Tastatur gleichzeitig funktionieren?WCAG 2.2 Kriterium 2.5.6 (Stufe AAA): Eine Website schließt keine Eingabeart aus und lässt den Wechsel zwischen Maus, Touch, Stift und Tastatur zu.
- Wie erklärt eine Website ungewöhnliche Wörter und Fachbegriffe?WCAG 2.2 Kriterium 3.1.3 (Stufe AAA): Für Fachwörter, Redewendungen und Jargon gibt es eine Erklärung, etwa ein Glossar oder eine Definition im Text.
Dieser Prüfpunkt gehört zum Prüfbereich Barrierefreiheit; dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.
Foto: Glenn Carstens-Peters, CC0
.jpg){kind=link}