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 has its 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:

<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.

ARIAMixin API

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:

Inherited into roles:

Specifications

Specification Status
Accessible Rich Internet Applications (WAI-ARIA) 1.1
The definition of 'ARIA: aria-selected Attribute' in that specification.		 Recommendation

See Also