Thearia-selected attribute indicates the current "selected" state of various widgets.

Description

Thearia-selected attribute indicates the current "selected" state forgridcell,option,row andtab 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, includearia-multiselectable="true" on the grid, listbox, tablist, or other owning role, while includingaria-selected only on the selectable cells, options, and tabs.

For other roles, the currently selected state is set witharia-current, or possiblyaria-checked oraria-pressed, depending on the role.

Widgets that support botharia-selected andaria-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, whilearia-selected="true" indicates which page will be displayed if the user activates thetreeitem.

Grid

Settingaria-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, setaria-multiselectable="true" on the element with rolegrid. Settingaria-selected on a column or row header gridcell does not propagate the state to other cells in the column or row.

Option

Botharia-selected andaria-checked are valid foroption. Some user interfaces indicate selection witharia-selected in single-select list boxes and witharia-checked in multi-select list boxes.

Don't specify botharia-selected andaria-checked onoption elements contained by the samelistbox unless the meaning and purpose ofaria-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

Thearia-selected attribute is supported onrow but notcolumn. If a grid supports selection, when a cell or row is selected, the selected element hasaria-selected="true" set.

If the grid supports column selection and a column is selected, all cells in the column havearia-selected set totrue.

Tab

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

The selectedtab in atablist should have the attributearia-selected="true" set. All inactive tabs in the tablist should havearia-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 foraria-selected on atab role isfalse.

If more than one tab is selectable at a time, includearia-multiselectable on thetablist.

Examples

In thistablist example, the firsttab is selected:

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

Values

true

The selectable element is selected.

false

The selectable element is not selected. Implicit default fortab.

undefined (default)

The element is not selectable.

Associated interfaces

Element.ariaSelected

TheariaSelected property, part of theElement interface, reflects the value of thearia-selected attribute.

ElementInternals.ariaSelected

TheariaSelected property, part of theElementInternals interface, reflects the value of thearia-selected attribute.

Associated roles

Used in roles:

• gridcell
• option
• row
• tab

Inherited into roles:

• columnheader
• rowheader
• treeitem

Specifications

See also

• aria-pressed
• aria-checked