JavaScript Element ariaPressed Property

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

Definition

Element.ariaPressed reflects the aria-pressed attribute: the current pressed state of a toggle button (MDN). Read or write a string token from JavaScript.

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

Syntax

Use el.ariaPressed. Start with this line.

JavaScript
el.ariaPressed / el.ariaPressed = value
CallWhat it does
el.ariaPressed / el.ariaPressed = valuePrimary signature.

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

Library declarations
JavaScript
el.ariaPressed / el.ariaPressed = value

Parameters

ParameterDescription
Toggle button elementRequired. Host that exposes pressed state
Token stringRequired. true / false / mixed / undefined
Keyboard + visualsRequired. Must match what ariaPressed reports

Return Value

Return ValueDescription
*The current value of el.ariaPressed.

JavaScript Examples

Example 1 — Read ariaPressed

Log the current pressed token from a toggle button.

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

// HTML: <button type="button" id="saveChanges" aria-pressed="false">Save</button>
Try It Yourself

How It Works

  1. Find the control. getElementById returns the toggle button node.
  2. Read the reflection. ariaPressed returns the aria-pressed string.
  3. Interpret "false". The control can be pressed, but it is currently off.
  4. Missing attribute. If there is no aria-pressed, many browsers return null.

Example 2 — Set Pressed (MDN Pattern)

MDN: update from unpressed to pressed with the property.

JavaScript
const el = document.getElementById("saveChanges");

console.log(el.ariaPressed); // "false"
el.ariaPressed = "true";
console.log(el.ariaPressed); // "true"
console.log(el.getAttribute("aria-pressed")); // "true"
Try It Yourself

How It Works

  1. Start unpressed. The first log shows "false".
  2. Assign the property. el.ariaPressed = "true" updates the reflected attribute.
  3. Confirm both sides. Property and getAttribute both report "true".
  4. In a real UI. Also update the pressed style so sighted users match assistive tech.

Example 3 — Tri-State "mixed"

Use "mixed" when a toggle represents a partial selection.

JavaScript
const el = document.createElement("button");
el.type = "button";
el.textContent = "Bold";
el.ariaPressed = "false";

el.ariaPressed = "mixed";
console.log(el.ariaPressed);                      // "mixed"
console.log(el.getAttribute("aria-pressed"));     // "mixed"
Try It Yourself

How It Works

  1. Create a button. A native <button> is a good host for a toggle (MDN).
  2. Start at "false". The control supports press but starts off.
  3. Set "mixed". Means some controlled items are on and some are off.
  4. Use sparingly. Ordinary on/off toggles only need "true" / "false".
Compatibility

Browser Support

Element.ariaPressed is Baseline Widely available (MDN: across browsers since October 2023).

✓ Baseline · Widely available

Element.ariaPressed

Supported in modern Chromium, Firefox, Safari, and Edge. Internet Explorer has no ariaPressed IDL — use getAttribute / setAttribute there.

95% Modern browser support
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
Element.ariaPressed Excellent

Bottom line: Safe for modern web apps. Prefer the property in new code; fall back to aria-pressed attributes on very old engines.

Frequently Asked Questions

It reflects the aria-pressed attribute as a string that tells assistive technologies whether a toggle button is pressed, not pressed, mixed, or not pressable.
No. MDN marks Element.ariaPressed as Baseline Widely available (since October 2023). It is not Deprecated, Experimental, or Non-standard.
One of the strings "true", "false", "mixed", or "undefined". If the attribute is missing, reading the property often returns null.
Yes when possible. MDN recommends an HTML button (type="button") because it already has button semantics. Use aria-pressed when you build a real toggle control.
ariaPressed is for toggle buttons (pressed / unpressed). ariaChecked is for checkboxes, radios, and similar widgets with a checked state.
No for classic toggles. Keep a stable label (for example "Pause") and change aria-pressed instead. If the label itself flips ("Play" / "Pause"), you usually do not need aria-pressed.

Next: ariaReadOnly

Learn the reflected aria-readonly property for non-editable but operable widgets.

ariaReadOnly 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 ariaPosInSet Property JavaScript Element ariaReadOnly Property