2.1.4 Zeichentastenkombinationen
WCAG-Definition
Wenn eine Funktion einer Webseite durch einen einzelnen Buchstaben, ein einzelnes Satzzeichen, eine Ziffer oder ein anderes einzelnes Zeichen aus der Tastatur aktiviert werden kann (z. B. Tastenkombinationen), dann muss mindestens eine der folgenden Bedingungen erfüllt sein:
-
Die Tastenkombination kann deaktiviert werden.
-
Die Tastenkombination kann so konfiguriert werden, dass sie nur aktiviert wird, wenn auch eine Nicht-Zeichen-Taste (wie
Ctrl,Alt,Shift) gleichzeitig gedrückt wird. -
Die Funktion wird nur bei Fokus auf dem entsprechenden UI-Element aktiviert.
Warum ist das wichtig?
Einzelne Tastenbefehle wie „drücke S, um zu speichern“ können mit Screenreadern, Spracherkennung oder anderen assistiven Technologien in Konflikt geraten. Diese Systeme verwenden selbst viele einzelne Tastaturbefehle. Wenn eine Webseite dieselben Tasten nutzt, kann es zu versehentlichen oder ungewollten Aktionen kommen.
Ausreichende Techniken
1. Tastenkürzel deaktivierbar machen
Biete eine Einstellungsoption oder ein Toggle an, um Shortcuts zu deaktivieren.
<label> <input type="checkbox" id="toggleShortcuts" checked> Tastaturkürzel aktivieren</label>
let shortcutsEnabled = true;document.getElementById('toggleShortcuts').addEventListener('change', function () { shortcutsEnabled = this.checked;});
document.addEventListener('keydown', function (e) { if (!shortcutsEnabled) return; if (e.key === 's') { // Speichern-Funktion e.preventDefault(); saveData(); }});
2. Nur mit Modifier-Tasten kombinieren (Ctrl, Alt, Shift)
Statt nur e.key === 's', verwende:
document.addEventListener('keydown', function (e) { if (e.key === 's' && e.ctrlKey) { e.preventDefault(); saveData(); }});
Vorteil: Es verhindert Konflikte mit Screenreadern oder Spracheingabe.
3. Nur bei Fokus auf bestimmten Elementen
Shortcuts nur aktivieren, wenn ein bestimmtes Element fokussiert ist:
document.getElementById('noteInput').addEventListener('keydown', function (e) { if (e.key === 's') { e.preventDefault(); saveNote(); }});
Damit wird die Funktion nur ausgeführt, wenn das Eingabefeld aktiv ist.
Beratungstechniken
-
Frage das Team: Werden auf der Website Shortcuts verwendet? Wenn ja – sind sie dokumentiert und konfigurierbar?
-
Teste mit Screenreader & Spracherkennung: Z. B. NVDA, JAWS, Dragon NaturallySpeaking. Kommt es zu ungewollten Aktionen?
-
Dokumentiere und informiere: Wenn Tastenkürzel verwendet werden, sollten sie auf der Seite beschrieben und einstellbar sein.
-
Nutze ARIA-Praxisempfehlungen: z. B. aria-keyshortcuts="Control+S" ist deklarativ, aber nur unterstützend – kein Ersatz für funktionale Absicherung!
Fehler
keydown auf document ohne Modifier-Tasten - Screenreader-Nutzer*innen lösen unbeabsichtigt Funktionen aus.
Keine Möglichkeit, Shortcuts abzuschalten - Menschen mit motorischen Einschränkungen können Eingaben nicht verhindern.
Fokus-unabhängige Aktionen - Tastenkombinationen funktionieren überall – auch beim Tippen in Formularfeldern oder Eingabemasken.
Nicht dokumentierte Tastenkürzel - Nutzer*innen wissen nicht, warum plötzlich etwas ausgelöst wurde.