JavaScript Element ariaKeyShortcuts Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word ARIAKEYSHORTCUTS

Definition

Element.ariaKeyShortcuts reflects the aria-keyshortcuts attribute: keyboard shortcuts an author has implemented to activate or give focus to an element (MDN).

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use el.ariaKeyShortcuts. Start with this line.

JavaScript
el.ariaKeyShortcuts;
CallWhat it does
el.ariaKeyShortcuts;Primary signature.

Built into the browser. Read or assign el.ariaKeyShortcuts — no import required.

Library declarations
JavaScript
el.ariaKeyShortcuts;

Parameters

ParameterDescription
PropertyRequired. el.ariaKeyShortcuts
ValueRequired. String (e.g. "Control+S")
HandlerRequired. Your own keydown logic

Return Value

Return ValueDescription
*The current value of el.ariaKeyShortcuts.

JavaScript Examples

Example 1 — Get and Set ariaKeyShortcuts (MDN)

Read the documented shortcut, then update it.

JavaScript
const el = document.getElementById("skip-link");
console.log(el.ariaKeyShortcuts); // "Alt+Shift+A"
el.ariaKeyShortcuts = "Alt+Shift+M";
console.log(el.ariaKeyShortcuts); // "Alt+Shift+M"
Try It Yourself

How It Works

  1. Select the control that has a shortcut (MDN uses a skip link).
  2. Read ariaKeyShortcuts. Starts as "Alt+Shift+A".
  3. Assign a new string. Reflects to aria-keyshortcuts.
  4. Update your real handler to match the new shortcut.

Example 2 — Document a Save Shortcut

Announce Control+S on a Save button you already wire up.

JavaScript
const save = document.getElementById("save");
save.ariaKeyShortcuts = "Control+S";
console.log(save.ariaKeyShortcuts); // "Control+S"
console.log(save.getAttribute("aria-keyshortcuts")); // "Control+S"
Try It Yourself

How It Works

  1. Pick the action control (Save button).
  2. Set a clear shortcut string using + between modifiers and the key.
  3. Confirm reflection with getAttribute("aria-keyshortcuts").
  4. Implement Control+S in a key listener separately.

Example 3 — Pair Documentation with keydown

Document the shortcut and handle the same keys in script.

JavaScript
const skip = document.getElementById("skip-link");
const content = document.getElementById("content");
skip.ariaKeyShortcuts = "Alt+Shift+A";

document.addEventListener("keydown", (e) => {
  if (e.altKey && e.shiftKey && e.key.toLowerCase() === "a") {
    e.preventDefault();
    content.focus();
  }
});
Try It Yourself

How It Works

  1. Document the shortcut on the related control.
  2. Listen for keydown on document (or a focused region).
  3. Match the same modifiers + key you documented.
  4. Focus or activate the target — documentation alone does nothing.
Compatibility

Browser Support

Element.ariaKeyShortcuts is Baseline Widely available (MDN: since October 2023). Safe for modern evergreen browsers.

✓ Baseline · Widely available

ariaKeyShortcuts

Reflects aria-keyshortcuts for documented activate/focus hotkeys.

99% Widely available
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
ariaKeyShortcuts Excellent

Bottom line: Document only shortcuts you implement. Keep the string and keydown handler matched.

Frequently Asked Questions

It reflects the aria-keyshortcuts attribute as a string, indicating keyboard shortcuts that an author has implemented to activate or give focus to an element (MDN).
No. MDN marks Element.ariaKeyShortcuts as Baseline Widely available (since October 2023). It is not Deprecated, Experimental, or Non-standard.
A string describing the shortcut(s), for example "Alt+Shift+A" or "Control+S". Keep the documented string in sync with the real key handler.
No. The property only documents shortcuts you already implement. You still need keydown (or similar) listeners that actually activate or focus the element.
Follow ARIA key shortcut naming (modifier keys plus a key, joined with +). Example from MDN: "Alt+Shift+A".
Yes. Custom elements can use ElementInternals.ariaKeyShortcuts for the same reflected value from inside a component (MDN).

Next: ariaLabel

Learn the Element property that sets an accessible name as a string.

ariaLabel tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element ariaInvalid Property JavaScript Element ariaLabel Property