JavaScript Element ariaKeyShortcuts Property

What You’ll Learn

Element.ariaKeyShortcuts is an instance property that reflects the aria-keyshortcuts attribute. Learn how to document keyboard shortcuts that activate or focus an element, how to get or set the string from JavaScript, and why you must still implement the real key handlers—with five examples and try-it labs.

Introduction

Many apps offer keyboard shortcuts: skip to content, save a form, open a menu. Sighted users may see a tooltip; assistive technology users need the same information in the accessibility tree.

aria-keyshortcuts documents those shortcuts. ariaKeyShortcuts is the JavaScript reflection of that attribute.

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

Understanding the Property

MDN: the ariaKeyShortcuts property of the Element interface reflects the value of the aria-keyshortcuts attribute, which indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

• Reflected attribute — mirrors aria-keyshortcuts.
• Get / set — readable and writable string.
• Author-implemented — documents shortcuts you already built.
• Baseline — widely available since October 2023 (MDN).

📝 Syntax

ariaKeyShortcuts

Value

A string describing the keyboard shortcut(s), for example:

📋 MDN Example Shape

MDN starts with aria-keyshortcuts="Alt+Shift+A" on a skip link, then updates it to "Alt+Shift+M" with the property (IDs aligned for this tutorial):

<a id="skip-link" href="#content" aria-keyshortcuts="Alt+Shift+A">
  Skip to content
</a>

let el = document.getElementById("skip-link");
console.log(el.ariaKeyShortcuts); // "Alt+Shift+A"
el.ariaKeyShortcuts = "Alt+Shift+M";
console.log(el.ariaKeyShortcuts); // "Alt+Shift+M"

Examples Gallery

Examples follow MDN Element: ariaKeyShortcuts. Labs use a skip-link style control so you can safely read and write the property.

const el = document.getElementById("skip-link");
console.log(el.ariaKeyShortcuts);

// HTML includes: aria-keyshortcuts="Alt+Shift+A"

Alt+Shift+A

let el = document.getElementById("skip-link");
console.log(el.ariaKeyShortcuts); // "Alt+Shift+A"
el.ariaKeyShortcuts = "Alt+Shift+M";
console.log(el.ariaKeyShortcuts); // "Alt+Shift+M"

Alt+Shift+A
Alt+Shift+M

const btn = document.createElement("button");
btn.textContent = "Save changes";
document.body.appendChild(btn);

btn.ariaKeyShortcuts = "Control+S";
console.log({
  ariaKeyShortcuts: btn.ariaKeyShortcuts,
  attr: btn.getAttribute("aria-keyshortcuts")
});

{
  "ariaKeyShortcuts": "Control+S",
  "attr": "Control+S"
}

const el = document.createElement("a");
el.href = "#content";
el.textContent = "Skip to content";
el.setAttribute("aria-keyshortcuts", "Alt+Shift+A");
document.body.appendChild(el);

el.ariaKeyShortcuts = "Alt+Shift+M";
console.log({
  fromProperty: el.ariaKeyShortcuts,
  fromAttribute: el.getAttribute("aria-keyshortcuts"),
  same: el.ariaKeyShortcuts === el.getAttribute("aria-keyshortcuts")
});

{
  "fromProperty": "Alt+Shift+M",
  "fromAttribute": "Alt+Shift+M",
  "same": true
}

console.log({
  supported: "ariaKeyShortcuts" in Element.prototype,
  type: "string",
  tip: "Documents shortcuts you implement — does not create handlers",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "type": "string",
  "tip": "Documents shortcuts you implement — does not create handlers",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Skip links with documented focus shortcuts.
• Toolbar buttons that also respond to accelerator keys.
• Custom widgets that activate on a known key combination.
• Updating documented shortcuts when the app locale or keymap changes.
• Keeping script and markup aligned without manual setAttribute.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Does not create keyboard handlers—only documents them.
• Prefer non-conflicting shortcuts when possible (avoid stealing browser defaults).
• Related: ariaLabel, ariaHasPopup, EventTarget, JavaScript hub.

💡 Best Practices