- Stufe
- A
- Seit
- WCAG 2.0
- Einträge
- 31 / 193
2.1.1 Tastatur
Alles, was sich auf der Seite mit der Maus erledigen lässt, muss sich auch allein mit der Tastatur erledigen lassen.
/ Was es verlangt
Jeder Link, jede Schaltfläche, jedes Formularfeld, Menü, Register, jeder Schieberegler und jedes eigene Widget muss per Tastatur funktionieren, ohne einen Schritt, der die Maus braucht, und ohne Tastendrücke in einem bestimmten Tempo. Auf der Tastatur bauen andere Eingabewege auf: Screenreader, Schaltersteuerungen, Sprachsteuerung und Bildschirmtastaturen senden Tastaturbefehle. Reagiert ein Bedienelement nicht auf die Tastatur, kommen blinde Menschen und Menschen, die keine Maus halten oder führen können, an dieser Stelle nicht weiter.
Eine Seite besteht, wenn sich jede Funktion mit Tasten wie Tab, Umschalt+Tab, Eingabe, Leertaste, Pfeiltasten und Escape erreichen und bedienen lässt. Das Kriterium nennt eine Ausnahme: Funktionen, deren Eingabe vom Pfad der Bewegung abhängt und nicht nur von ihren Endpunkten, etwa Freihandzeichnen. Das Ziehen eines Elements von einem Ort an einen anderen ist nicht ausgenommen, weil dort nur die Endpunkte zählen. Das Kriterium 2.1.3 auf Stufe AAA streicht selbst diese Ausnahme.
/ Woran Seiten scheitern
- Ein div oder span hat einen Klick-Handler, aber weder tabindex noch Rolle, sodass die Tabulatortaste es überspringt.
- Ein Dropdown-Menü öffnet sich nur bei Maus-Hover und lässt sich per Tastatur nicht öffnen.
- Ein eigenes Auswahlfeld, ein Datumswähler oder ein Schieberegler reagiert auf Klicken und Ziehen, ignoriert aber die Pfeiltasten.
- Ein Link ist als a-Element ohne href geschrieben und per Skript verdrahtet, wodurch er aus der Tabulatorreihenfolge fällt.
- Das Schließen-Element eines Dialogs ist ein Icon in einem div, sodass man den Dialog per Tastatur öffnen, aber nicht schließen kann.
/ So prüfen Sie es selbst
- Legen Sie die Maus beiseite, klicken Sie in die Adresszeile und drücken Sie wiederholt Tab. Vergleichen Sie die Stopps mit den sichtbaren Bedienelementen und prüfen Sie, ob jedes den Fokus erhält.
- Lösen Sie jedes erreichte Element aus: Eingabe auf Links, Eingabe und Leertaste auf Schaltflächen, Leertaste auf Kontrollkästchen, Pfeiltasten in Optionsgruppen, Auswahlfeldern, Registern und Menüs.
- Öffnen Sie jedes Menü, Akkordeon, jeden Dialog und Datumswähler per Tastatur, benutzen Sie ihn und schließen Sie ihn mit Escape oder der Schließen-Schaltfläche.
- Suchen Sie nach Elementen, die nur auf Hover, Ziehen oder Doppelklick reagieren, und prüfen Sie, ob ein Tastaturweg zum selben Ergebnis führt.
- Nutzen Sie ein kostenloses Werkzeug wie Accessibility Insights for Web, dessen Ansicht Tab stops den Weg des Fokus einzeichnet, und vergleichen Sie diesen Weg mit der Seite.
/ So beheben Sie es
- Verwenden Sie das native Element: button für Aktionen, a mit href für Navigation, input, select und textarea für Daten. Sie nehmen den Fokus an und reagieren ohne zusätzlichen Code auf die Tastatur.
- Ist ein eigenes Element unvermeidbar, ergänzen Sie tabindex="0", die passende Rolle und neben dem Klick-Handler einen keydown-Handler für Eingabe und Leertaste.
- Belassen Sie in zusammengesetzten Widgets wie Registerlisten und Menüs ein Element auf tabindex="0" und die übrigen auf tabindex="-1" und bewegen Sie den Fokus dazwischen mit den Pfeiltasten.
- Geben Sie jeder Hover- oder Zieh-Interaktion einen zweiten Weg: eine Schaltfläche, die das Menü öffnet, Schaltflächen für nach oben und nach unten zum Umsortieren einer Liste, ein Textfeld neben einem Schieberegler.
/ Was unser Scanner prüft
Drei Prüfungen laufen auf der gerenderten Seite. keyboard-unreachable meldet ein sichtbares Element, das eine interaktive Rolle oder ein onclick-Attribut trägt und das die Tabulatortaste nicht erreicht. tabs-no-roving-focus und menu-no-roving-focus melden Registerlisten und Menüs, in denen die Zahl der Tabstopps nicht genau eins beträgt. Per Skript angehängte Klick-Handler sieht die Prüfung nicht, und keine von ihnen drückt Tasten, um zu bestätigen, dass ein Bedienelement funktioniert.
/ Wer es verletzt, nach unseren eigenen Messungen
| Stelle | Sektor | Vorkommen | Wert |
|---|---|---|---|
| Hannover | city · DE | 42 | 10 |
| Bydgoszcz | city · PL | 25 | 7 |
| Radom | city · PL | 13 | 2 |
| Chicago Transit Authority | transport · US | 12 | 4 |
| Olsztyn | city · PL | 10 | 8 |
| Phoenix | city · US | 7 | 1 |
| Trybunał Konstytucyjny | government · PL | 7 | 14 |
| Teatr Wielki Opera Narodowa | culture · PL | 6 | 3 |
| Uniwersytet Warszawski | education · PL | 5 | 4 |
| State of Washington | government · US | 4 | 9 |
| Uniwersytet Marii Curie-Skłodowskiej | education · PL | 4 | 9 |
| Uniwersytet Mikołaja Kopernika | education · PL | 4 | 6 |
| Bundesnetzagentur | government · DE | 3 | 9 |
| Baltimore | city · US | 2 | 7 |
| Freie Universität Berlin | education · DE | 2 | 7 |
| PKP Intercity | transport · PL | 2 | 2 |
| Pacjent.gov.pl | health · PL | 2 | 9 |
| Rybnik | city · PL | 2 | 6 |
| Berlin | city · DE | 1 | 41 |
| Cook County | government · US | 1 | 13 |
| Częstochowa | city · PL | 1 | 21 |
| Deutsche Bahn | transport · DE | 1 | 5 |
| Internal Revenue Service | government · US | 1 | 20 |
| Köln | city · DE | 1 | 16 |
| Ministerstwo Rolnictwa | government · PL | 1 | 32 |
| Policja | government · PL | 1 | 12 |
| RWTH Aachen | education · DE | 1 | 19 |
| Stuttgart | city · DE | 1 | 6 |
| University of Florida | education · US | 1 | 23 |
| Uniwersytet Ekonomiczny w Krakowie | education · PL | 1 | 15 |
| Łódź | city · PL | 1 | 3 |
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
Bedeutet WCAG 2.1.1, dass jedes Element fokussierbar sein muss?
Nein. Erreichbar sein muss nur, was man bedienen kann: Links, Schaltflächen, Felder und eigene Bedienelemente. Überschriften, Absätze und Bilder ohne Funktion sollten außerhalb der Tabulatorreihenfolge bleiben. Ein tabindex="0" auf statischem Text macht die Tastaturbedienung langsamer und hilft Menschen mit Screenreader nicht, denn sie lesen Text mit anderen Befehlen.
Ist Drag and Drop ein Verstoß gegen 2.1.1?
Nur wenn Ziehen der einzige Weg ist, die Aufgabe zu erledigen. Die Ausnahme im Kriterium gilt für Eingaben, die vom Pfad der Bewegung abhängen, etwa eine handschriftliche Unterschrift. Eine Karte zwischen Spalten zu verschieben hängt nur von Start und Ziel ab und braucht deshalb eine Tastaturalternative, zum Beispiel eine Verschieben-Schaltfläche oder ein Menü mit Zielen.
Erfüllen eigene Tastaturkürzel das Kriterium 2.1.1?
Sie können Teil der Antwort sein, aber man muss sie finden und anwenden können. Der verlässliche Weg ist der übliche: Tab, um ein Bedienelement zu erreichen, Eingabe oder Leertaste, um es auszulösen, Pfeiltasten innerhalb eines Widgets. Für Kürzel aus einem einzelnen Zeichen gilt zusätzlich Kriterium 2.1.4, das verlangt, dass sie sich abschalten oder neu belegen lassen.