- Stufe
- A
- Seit
- WCAG 2.0
- Einträge
- 94 / 193
2.4.3 Fokus-Reihenfolge
Wenn jemand sich mit der Tabulatortaste durch eine Seite bewegt, muss der Fokus in einer Reihenfolge wandern, die zu Bedeutung und Aufbau der Seite passt.
/ Was es verlangt
Wer die Tastatur nutzt, bewegt sich der Reihe nach von einem Bedienelement zum nächsten, und diese Reihenfolge ist alles, was zur Verfügung steht. Springt der Fokus von der Kopfzeile in die Fußzeile und zurück oder bleibt er außerhalb eines Dialogs, der sich gerade geöffnet hat, ergibt die Seite keinen Sinn mehr. Menschen mit Screenreader sehen das Layout nicht, das den Sprung erklären würde. Sehende Tastaturnutzende und Menschen mit Vergrößerung, die nur einen kleinen Ausschnitt sehen, verlieren den Fokus aus den Augen.
Das Kriterium gilt, wo eine Seite sequenziell navigiert werden kann und die Reihenfolge Bedeutung oder Bedienung beeinflusst. Die Reihenfolge muss der visuellen Anordnung nicht exakt entsprechen. Sie muss Bedeutung und Bedienbarkeit erhalten, und es kann mehr als eine gültige Reihenfolge geben. Ein Verstoß ist eine Reihenfolge, die zusammengehörige Bedienelemente trennt, außerhalb der Abfolge durch die Seite führt oder den Fokus hinter dem Dialog oder Menü zurücklässt, das sich gerade über der Seite geöffnet hat.
/ Woran Seiten scheitern
- Positive tabindex-Werte wie tabindex="5" ziehen einzelne Bedienelemente an den Anfang der Reihenfolge, vor alles andere.
- Die CSS-Eigenschaft order, flex-direction: row-reverse oder absolute Positionierung zeigt Bedienelemente in einer Abfolge, während das DOM sie in einer anderen führt.
- Ein modaler Dialog öffnet sich, aber der Fokus bleibt auf der Seite dahinter, sodass Tab weiter durch Inhalte wandert, die man nicht sieht.
- Ein Dialog oder Menü schließt sich und der Fokus fällt an den Anfang des Dokuments, statt zur Schaltfläche zurückzukehren, die ihn geöffnet hat.
- Per Skript eingefügter Inhalt, etwa ein aufgeklapptes Panel, wird ans Ende des DOM gehängt, weit weg vom Bedienelement, das ihn eingeblendet hat.
/ So prüfen Sie es selbst
- Drücken Sie Tab vom Seitenanfang bis zum Ende und beobachten Sie den Fokusindikator. Er sollte so wandern, wie man die Seite liest, ohne zurückzuspringen.
- Gehen Sie mit Umschalt+Tab wieder nach oben und prüfen Sie, ob der Rückweg den Hinweg spiegelt.
- Öffnen Sie jeden Dialog, jedes Menü und jedes aufklappbare Panel per Tastatur. Der Fokus sollte in den neuen Inhalt wandern, bei einem modalen Dialog darin bleiben und nach dem Schließen zum Auslöser zurückkehren.
- Suchen Sie im Markup nach tabindex-Werten über 0. In der DevTools-Konsole listet document.querySelectorAll('[tabindex]') jedes Element auf, das einen Wert setzt.
- Lesen Sie die DOM-Reihenfolge im Elements-Panel und vergleichen Sie sie mit dem sichtbaren Layout.
/ So beheben Sie es
- Entfernen Sie jeden positiven tabindex. Nutzen Sie tabindex="0", um ein Element in die natürliche Reihenfolge aufzunehmen, und tabindex="-1" für Elemente, die nur per Skript fokussiert werden.
- Ordnen Sie das DOM so, dass es der sichtbaren Abfolge entspricht, statt mit der CSS-Eigenschaft order oder absoluter Positionierung umzusortieren.
- Setzen Sie beim Öffnen eines modalen Dialogs den Fokus hinein. Das native dialog-Element, mit showModal() geöffnet, erledigt das, und das Attribut inert hält den Fokus vom Rest der Seite fern.
- Rufen Sie beim Schließen eines Dialogs oder Menüs focus() auf dem Bedienelement auf, das ihn geöffnet hat.
- Fügen Sie eingeblendeten Inhalt im DOM direkt hinter seinem Auslöser ein.
/ Was unser Scanner prüft
dialog-focus-outside meldet einen Dialog, der beim Prüfen der Seite offen ist, während der Fokus außerhalb liegt. focus-order-jumps vergleicht die Position jedes Tabstopps mit dem vorherigen und meldet, wenn der Fokus auf der Seite wieder nach oben wandert, ohne nach rechts zu gehen. Fixierte Elemente bleiben außen vor. Drei sich überschneidende Regeln melden tabindex-Werte über 0. Keine Prüfung kann beurteilen, ob eine Reihenfolge sinnvoll ist, und keine öffnet einen geschlossenen Dialog.
/ 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
Muss die Fokus-Reihenfolge der visuellen Reihenfolge entsprechen?
Nicht exakt. Das Kriterium verlangt eine Reihenfolge, die Bedeutung und Bedienbarkeit erhält, und das können mehrere sein. In der Praxis erwarten Menschen ein Layout, das von oben nach unten in derselben Abfolge gelesen wird, in der es im DOM steht. Eine Abweichung zwischen DOM und Bildschirm ist der häufigste Grund, warum eine Reihenfolge keinen Sinn mehr ergibt.
Ist ein positiver tabindex ein WCAG-Verstoß?
Nicht automatisch. HTML erlaubt einen positiven Wert, und wenn die entstehende Reihenfolge die Bedeutung weiterhin erhält, besteht die Seite. Das Problem: Elemente mit positiven Werten kommen vor allen anderen Bedienelementen der Seite, sodass ein einziges genügt, um die Abfolge umzuwerfen, und die Ordnung bei jeder Änderung der Seite bricht. Das W3C dokumentiert die so entstehende Unordnung als Fehler F44.
Wohin gehört der Fokus, wenn ein Dialog sich öffnet und schließt?
Öffnet sich ein modaler Dialog, sollte der Fokus hineinwandern, auf das erste Bedienelement, die Überschrift oder den Dialog selbst, und Tab sollte darin bleiben, solange er offen ist. Beim Schließen sollte der Fokus zu dem Bedienelement zurückkehren, das ihn geöffnet hat. Bleibt der Fokus auf der Seite dahinter, wandern Tastaturnutzende durch Inhalte, die sie nicht sehen.