WCAG Erfolgskriterien
WCAG 2.0 A

Erfolgskriterium 2.4.3
Fokusreihenfolge

[Materialsammlung]

Die Reihenfolge, in der fokussierbare Elemente technisch und visuell angeordnet sind, muss, wo dies möglich ist, bedeutungsvoll und bedienbar sein.

WCAG Kontext

Konformitätsstufe A

Prinzip 2. Bedienbar Operable

Komponenten der Benutzerschnittstelle und die Navigation müssen bedienbar sein.

Richtlinie 2.4 Navigierbar

Stelle Mechanismen bereit, die bei der Nutzung helfen zu navigieren, Inhalt zu finden und den Standort festzulegen.

2.4.11 Fokus nicht überdeckt (Minimum)
Wenn ein Element den Tastaturfokus erhält, muss es zumindest teilweise sichtbar sein.
2.4.12 Fokus nicht überdeckt (Erhöht)
Konformitätsstufe AAA
Wenn ein Element den Tastaturfokus erhält, muss es gänzlich sichtbar sein.
2.4.13 Fokus Erscheinungsbild
Konformitätsstufe AAA
Ein Fokusindikator muss ausreichend Größe und Kontrast aufweisen.

Übersetzung des Erfolgskriteriums

Fokussierbare Komponenten erhalten den Fokus in einer Reihenfolge, die Bedeutung und Bedienbarkeit gewährleistet, sofern:

  1. die Webseite sequenziell navigiert werden kann und
  2. die Abfolge der Navigation Bedeutung oder Bedienung berührt.
Anmerkungen zur Übersetzung
  • Die Satzstellung wurde umgebaut.
  • Die Bedingungen wurden in einer nummerierten Liste dargestellt.
Englischsprachiger Originaltext des Erfolgskriteriums

If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.

WCAG | Success Criterion 2.4.3 Focus Order

Zum raschen Verständnis

Links, Eingabefelder, Schalter und andere Formularelemente können durch Drücken der Tabulator-Taste ohne Maus angesteuert werden. Sie sind die fokussierbaren Elemente, die von diesem Erfolgskriterium berührt werden.

Die grundlegende Fokusreihenfolge wird sich sinnvollerweise in der Regel von Links nach rechts und von oben nach unten bewegen. Dies erleichtert die visuelle Verfolgbarkeit des Fokus. Im Detail kann die Reihenfolge aber von dieser geografischen Anordnung abweichen.

Die Fokusreihenfolge korrekt umzusetzen, wird besonders dann aufwendig, wenn innerhalb einer Webseite zwischen unterschiedlichen Ebenen gewechselt werden kann und soll.

Wechsel zwischen Ebenen

Ein Dialogfeld (modal dialog) weist etwa folgende Anforderungen an die Fokusreihenfolge und Tastaturbedienung auf:

  1. Wird der zuständige Schalter gedrückt, öffnet sich das Dialogfeld und der Fokus befindet sich auf dem ersten interaktiven Element im Dialogfeld.
  2. Solange das Dialogfeld bearbeitet wird, verlässt der Fokus nicht das Dialogfeld. Nach dem letzten Bedienelement springt der Fokus durch Drücken der Tabulator-Taste etwa wieder zum ersten Element im Dialog.
  3. Nach dem Verlassen des Dialogfelds kehrt der Fokus zum zuständigen Schalter zurück oder springt zu dessen nachfolgenden Element.

Autofocus-Effekte

Mit dem HTML Attribut autofocus oder durch Scripts kann der Fokus automatisch etwa auf ein Eingabefeld gesetzt werden. Befindet sich der (virtuelle) Fokus beim Laden nicht am Seitenanfang, ist das in der Regel problematisch.

Die Wahrnehmung mittels Screen Reader ist linear und nach dem Laden einer Seite nach unten gerichtet. Dies entspricht zumindest der überwiegenden Erwartungshaltung und der Entwicklung eines mentalen Aufbauplans für eine Seite durch deren Nutzer*innen.

Informationen, die sich vor dem automatisch fokussierten Element befinden, bleiben mit hoher Wahrscheinlichkeit unbemerkt. Dies ist vor allem in Formularen ein Problem, denen Erläuterungen zum Ausfüllen vorangestellt sind.

Der Fokus darf sich unter folgenden Bedingungen beim Laden abseits des Seitenanfangs befinden:

  1. Die Seite enthält eine einzelne vorrangige Funktion, die von fast allen Nutzer*innen nach dem Laden unmittelbar verwendet wird.
  2. Die Seite wird von den einzelnen Nutzer*innen wahrscheinlich öfters genutzt.
WebAIM Discussion | set cursor in search box
Diskussion zur Verwendung des autofocus-Attributs aus dem Jahr 2019
Accessibility Tips: Be Cautious When Using Autofocus
Problematik der Verwendung des autofocus-Attributs.

In der Praxis treffen diese Kriterien lediglich auf Webseiten zu, die ausschließlich zur Suche oder zum Log-In dienen.

Zielgruppen

Diese Eingangsinformationen bieten nur einen ersten Einblick in die Thematik. Genauere Informationen finden Sie in der Linksammlung zum Erfolgskriterium.

Testverfahren

Maschinelle Prüfung

Tools, die explizit zur Prüfung der digitalen Barrierefreiheit dienen, bieten noch keine Erkenntnisse. Noch gibt es keine künstliche Intelligenz, welche die Bedeutsamkeit von Tastatureingaben überprüfen könnte.

Manuelle Prüfung

  1. Prüfe, ob die Webseite überhaupt sequenziell navigiert werden kann.
  2. Überlege, ob für die Webseite die Abfolge der Navigation überhaupt von Relevanz ist.
  3. Aktualisiere die Webseite (meist F5).
  4. Drücke fortlaufend Tabulator und überlege, ob die Reihenfolge den Anforderungen an Bedeutung und Bedienbarkeit entspricht.
  5. Aktiviere jeweils Schalter und prüfe, ob sich der Fokus an erwartbarer Stelle befindet.

Es ist vielfach aufschlussreich, Stylesheets zu aktivieren, um eine linearisierte Darstellung zu erhalten. Offensichtliche Mängel in der Reihenfolge werden so deutlich sichtbar. Es empfiehlt sich, die Webseite parallel in einem anderen Browserfenster zu öffnen.

Prüfung durch betroffene Menschen (Peer Evaluation)

Menschen, die auf die Bedienung allein mit der Tastatur angewiesen sind, verfügen über einen Erfahrungsschatz, der Problembereiche rascher und genauer identifizieren lässt.