« Back to home

Testing aria-selected

aria-selected indicates the current selected state of an element within certain container roles, such as listbox, tablist, and grid. It is only meaningful on elements that support it, and only within a supporting container.

Example 1: Native <select>

A native <select> element does not use aria-selected at all. Selection is communicated through the native selected HTML property, and the browser maps this to the accessibility tree automatically. This is included as a baseline, to show that ARIA is not always the right tool, native semantics can already do the job.

Expected result: "Banana" should be exposed as the selected option, with no aria-selected attribute anywhere in the markup.

<label for="native-select">Choose a fruit</label>
<select id="native-select">
  <option>Apple</option>
  <option selected>Banana</option>
  <option>Cherry</option>
</select>

Example 2: Custom single-select listbox

This is a custom, single-select listbox built from generic elements with ARIA roles. Only one option can be selected at a time.

• Tab into the listbox, focus lands on the currently selected option.
• Arrow Up / Arrow Down moves focus between options. In this pattern, moving focus also moves selection, matching how a native <select> behaves with arrow keys.
• Home / End move focus (and selection) to the first or last option.

Expected result: exactly one option should have aria-selected="true" at all times. Moving focus with arrow keys should move selection with it, and only the focused option should have tabindex="0", every other option should have tabindex="-1".

<div role="listbox" aria-label="Choose a fruit">
  <div role="option" aria-selected="false" tabindex="-1">Apple</div>
  <div role="option" aria-selected="true" tabindex="0">Banana</div>
  <div role="option" aria-selected="false" tabindex="-1">Cherry</div>
</div>

Example 3: Custom multi-select listbox

This listbox uses aria-multiselectable="true", allowing more than one option to be selected independently. Unlike Example 2, moving focus does not change selection, selection and focus are handled separately.

• Tab into the listbox, focus lands on the first option.
• Arrow Up / Arrow Down moves focus between options, without changing selection.
• Space toggles selection of the currently focused option, on or off, independently of any other option.

Expected result: any number of options, including zero or all three, should be able to have aria-selected="true" at the same time. Moving focus with arrow keys should never change selection on its own, only Space should toggle the focused option's selected state.

<div role="listbox" aria-label="Newsletter interests" aria-multiselectable="true">
  <div role="option" aria-selected="true" tabindex="0">Bats</div>
  <div role="option" aria-selected="false" tabindex="-1">Kangaroos</div>
  <div role="option" aria-selected="true" tabindex="-1">Possums</div>
</div>

Example 4: misuse, no supporting container

This element has aria-selected, but it is not inside a container role that supports selection, such as listbox, tablist, or grid. This is a misuse of the attribute.

Expected result: worth confirming directly, since there is no supporting container role, aria-selected may not be exposed or announced consistently.

<div aria-selected="true">
  Apple
</div>

Note for testing: confirm all four results above with your standard browser and screen reader combinations before treating them as settled. Selection announcements for single-select vs. multi-select listboxes, and the misuse case in Example 4, have not been verified here.

« Back to home