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:
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.
ARIAMixin API
Element.ariaSelected
-
The
ariaSelected
property, part of theElement
interface, reflects the value of thearia-selected
attribute. ElementInternals.ariaSelected
-
The
ariaSelected
property, part of theElementInternals
interface, reflects the value of thearia-selected
attribute.
Associated roles
Specifications
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA) # aria-selected |