State Widget state

`aria-selected`

Indicates that an item inside a single- or multi-select container is currently selected. Used on tab, option, gridcell, treeitem, and similar roles. Distinct from aria-checked (checkbox/radio) and aria-pressed (toggle button).

When to use

On items that belong to a container with a selection model:

role="tab" inside a tablist (exactly one selected).
role="option" inside a listbox (one or many, depending on aria-multiselectable).
role="treeitem" inside a tree.
role="gridcell", role="row", role="columnheader", role="rowheader" inside a grid.

The state describes the relationship between the item and its container’s selection — not a standalone on/off like a checkbox. Pick the right state for the pattern:

aria-selected — items in a tab, option, tree, or grid context.
aria-checked — checkboxes and radio buttons (independent choices).
aria-pressed — toggle buttons (the button itself is on or off).

A common mistake is putting aria-selected="true" on a <button> to mean “the user clicked me last”. If the element isn’t part of a select-style widget, use aria-pressed or aria-current instead.

How to keep it in sync

Valid values are "true" and "false". Render "false" on the unselected items rather than omitting the attribute — assistive technology then announces “1 of 5” style position info correctly. In a single-select widget (tablist, single-select listbox), exactly one item at a time should be "true".

The attribute must change in lock-step with the visual indicator and with focus management. In a tablist, moving selection usually also moves tabindex="0" to the selected tab and tabindex="-1" away from the others.

Common failures

Using aria-selected on a button or link outside any select-style container.
Multiple aria-selected="true" items in a single-select tablist or listbox.
Forgetting to set aria-selected="false" on the previously selected item when selection moves.
Styling a “selected” appearance via CSS without flipping the attribute.
Confusing aria-selected with aria-checked on listbox options (always selected) or with aria-current on a navigation link (current, not selected).
Setting aria-selected on role="menuitem" — menu items don’t support it; use aria-checked for menu checkboxes / radios.

Example

<div role="tablist" aria-label="Sections">
  <button role="tab" id="tab-1" aria-selected="true"  tabindex="0"  aria-controls="panel-1">Overview</button>
  <button role="tab" id="tab-2" aria-selected="false" tabindex="-1" aria-controls="panel-2">Details</button>
  <button role="tab" id="tab-3" aria-selected="false" tabindex="-1" aria-controls="panel-3">Reviews</button>
</div>