JavaScript Element ariaSelected Property

What You’ll Learn

Element.ariaSelected is an instance property that reflects the aria-selected attribute. Learn the true, false, and undefined values, how tabs and options use selection, and how to get or set the property from JavaScript—with five examples and try-it labs.

Introduction

Tabs, listbox options, grid rows, and tree items often have a selected state—the active tab, the chosen option, or the highlighted row. Assistive technologies need that signal to announce what is currently selected.

aria-selected carries that signal. ariaSelected is the JavaScript reflection of that attribute.

const el = document.getElementById("tab-id");
console.log(el.ariaSelected); // "true"
el.ariaSelected = "false";

Understanding the Property

MDN: the ariaSelected property of the Element interface reflects the value of the aria-selected attribute, which indicates the current “selected” state of elements that have a selected state.

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

📝 Syntax

ariaSelected

Value

A string with one of the following values:

📋 MDN Tab Example Shape

MDN starts with a tab marked aria-selected="true", then updates it to "false" with the property:

<button role="tab" aria-selected="true" aria-controls="tabpanel-id" id="tab-id">
  Tab label
</button>

let el = document.getElementById("tab-id");
console.log(el.ariaSelected); // "true"
el.ariaSelected = "false";
console.log(el.ariaSelected); // "false"

Related learning: ariaMultiSelectable (whether a container allows multiple selections) and ariaControlsElements (which panel a tab controls).

Examples Gallery

Examples follow MDN Element: ariaSelected. Labs use a role="tab" control so you can safely read and write the property.

const el = document.getElementById("tab-id");
console.log(el.ariaSelected);

// HTML includes: role="tab" aria-selected="true"

true

let el = document.getElementById("tab-id");
console.log(el.ariaSelected); // "true"
el.ariaSelected = "false";
console.log(el.ariaSelected); // "false"

true
false

const el = document.createElement("div");
el.setAttribute("role", "option");
el.setAttribute("aria-selected", "false");
el.textContent = "Disabled choice";
document.body.appendChild(el);

el.ariaSelected = "undefined";
console.log({
  ariaSelected: el.ariaSelected,
  attr: el.getAttribute("aria-selected")
});

{
  "ariaSelected": "undefined",
  "attr": "undefined"
}

const el = document.createElement("button");
el.setAttribute("role", "tab");
el.setAttribute("aria-selected", "true");
el.textContent = "Tab label";
document.body.appendChild(el);

el.ariaSelected = "false";
console.log({
  fromProperty: el.ariaSelected,
  fromAttribute: el.getAttribute("aria-selected"),
  same: el.ariaSelected === el.getAttribute("aria-selected")
});

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

console.log({
  supported: "ariaSelected" in Element.prototype,
  allowed: ["true", "false", "undefined"],
  tip: "Keep only one tab selected in a single-select tablist",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "allowed": ["true", "false", "undefined"],
  "tip": "Keep only one tab selected in a single-select tablist",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Marking the active tab in a custom tablist.
• Showing which options are selected in a listbox or combobox.
• Highlighting selected rows or cells in an ARIA grid.
• Updating selection when the user presses arrow keys or clicks.
• Keeping script and markup aligned without manual setAttribute.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Value is a string: true, false, or undefined.
• Prefer native controls (for example <select>) when they fit the UI.
• Related: ariaRowSpan, ariaSetSize, ariaMultiSelectable, ariaPressed, JavaScript hub.

💡 Best Practices