JavaScript Element ariaPressed Property

What You’ll Learn

Element.ariaPressed is an instance property that reflects the aria-pressed attribute. Learn the true, mixed, false, and undefined values, when to prefer a native button, and how to get or set the property from JavaScript—with five examples and try-it labs.

Introduction

Some buttons fire an action once (Save, Submit). Toggle buttons stay on or off—Bold, Mute, Like, or a toolbar filter. Assistive technologies need to know whether that control is currently pressed.

aria-pressed carries that signal. ariaPressed is the JavaScript reflection of that attribute.

const el = document.getElementById("saveChanges");
console.log(el.ariaPressed); // "false"
el.ariaPressed = "true";

Understanding the Property

MDN: the ariaPressed property of the Element interface reflects the value of the aria-pressed attribute, which indicates the current “pressed” state of toggle buttons.

• Reflected attribute — mirrors aria-pressed.
• Get / set — readable and writable string.
• Four tokens — true, mixed, false, undefined.
• Baseline — widely available since October 2023 (MDN).

📝 Syntax

ariaPressed

Value

A string with one of the following values:

📋 MDN Example Shape

MDN starts with a toggle button marked aria-pressed="false", then updates it to "true" with the property:

<div id="saveChanges" tabindex="0" role="button" aria-pressed="false">Save</div>

let el = document.getElementById("saveChanges");
console.log(el.ariaPressed); // "false"
el.ariaPressed = "true";
console.log(el.ariaPressed); // "true"

Also wire keyboard activation (Space / Enter) and visible pressed styling so the control matches what ariaPressed reports.

Examples Gallery

Examples follow MDN Element: ariaPressed. Labs use a custom role="button" toggle so you can safely read and write the property.

const el = document.getElementById("saveChanges");
console.log(el.ariaPressed);

// HTML includes: role="button" aria-pressed="false"

false

let el = document.getElementById("saveChanges");
console.log(el.ariaPressed); // "false"
el.ariaPressed = "true";
console.log(el.ariaPressed); // "true"

false
true

const el = document.createElement("div");
el.setAttribute("role", "button");
el.setAttribute("aria-pressed", "false");
el.tabIndex = 0;
el.textContent = "Format";
document.body.appendChild(el);

el.ariaPressed = "mixed";
console.log({
  ariaPressed: el.ariaPressed,
  attr: el.getAttribute("aria-pressed")
});

{
  "ariaPressed": "mixed",
  "attr": "mixed"
}

const el = document.createElement("div");
el.setAttribute("role", "button");
el.setAttribute("aria-pressed", "false");
el.textContent = "Save";
document.body.appendChild(el);

el.ariaPressed = "true";
console.log({
  fromProperty: el.ariaPressed,
  fromAttribute: el.getAttribute("aria-pressed"),
  same: el.ariaPressed === el.getAttribute("aria-pressed")
});

{
  "fromProperty": "true",
  "fromAttribute": "true",
  "same": true
}

console.log({
  supported: "ariaPressed" in Element.prototype,
  allowed: ["true", "mixed", "false", "undefined"],
  tip: "Prefer native button when possible (MDN)",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "allowed": ["true", "mixed", "false", "undefined"],
  "tip": "Prefer native button when possible (MDN)",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Custom toggle buttons built with role="button" and aria-pressed.
• Toolbar toggles such as Bold, Italic, Mute, or Pin.
• Tri-state format controls with "mixed".
• Like / favorite controls that stay pressed when active.
• Keeping script and markup aligned without manual setAttribute.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Values are strings: true, mixed, false, undefined.
• Prefer a native <button type="button"> when possible (MDN).
• Related: ariaPosInSet, ariaChecked, ariaReadOnly, JavaScript hub.

💡 Best Practices