aria-selected attribute indicates the current "selected" state of various widgets.
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.
Widgets that support both
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
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
aria-selected on a column or row header gridcell does not propagate the state to other cells in the column or row.
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
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.
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
If the grid supports column selection and a column is selected, all cells in the column have
aria-selected set to
In a tablist,
aria-selected is used on a tab to indicate the currently-displayed
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
If more than one tab is selectable at a time, include
aria-multiselectable on the
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.
- : The selectable element is selected.
- : The selectable element is not selected.
- : Implicit default for
- : The element is not selectable.
|Accessible Rich Internet Applications (WAI-ARIA) |