Zweiter Blick: Erfolgskriterium 2.4.3
WCAG Erfolgskriterien
WCAG 2.0 A

Erfolgskriterium 2.4.3
Fokusreihenfolge

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.

Ü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.

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 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.
WAI-ARIA Authoring Practices | Discernible and Predictable Keyboard Focus
Die nicht-normativen Verwendungskriterien aus dem Praxishandbuch für ARIA-Elemente.

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.