Aria-selected state is used to notify when one or more items in a widget have selectable functionality. Eg: various tabs in a tab panel have selectable mechanism. In general the selected state is notified to the user with a change in color. The change in color notification will not be recognized by screen reading technologies. Aria-selected is similar to aria-checked and aria-pressed states.
Aria-selected state may be used in single selection or in multi-selection widgets.
1. Single-selection containers where the currently focused item is not selected. The selection normally follows the focus, and is managed by the user agent.
2. Multiple-selection containers. Authors SHOULD ensure that any selectable descendant of a container in which the aria-multiselectable attribute is true specifies a value of either true or false for the aria-selected attribute.
Any explicit assignment of aria-selected takes precedence over the implicit selection based on focus. If no DOM element in the widget is explicitly marked as selected, assistive technologies MAY convey implicit selection which follows the keyboard focus of the managed focus widget. If any DOM element in the widget is explicitly marked as selected, the user agent MUST NOT convey implicit selection for the widget.
Used in roles
Aria-selected have 3 possible values. Aria-selected=”true”, aria-selected=”false” and aria-selected=”undefined” (default. Aria-selected=”undefined” is a default value and having it does not have any impact on the item.
| Value | Description |
|---|---|
| True | The selectable element is selected. |
| False | The selectable element is not selected. |
| Undefined (default) | The element is not selectable |
Example
Below is an example with three static tabs. No functionality is provided to the tabs. Do not try to activate them. The first tab is currently selected and so it should announce the word selected when you focus on to it with the screen reader.