aria-selected
=============

The `aria-selected` attribute indicates the current "selected" state of various widgets.

Description
-----------

The `aria-selected` attribute indicates the current "selected" state for `gridcell`, `option`, `row` and `tab` roles.

This attribute is used to indicate which elements within single-selection and multiple-selection composite widgets are selected. If more than one element is selectable at a time, include `aria-multiselectable="true"` on the grid, listbox, tablist, or other owning role, while including `aria-selected` only on the selectable cells, options, and tabs.

For other roles, the currently selected state is set with `aria-current`, or possibly `aria-checked` or `aria-pressed`, depending on the role.

Widgets that support both `aria-selected` and `aria-current` at the same time have different meanings for each. For example, `aria-current="page"` can be used in a navigation tree to indicate which page is currently displayed, while `aria-selected="true"` indicates which page will be displayed if the user activates the `treeitem`.

### Grid

Setting `aria-selected="false"` on a focusable gridcell indicates the cell is selectable. If the grid allows more than one gridcell to be selected at a time, set `aria-multiselectable="true"` on the element with role `grid`. Setting `aria-selected` on a column or row header gridcell does not propagate the state to other cells in the column or row.

### Option

Both `aria-selected` and `aria-checked` are valid for `option`. Some user interfaces indicate selection with `aria-selected` in single-select list boxes and with `aria-checked` in multi-select list boxes.

Don't specify both `aria-selected` and `aria-checked` on `option` elements contained by the same `listbox` unless the meaning and purpose of `aria-selected` is different from the meaning and purpose of aria-checked in the user interface, the meaning and purpose of each state apparent, and the UI provides separate methods for controlling each state.

### Row

The `aria-selected` attribute is supported on `row` but not `column`. If a grid supports selection, when a cell or row is selected, the selected element has `aria-selected="true"` set.

If the grid supports column selection and a column is selected, all cells in the column have `aria-selected` set to `true`.

### Tab

In a tablist, `aria-selected` is used on a tab to indicate the currently-displayed `tabpanel`.

The selected `tab` in a `tablist` should have the attribute `aria-selected="true"` set. All inactive tabs in the tablist should have `aria-selected="false"` set. Setting the state only impacts the accessibility tree: make sure to style the active tab in a way that visual indicates it's selected state. The default value for `aria-selected` on a `tab` role is `false`.

If more than one tab is selectable at a time, include `aria-multiselectable` on the `tablist`.

Examples
--------

In this `tablist` example, the first `tab` is selected:


```html
<div class="tab-interface">
  <div role="tablist" aria-label="Sample Tabs">
    <span
 role="tab"
 aria-selected="true"
 aria-controls="panel-1"
 id="tab-1"
 tabindex="0">
      First Tab
    </span>
    <span
 role="tab"
 aria-selected="false"
 aria-controls="panel-2"
 id="tab-2"
 tabindex="-1">
      Second Tab
    </span>
    <span
 role="tab"
 aria-selected="false"
 aria-controls="panel-3"
 id="tab-3"
 tabindex="-1">
      Third Tab
    </span>
  </div>
  <div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
    <p>Content for the first panel</p>
  </div>
  <div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
    <p>Content for the second panel</p>
  </div>
  <div id="panel-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3" hidden>
    <p>Content for the third panel</p>
  </div>
</div>
```


**Note:** ARIA only modifies the accessibility tree for an element and how assistive technology presents the content to users. ARIA doesn't change anything about an element's function or behavior.

Values
------

`true`

The selectable element is selected.

`false`

The selectable element is not selected. Implicit default for `tab`.

`undefined` (default)

The element is not selectable.

Associated interfaces
---------------------

`Element.ariaSelected`

The `ariaSelected` property, part of the `Element` interface, reflects the value of the `aria-selected` attribute.

`ElementInternals.ariaSelected`

The `ariaSelected` property, part of the `ElementInternals` interface, reflects the value of the `aria-selected` attribute.

Associated roles
----------------

Used in roles:

* `gridcell`
* `option`
* `row`
* `tab`

Inherited into roles:

* `columnheader`
* `rowheader`
* `treeitem`
Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # aria-selected |

See Also
--------

* `aria-pressed`
* `aria-checked`