ARIA Selected (aria-selected) Indicates the current “selected” state of various widgets. However, it is not supported at the time of this article, however it can be simulated using the aria-label attribute.
Aria-selected is supported in roles gridcell, option, row, and tab. It’s possible values are true, false, undefined.
Example 1:
Code
<ul> <li><a href="#" role="tab" aria-selected="true" aria-label="selected">Tab 1</a></li> <li><a href="#" role="tab" aria-selected="false" aria-label="not selected">Tab 2</a></li> <li><a href="#" role="tab" aria-selected="undefined" aria-label="not selected">Tab 3</a></li> </ul>
Works With
| Browser | Screen Reader | Results |
|---|---|---|
| IE 9 | JAWS 12 | No |
| FF 4 | JAWS 12 | No |
Standards:
- WCAG 2.0 SC 4.1.2 Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)
- ARIA1: Using the aria-describedby property to provide a descriptive label for input controls or Instructions: Labels or instructions are provided when content requires user input. (Level A).
- Aria-selected (state)
