Signatur
Beschreibung
Die Eigenschaft ariaKeyShortcuts gehört zum ARIAMixin und ist auf jedem Element verfügbar. Sie spiegelt das HTML-Attribut aria-keyshortcuts direkt wider: Lesen liefert den Attributwert als String, Schreiben setzt das Attribut. Über null wird das Attribut entfernt.
Mit aria-keyshortcuts teilt man assistiven Technologien wie Screenreadern mit, welche Tastenkombinationen man selbst per JavaScript eingebaut hat, um ein Element zu aktivieren oder zu fokussieren. Das Attribut ist rein informativ: Der Browser legt dadurch keine Tastenkürzel an. Die eigentliche Tastaturbehandlung schreibt man weiterhin selbst, z. B. mit einem keydown-Listener.
Der Wert ist eine durch Leerzeichen getrennte Liste von Kombinationen. Innerhalb einer Kombination werden die Tasten mit + verbunden, etwa "Control+S" oder "Alt+Shift+P Control+P". Modifikatortasten wie Control, Alt, Shift und Meta stehen vor der eigentlichen Taste. Die Tastennamen entsprechen den Werten von KeyboardEvent.key, für die Leertaste schreibt man Space.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | null | Nur beim Setzen: eine durch Leerzeichen getrennte Liste von Tastenkombinationen, z. B. "Control+Shift+F". Mit null wird das Attribut aria-keyshortcuts entfernt. |
Rückgabewert
aria-keyshortcuts oder null, wenn das Attribut nicht gesetzt ist.Beispiele
Wert lesen und ändern
// HTML: <button id="save" aria-keyshortcuts="Control+S">Speichern</button>
const button = document.querySelector('#save');
console.log(button.ariaKeyShortcuts);
// Zweites Kürzel für macOS ergänzen
button.ariaKeyShortcuts = 'Control+S Meta+S';
console.log(button.getAttribute('aria-keyshortcuts'));Tastenkürzel umsetzen und für Screenreader kennzeichnen
const searchInput = document.createElement('input');
searchInput.type = 'search';
searchInput.ariaLabel = 'Suche';
searchInput.ariaKeyShortcuts = 'Control+K';
document.body.append(searchInput);
// Das Attribut beschreibt das Kürzel nur – umsetzen muss man es selbst
document.addEventListener('keydown', (event) => {
if (event.ctrlKey && event.key.toLowerCase() === 'k') {
event.preventDefault();
searchInput.focus();
}
});
console.log(searchInput.outerHTML);Kürzel entfernen, wenn eine Funktion deaktiviert wird
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Löschen';
deleteButton.ariaKeyShortcuts = 'Delete';
const disableShortcut = () => {
deleteButton.ariaKeyShortcuts = null; // entfernt das Attribut
};
disableShortcut();
console.log(deleteButton.hasAttribute('aria-keyshortcuts'), deleteButton.ariaKeyShortcuts);// Wichtig · Fallstricke
- Nur beschreibend: Das Setzen von
ariaKeyShortcutslegt kein Tastenkürzel an. Die Tastaturbehandlung muss man selbst schreiben, sonst verspricht man Nutzern assistiver Technologien eine Funktion, die es nicht gibt. - Konflikte vermeiden: Kürzel sollten nicht mit Tastenkürzeln des Browsers, des Betriebssystems oder von Screenreadern kollidieren (z. B.
Control+Toder einzelne Buchstaben ohne Modifikatortaste im Lesemodus). - Keine Prüfung: Der Browser prüft den String nicht auf Gültigkeit. Die Schreibweise (
ControlstattCtrl, Trennung mit+und Leerzeichen) muss man selbst korrekt einhalten. - Auch sehende Nutzer sollten das Kürzel erfahren, etwa über einen Tooltip oder eine Hilfeseite. Screenreader lesen das Attribut unterschiedlich zuverlässig vor.
- Kompatibilität: Die gespiegelte Eigenschaft gibt es erst in Firefox 119. Für ältere Browser verwendet man
setAttribute('aria-keyshortcuts', …). Das Attribut selbst funktioniert überall.