Das Prüfverfahren zur BITV


Sie sind hier: BITV-Test > Liste der Erfolgskriterien > Prüfkriterium 2.4.3a (32 von 49)


zum WCAG-Test wechseln


Blättern: zum ersten Prüfschritt zum vorhergehenden Prüfschritt zum nächsten Prüfschritt zum letzten Prüfschritt

Prüfschritt 2.4.3a
Schlüssige Reihenfolge bei der Tastaturbedienung

Technische Angaben

Version bis 10.07.2017 | Aktuell
BITV-Bedingung 2.4.3 Fokus-Reihenfolge
WCAG-Erfolgskriterium 9.4.1 Schlüssige Reihenfolge bei Tastaturbedienung
Bewertungsalternativen ja / eher erfüllt / teilweise erfüllt / eher nicht erfüllt / nein / nicht anwendbar
Gewichtung mittleres Gewicht (2 Punkte)
Bezieht sich auf einzelne Webseite
Prüfschritt erfüllt Links, Formularelemente und Objekte werden mit der Tabulatortaste in einer schlüssigen Reihenfolge angesteuert. Eingeblendete Inhalte sowie dynamisch eingefügte oder geänderte Inhalte erscheinen an sinnvoller Stelle im Quelltext.
Prüfschritt nicht anwendbar Links, Formularelemente oder Objekte sind nicht vorhanden.

Was wird geprüft?

Wenn die Webseite mit der Tastatur bedient wird, soll die Reihenfolge, in der Links, Formularelemente und Objekte angesteuert werden, schlüssig und nachvollziehbar sein.

Warum wird das geprüft?

Die Bedienung soll geräteunabhängig möglich sein. Das bedeutet: Sie muss sowohl mit der Maus als auch mit der Tastatur möglich sein. Denn auch andere Spezialgeräte verhalten sich so wie eine Maus oder wie eine Tastatur.

Probleme gibt es meistens mit der Tastaturbedienung, denn die Mehrzahl der Webnutzer arbeitet mit der Maus, daher wird oft nur an die gedacht. Auf die Tastaturbedienbarkeit angewiesen sind zum Beispiel viele motorisch eingeschränkte Menschen oder Blinde.

Durch eine nicht nachvollziehbare Reihenfolge der Links und Formularelemente kann die Tastaturbedienbarkeit erheblich beeinträchtigt werden.

Manche Seiten präsentieren mittels JavaScript dynamische Inhalte, etwa Rückmeldungen bei fehlerhaften Formular-Eingaben oder Nachrichten-Teaser, die im Wechsel angezeigt werden. Während dynamische Änderungen der Seite für sehende Nutzer unmittelbar wahrnehmbar sind, werden sie oft von Screenreader-Nutzern gar nicht oder erst mit Verzögerung wahrgenommen.

Wenn nach dem Laden einer Seite weitere Elemente über DOM-Scripting in den Quellcode einer Seite eingefügt werden, soll diese Einfügung unterhalb des auslösenden Elements geschehen, damit Screenreader hinzugefügte Elemente bemerken und vorlesen.

In manchen Fällen können sie, wenn dies im Kontext verständlich ist, auch weiter unten auf der Seite eingefügt oder verändert werden (also nicht direkt nach dem auslösenden Element).

Werden Elemente an anderer Stelle, etwa am Seitenende, eingefügt (das ist oft bei Modalen Dialogen der Fall), müssen Scripts dafür sorgen, dass eine sinnvolle Fokusreihenfolge geschaffen wird und auch blinde Nutzer die Änderung mitbekommen.

Wie wird geprüft?

1. Anwendbarkeit des Prüfschritts

Der Prüfschritt ist anwendbar, wenn die Seite Links, Formularelemente oder Objekte enthält.

2. Prüfung

  1. Seite im Internet Explorer laden.
  2. Mit der Tabulatortaste die Links, Formularelemente und Objekte durchgehen und prüfen, ob die Reihenfolge im Wesentlichen nachvollziehbar ist.
  3. Seite in Firefox aufrufen und die Prüfung wiederholen.

2.1. Prüfung von dynamisch eingefügten Inhalten

Wenn Inhalte dynamisch generiert werden (also Interaktionen auf der Seite Inhalte hinzufügen, die nicht schon in der Ansicht ohne CSS auf der frisch geladenen Seite sichtbar sind):

  1. Seite im Firefox aufrufen.
  2. Voreinstellung im Firefox: Im Menü Extras > Einstellungen wählen. Den Bereich "Erweitert" auswählen, im linken Reiter "Allgemein" im Bereich "Eingabehilfen" die Option "Markieren von Text mit der Tastatur zulassen" auswählen. Hierdurch wird die Cursor-Position als blinkende Einfügemarke angezeigt. Dies entspricht in der Regel dem Screenreader-Fokus.
  3. Dynamisch eingefügte Inhalte aufrufen, etwa durch Formulareingabe oder Auslösen eines Links.
  4. Browsereigenes Entwicklerwerkzeug (Inspektor für Firefox) aufrufen, das Element-Symbol (das Icon zeigt den Cursor auf einer Taste) links in der Menüleiste auswählen und den eingefügten Inhalt anklicken. Im eingeblendeten Fenster lässt sich nun der generierte Quellcode im Zusammenhang einsehen.
  5. Position des eingefügten Elements prüfen.

    Fall 1: Erscheint der eingefügte Inhalt im Quellcode unterhalb des auslösenden Elements? (Siehe dazu die Erläuterung in Abschnitt 3. Hinweise.)

    Fall 2: Wenn generierte Pseudo-Fenster (Modalen Dialogen) im Quellcode nicht direkt nach dem auslösenden Element, sondern an anderer Stelle, etwa ganz am Seitenende, eingefügt werden:

    1. Pseudo-Fenster schließen und vom auslösenden Element aus erneut mit der Tastatur aufrufen.
    2. Erkennen auch Screenreader-Nutzer, dass ein neuer Inhalt hinzugefügt wurde? Das kann auf verschiedene Weise geschehen, z.B.:
      • Der Fokus wird über einen Skript zum Beginn des eingefügten Elements verschoben (die blinkende Einfügemarke ist an dessen Beginn sichtbar)
      • Der Link-/Button-Text oder eine Eigenschaft des auslösenden Elements (etwa disabled) wird geändert und beim Weiter-Tabben erhält das hinzugefügte Element den nächsten Fokus
    3. Wenn das Pseudo-Fenster geschlossen wird: wird der Fokus auf das auslösende Element zurückverschoben?

3. Hinweise

  • Die Tabulatorreihenfolge sollte im Wesentlichen der visuellen Anordnung auf dem Bildschirm folgen. Kleinere Abweichungen sind kein Problem, manchmal ist es ja auch gar nicht möglich, aus der Anordnung auf dem Bildschirm eine Reihenfolge zwingend abzuleiten.
  • Die Tabulatorreihenfolge ist schwer nachzuvollziehen, wenn sie über unsichtbare ausführbare Elemente geht. Das betrifft insbesondere aufeinander folgende nicht sichtbare Sprunglinks.
  • Wenn die Tabulatorreihenfolge nicht gut erkennbar ist, weil z.B. die Fokushervorhebung unterdrückt wird, ist das Bookmarklet Show Tab Focusvon Jeff Smith ein hilfreiches Werkzeug zum hervorheben der aktuellen Position.
  • Die Prüfung erfolgt bei eingeschaltetem JavaScript.
  • Der Prüfer muss mit der Funktionsweise der eingesetzten Browser vertraut sein, er muss wissen, welche Tasten und Tastenkombinationen für die Tastaturbedienung vorgesehen sind.

    Wichtig in diesem Zusammenhang:

    • Die Felder von Formularen können im Internet Explorer trotz korrekter Auszeichnung unter Umständen nicht mit der Tabulatortaste durchwandert werden. Wenn das Browserfenster nicht den Fokus hat, darf man nicht einfach hineinklicken und dann erst mit der Tastaturbedienung anfangen. Der Fokus muss vielmehr per Tastatur (F6) zum Browserfenster bewegt werden.
    • Auswahllisten ohne Submit-Button, die auf onchange reagieren, können im Internet Explorer mit den Pfeiltasten allein nicht bedient werden, da immer schon die erste Listenoption ausgelöst wird. Um solche Auswahllisten durchzublättern, muss man sie zunächst mit der Tastenkombination "ALT + Pfeil nach unten" öffnen. Dann kann man mit den Pfeiltasten nach oben und unten durch die Optionen blättern und mit der Eingabetaste eine Option auswählen.

Zur Einfügung dynamisch generierter Inhalte unterhalb des auslösenden Elements:

In manchen Fällen kann es angemessen sein, Inhalte nicht unmittelbar nach dem auslösenden Element, sondern weiter unten auf der Seite dynamisch einzufügen bzw. zu aktualisieren. Ein Beispiel ist die dynamische Ergebnisanzeige unterhalb eines mehrstufigen Suchformulars. Hier ist zu prüfen, ob das dynamische Verhalten des Formulars schon aus dem Kontext der Eingabefelder bzw. Auswahllisten heraus bzw. durch erläuternde Texte oder Hilfefunktionen deutlich wird.

4. Bewertung

Erfüllt:

  • Die Reihenfolge, in der Links, Formularelemente und Objekte mit der Tabulatortaste angesteuert werden, ist im Wesentlichen nachvollziehbar und schlüssig.

Nicht voll erfüllt:

  • Die Tabulatorreihenfolge ist nicht schlüssig, sie weicht ohne nachvollziehbaren Grund von der visuellen Anordnung ab oder der Tastaturfokus ist über mehr als drei aufeinanderfolgende Stationen im Browserfenster nicht sichtbar.
  • Pseudofenster, die außerhalb der normalen Quellcodereihenfolge, also etwa am Seitenende, eingefügt werden, erhalten nicht unmittelbar oder beim nächsten Tabben den Fokus.
  • Beim Schließen von Pseudofenstern wird der Fokus nicht auf das auslösende Element zurückgesetzt.

Nicht erfüllt:

  • Die Reihenfolge, in der Links, Formularelemente und Objekte mit der Tabulatortaste angesteuert werden, ist nicht nachvollziehbar und erschwert die Bedienung mit der Tastatur erheblich.

Einordnung des Prüfschritts

Formulierung BITV 2.0

2.4.3 Fokus-Reihenfolge

Wenn die Navigationssequenz Einfluss auf Bedeutung oder Bedienung der Webseite hat, erhalten fokussierbare Komponenten den Fokus in der Reihenfolge, die sicherstellt, dass Bedeutung und Bedienbarkeit erhalten bleiben.

Abgrenzung zu anderen Prüfkriterien

  • In diesem Prüfschritt wird die Tabreihenfolge geprüft, egal, ob diese der Anordnung fokussierbarer Elemente im Quellcode entspricht oder über tabindex und Skripte erzeugt wird.
  • Die grundsätzliche Erreichbarkeit und Auslösbarkeit von interaktiven Elementen ist Gegenstand von Prüfschritt 2.1.1a "Ohne Maus nutzbar".
  • Die Sichtbarkeit des Fokus ist Gegenstand von Prüfschritt 2.4.7a "Aktuelle Position des Fokus deutlich"
  • Geprüft wird hier die richtige Position eingeblendeter oder eingefügter Inhalte. Ob diese Inhalte selbst sinnvoll sind, wird in anderen Prüfkriterien wie 3.3.3a "Hilfe bei Fehlern"" oder 2.4.4a "Aussagekräftige Linktexte" geprüft.

Einordnung des Prüfschritts nach WCAG 2.0

Guideline

Success criterion

Techniques

General Techniques
HTML Techniques
Scripting Techniques
Failures

Blättern: zum ersten Prüfschritt zum vorhergehenden Prüfschritt zum nächsten Prüfschritt zum letzten Prüfschritt