JavaScript Element ariaSelected Property

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

Definition

Element.ariaSelected reflects the aria-selected attribute: the current selected state of widgets that support selection (tabs, options, rows, gridcells — 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.ariaSelected. Start with this line.

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

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

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

Parameters

ParameterDescription
Selectable itemRequired. tab / option / row / gridcell…
Token stringRequired. true / false / undefined
Visual + keyboardRequired. Must match what ariaSelected reports

Return Value

Return ValueDescription
*The current value of el.ariaSelected.

JavaScript Examples

Example 1 — Read ariaSelected

Log the selected token from a tab.

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

// HTML: <span id="tab-id" role="tab" aria-selected="true">First Tab</span>
Try It Yourself

How It Works

  1. Find the tab. getElementById returns the tab node.
  2. Read the reflection. ariaSelected returns the aria-selected string.
  3. Interpret "true". Assistive technologies treat this tab as selected.
  4. Missing attribute. If unset, many browsers return null (tabs default to not selected).

Example 2 — Update Selection (MDN)

MDN: change a selected tab from "true" to "false".

JavaScript
const el = document.getElementById("tab-id");

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

How It Works

  1. Start selected. The first log shows "true".
  2. Assign the property. el.ariaSelected = "false" updates the reflected attribute.
  3. Confirm both sides. Property and getAttribute both report "false".
  4. In a real tablist. Also select another tab, update tabindex, and show its panel.

Example 3 — Select a Listbox Option

Mark one option selected and clear the previous choice.

JavaScript
const listbox = document.getElementById("colors");
const options = listbox.querySelectorAll('[role="option"]');
const next = document.getElementById("opt-blue");

options.forEach((opt) => {
  opt.ariaSelected = opt === next ? "true" : "false";
});

console.log(next.ariaSelected); // "true"
console.log(document.getElementById("opt-red").ariaSelected); // "false"
Try It Yourself

How It Works

  1. Collect options. Query every [role="option"] inside the listbox.
  2. Pick the next item. opt-blue becomes the selected choice.
  3. Update tokens. Selected option gets "true"; others get "false".
  4. Multi-select note. If several options can stay selected, set aria-multiselectable on the listbox (MDN).
Compatibility

Browser Support

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

✓ Baseline · Widely available

Element.ariaSelected

Supported in modern Chromium, Firefox, Safari, and Edge. Internet Explorer has no ariaSelected 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.ariaSelected Excellent

Bottom line: Safe for modern web apps. Keep selected styles, focus, and panels in sync with the ariaSelected token.

Frequently Asked Questions

It reflects the aria-selected attribute as a string that indicates the current selected state of elements that can be selected — for example tabs, options, gridcells, rows, or tree items.
No. MDN marks Element.ariaSelected as Baseline Widely available (since October 2023). It is not Deprecated, Experimental, or Non-standard.
One of the strings "true" (selected), "false" (not selected), or "undefined" (not selectable). If the attribute is missing, reading the property often returns null.
Commonly tab, option, gridcell, and row. It is also inherited by columnheader, rowheader, and treeitem (MDN).
ariaSelected marks selection in lists, tabs, and grids. ariaChecked is for checked widgets. ariaPressed is for toggle buttons. For “current page” style states, prefer ariaCurrent.
No. ARIA only updates the accessibility tree. You must also show or hide panels, update styles, and manage keyboard focus yourself (MDN).

Next: ariaSetSize

Learn the reflected aria-setsize property for the total number of items in a set.

ariaSetSize 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)

14 people found this page helpful

JavaScript Element ariaRowSpan Property JavaScript Element ariaSetSize Property