ARIA Selected

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

Using ARIA SELECTED
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)

Comments are closed.