The HTML aria-keyshortcuts attribute
The aria-keyshortcuts attribute lists the keyboard shortcuts that activate or focus an element, for example "Alt+Shift+P". It only announces the shortcut; you still have to implement the key handling yourself.
Overview
The aria-keyshortcuts attribute lists the keyboard shortcuts that activate or focus an element.
It is a widget property whose value is a space-separated list of key combinations, each joining its keys with +, for example Alt+Shift+P. It is exposed only to assistive technology and has no visual effect, and it does not implement the shortcut: you still have to handle the keystroke yourself.
Like all ARIA, aria-keyshortcuts changes only the accessibility tree (what assistive technology perceives), never the element's behavior or appearance. The first rule of ARIA applies: if a native HTML element or attribute conveys this, use that instead, and only reach for ARIA when nothing native fits.
Syntax
<button aria-keyshortcuts="Alt+S">Save</button>Values
| Value |
|---|
| A space-separated list of shortcuts, e.g. "Alt+Shift+P Control+." |
Example
<button aria-keyshortcuts="Control+S">Save</button>Best practices
- Follow the first rule of ARIA: use a native HTML element or attribute that conveys this where one exists, rather than adding ARIA.
- Write each combination with
+between the keys, separating multiple shortcuts with spaces. - Implement the key handling yourself; the attribute only announces the shortcut.
- Avoid clashing with the browser's own shortcuts and with assistive-technology key bindings.
Frequently asked questions
What does aria-keyshortcuts do?
How do I write the value?
+ between modifier and key, for example Control+Shift+K.