Prüfpunkt 2.4.3Stufe ATastatur und Fokus
Was bedeutet Fokus-Reihenfolge auf einer Website?
Die Fokus-Reihenfolge ist die Reihenfolge, in der die Tabulatortaste die Bedienelemente einer Seite ansteuert. Sie muss der sichtbaren Anordnung folgen: von oben nach unten, von links nach rechts. Springt der Fokus stattdessen kreuz und quer, verlieren Tastaturnutzer die Orientierung — sie können nicht vorhersehen, wo der nächste Tastendruck landet. Das WCAG-Kriterium 2.4.3 verlangt eine nachvollziehbare Reihenfolge.
Wie eine falsche Fokus-Reihenfolge entsteht
Die Tabulatortaste folgt der Reihenfolge der Elemente im Quelltext — nicht dem, was auf dem Bildschirm zu sehen ist. Verschiebt die Gestaltung Elemente an andere Positionen, fallen beide Reihenfolgen auseinander: Der Fokus springt vom Namensfeld in den Fußbereich und von dort zurück zur Absende-Schaltfläche. Auch nachträglich eingefügte Dialogfenster landen im Quelltext oft ganz am Ende — wer hineintabben will, muss erst durch die gesamte restliche Seite. Ein dritter Klassiker sind fest vergebene Tabulator-Nummern im Quelltext, die eine eigene, mit dem Layout kollidierende Reihenfolge erzwingen. Sichtbar wird all das nur im echten Tastatur-Durchgang.
So misst der Prüfservice die Fokus-Reihenfolge
Der Prüfservice drückt auf Ihrer Seite echt die Tabulatortaste und protokolliert die Position jedes Halts. Anschließend zählt er Rücksprünge: Stellen, an denen der Fokus deutlich nach oben oder in derselben Zeile nach links springt, entgegen der Leserichtung. Liegen mehr als 30 Prozent der Fokuswechsel im Rücksprung, gilt das Kriterium als verstoßen; zwischen 10 und 30 Prozent vermerkt der Bericht einen manuellen Prüffall, denn mehrspaltige Layouts können einzelne Sprünge erklären. Darunter gilt die Reihenfolge als nachvollziehbar. Der Bericht nennt die Zahl der Rücksprünge und der geprüften Halte — Sie sehen die Messbasis, nicht nur das Urteil.
Beispiele
Fokus springt durch tabindex
<input tabindex="3" name="name">
<input tabindex="1" name="email">
<button tabindex="2">Senden</button><input name="name">
<input name="email">
<button>Senden</button>Positive tabindex-Werte erzeugen eine eigene Reihenfolge, die von der sichtbaren abweicht. Die Quelltextreihenfolge ist die richtige.
So gehen Sie es an
- Tabben Sie durch Ihre wichtigste Seite und beobachten Sie die Markierung — folgt sie der Leserichtung von oben links nach unten rechts?
- Testen Sie besonders Formulare: Die Feldreihenfolge per Tastatur muss der sichtbaren Reihenfolge entsprechen.
- Bitten Sie Ihre Agentur, auf fest vergebene Tabulator-Nummern im Quelltext zu verzichten — die Quelltext-Reihenfolge soll die sichtbare Reihenfolge sein.
- Lassen Sie Dialogfenster den Fokus beim Öffnen ins Fenster setzen und beim Schließen an die Ausgangsstelle zurückgeben.
Weiter im Prüfbereich Barrierefreiheit
- Woran erkennt man einen guten Linktext?Ein guter Linktext benennt sein Ziel: „Preisliste herunterladen“ statt „hier klicken“. Warum WCAG 2.4.4 das verlangt und wie es geprüft wird.
- Warum braucht eine Website mehrere Wege zu jeder Seite?Menü, Suche, Inhaltsübersicht: WCAG 2.4.5 verlangt mindestens zwei Wege zu jeder Seite, weil Menschen unterschiedlich suchen und sich orientieren.
- Wie müssen Überschriften und Beschriftungen formuliert sein?Überschriften und Feldbeschriftungen müssen Thema und Zweck benennen, damit Besucher und Vorleseprogramme sich orientieren können (WCAG 2.4.6).
- Warum muss der Tastaturfokus auf einer Website sichtbar sein?Ohne sichtbaren Fokusrahmen steuern Tastaturnutzer blind. WCAG 2.4.7 verlangt eine sichtbare Fokus-Anzeige — wir messen sie per Pixel-Vergleich.
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}