WCAG 2.1 - 2.1.1
Keyboard
Alle Funktionen des Inhalts sind über eine Tastaturoberfläche bedienbar, ohne dass spezifische Zeitvorgaben für einzelne Tastenanschläge erforderlich sind, es sei denn, die zugrunde liegende Funktion erfordert Eingaben, die von der Bewegung des Benutzers abhängen und nicht nur von den Endpunkten.
Inhalt
Was steht in den Guidelines zum Success Criterium 2.1.1 - Keyboard?Was Bedeutet das Success Criterium 2.1.1 - Keyboard?Warum ist es so wichtig, das Success Criterium 2.1.1 - Keyboard zu beachten?Was hat das Success Criterium 2.1.1 - Keyboard mit dem BFSG zu tun?Lösungen für 2.1.1 - Keyboard anhand von CodebeispielenWie löse ich Verstöße gegen das Success Criterium 2.1.1 - Keyboard?Was steht in den Guidelines zum Success Criterium 2.1.1 - Keyboard?
Was Bedeutet das Success Criterium 2.1.1 - Keyboard?
Success Criterion 2.1.1 "Tastatur" (Keyboard accessible) fordert, dass alle Funktionalitäten auf einer Website ausschließlich mit einer Tastatur bedient werden können, ohne einen Zeitdruck oder spezielle Mausaktionen vorauszusetzen. Das bedeutet: Jeder Interaktionsschritt – Navigieren, Auswählen, Absenden von Formularen etc. – muss möglich sein, wenn jemand lediglich die Tastatur (Tab, Enter, Pfeiltasten, Leertaste, etc.) zur Verfügung hat. Es darf keine Inhalte oder Bedienelemente geben, die zwingend eine Maus, ein Touchpad oder ähnliche Zeigegeräte benötigen. Die Ausnahme ist, wenn die Natur einer Funktion das zwingend erfordert (zum Beispiel bestimmte Zeichenprogramme).
Warum ist es so wichtig, das Success Criterium 2.1.1 - Keyboard zu beachten?
Nicht alle Nutzer können eine Maus verwenden. Manche Menschen mit motorischer Einschränkung, Blindheit oder Sehschwächen sowie viele Screenreader-Nutzer navigieren das Web ausschließlich mit der Tastatur. Wird die Website nicht vollständig per Tastatur bedienbar angeboten, sind diese Menschen von der Nutzung ausgeschlossen. Das ist nicht nur diskriminierend, sondern kann auch zu erheblichen Reichweiten- und Reputationsverlusten führen.
Was hat das Success Criterium 2.1.1 - Keyboard mit dem BFSG zu tun?
Das Barrierefreiheitsstärkungsgesetz (BFSG) nimmt explizit Bezug auf die Anforderungen der WCAG – dazu gehört auch die Tastaturbedienbarkeit. Eine Website, die bestimmte Inhalte oder Funktionen nicht über die Tastatur zugänglich macht, erfüllt das BFSG nicht. Das betrifft sämtliche Zugänge zu Inhalten, Diensten, Formularen und Shops. Ohne Erfüllung von 2.1.1 besteht ein klarer Verstoß gegen die gesetzlichen Vorgaben.
Lösungen für 2.1.1 - Keyboard anhand von Codebeispielen
Falscher Code
<div onclick="doSomething()">Klick mich!</div>Korrekter Code
<button onclick="doSomething()">Klick mich!</button>Das 'div' ist standardmäßig nicht mit der Tastatur erreichbar und reagiert nicht auf Enter/Leertaste. Das 'button'-Element ist hingegen von Natur aus per Tastatur fokussier- und auslösbar.
Falscher Code
<a href="#" onclick="openDialog()">Dialog öffnen</a>Korrekter Code
<a href="#" onclick="openDialog(); return false;" tabindex="0" onkeydown="if(event.key === 'Enter' || event.key === ' '){ openDialog(); }">Dialog öffnen</a>Im schlechten Beispiel wird ein Link genutzt, aber die Funktionalität ist nur mit der Maus sichergestellt. Im verbesserten Beispiel wird zusätzlich sichergestellt, dass auch Enter oder Leertaste die Funktion auslösen.
Falscher Code
<div class="custom-control" tabindex="0"></div>Korrekter Code
<input type="checkbox" class="custom-control">Eigene Steuerelemente brauchen meist zusätzlichen Aufwand, um alle Tastatur-Interaktionen abzubilden. Native HTML-Steuerelemente wie 'input' oder 'button' bieten diese Funktionalität bereits ohne Zusatzaufwand.
Wie löse ich Verstöße gegen das Success Criterium 2.1.1 - Keyboard?
Unser Accessibility Audit bietet Ihnen die Möglichkeit, mittels unseres AI-basierten Barrierefreiheits-Assistenten, vollautomatisch konkrete Lösungsvorschläge für Ihre Seite zu erstellen. Dafür scannen wir Ihre Website und ihren Quellcode, finden Problemstellen und zeigen Ihnen anhand Ihres eigenen Websitecode fertige Lösungen zum Kopieren und Einfügen. Starten Sie jetzt den Accessibility Audit kostenlos.