2.4.3 Fokus-Reihenfolge

Was bedeutet das?

Die Tab-Reihenfolge folgt normalerweise der Reihenfolge im Quelltext. Weicht sie stark von der sichtbaren Anordnung ab, springt der Fokus scheinbar wahllos über die Seite. Wer per Tastatur arbeitet, verliert dann die Orientierung oder füllt ein Formular in falscher Reihenfolge aus.

Die Reihenfolge muss nicht exakt der Leserichtung entsprechen, aber logisch sein. Wichtig ist auch, was nach dem Öffnen und Schließen von Dialogen oder Menüs passiert: Der Fokus muss an eine sinnvolle Stelle gelangen.

Wem hilft das?

• Tastaturnutzer, die der Fokusanzeige über die Seite folgen
• Screenreader-Nutzer, die Inhalte in der Fokusreihenfolge erleben
• Menschen mit Bildschirmlupe, die nur einen Ausschnitt sehen

Typische Fehler

• Positive tabindex-Werte wie tabindex="3", die die natürliche Reihenfolge durcheinanderbringen
• Mit CSS umsortierte Spalten (order, flex-direction: row-reverse), deren Quelltext-Reihenfolge nicht mehr passt
• Ein Dialog öffnet sich, der Fokus bleibt aber hinter ihm auf der Seite
• Nach dem Schließen eines Dialogs landet der Fokus am Seitenanfang statt beim auslösenden Knopf

So prüfen wir das

• Belege Belege: Unser Scanner sammelt Material, zum Beispiel Screenshots, Listen und Messungen.

Prüffrage: Folgt die Tab-Reihenfolge (nummerierter Screenshot) einer logischen Abfolge?

Entschieden wird jedes Kriterium von einem Menschen. Kein Kriterium gilt automatisch als erfüllt.

So beheben Sie es

<input id="plz" tabindex="2">
<input id="ort" tabindex="1">
<input id="strasse" tabindex="3">

<input id="strasse" autocomplete="street-address">
<input id="plz" autocomplete="postal-code">
<input id="ort" autocomplete="address-level2">

Ohne positive tabindex-Werte folgt der Fokus der Reihenfolge im Quelltext, die hier der sichtbaren Anordnung entspricht.

Praxistipps

• Ordnen Sie Inhalte im HTML so, wie sie gelesen werden sollen, und nutzen Sie CSS nur für die Optik.

Ratgeber und Muster dazu

• Ohne Maus ans Ziel: Tastatur und FokusViele Menschen bedienen das Web ohne Maus: mit Tastatur, Schaltern, Sprachsteuerung oder Screenreader. Hier lesen Sie, was dafür funktionieren muss und wie Sie den Fokus in modernen Web-Apps richtig führen.
• Cookie-Banner, die niemanden aussperrenDer Cookie-Banner ist oft das Erste, was Besucher sehen, und für manche das Letzte: Wer ihn mit Tastatur oder Screenreader nicht bedienen kann, kommt nicht weiter. So machen Sie ihn für alle bedienbar.
• TabsEin Bereich von mehreren, Wechsel mit den Pfeiltasten.
• Modaler DialogFokus beim Öffnen hinein, Escape schließt, Fokus zurück.

Offizielle Quelle

Understanding WCAG 2.2 beim W3C (Englisch): 2.4.3 Focus Order