The HTML aria-selected attribute
The aria-selected attribute marks which item is selected within a set — a tab, a listbox option, a grid cell. Values: true, false, or omit when selection does not apply.
Overview
The aria-selected attribute indicates the selected state of an item in a set such as tabs or options.
It is a widget state — a condition that can change as the user interacts. Because ARIA does nothing on its own, you must update this value in JavaScript every time the underlying state changes; a stale state is worse than none. And wherever a native element already expresses the same thing (a checkbox's checked state, the disabled attribute, a <details>'s open state), use that instead.
Like all ARIA, aria-selected changes only the accessibility tree — what assistive technology perceives — never the element's behavior or appearance. The first rule of ARIA applies: if a native HTML element or attribute conveys this, use that instead, and only reach for ARIA when nothing native fits.
Syntax
<div role="tab" aria-selected="true">Overview</div>Values
| Value |
|---|
| true | false | undefined |
Example
<div role="tablist">
<button role="tab" aria-selected="true">Tab 1</button>
<button role="tab" aria-selected="false">Tab 2</button>
</div>Best practices
- Follow the first rule of ARIA — use a native HTML element or attribute that conveys this where one exists, rather than adding ARIA.
- Update the value in JavaScript whenever the state changes — keep it in sync with reality.
- Use the matching native state where one exists (a checkbox's
checked, thedisabledattribute, a <details>'s open state) instead of the ARIA version. - Set it only on an element whose role actually supports this state.