Search code examples
htmlwai-ariascreen-readers

Is there a way to use aria-describedby in <option> tags, so the description is read after the option?

Consider the following HTML code:

<select>
  <option aria-describedby="paragraph-a">Option A</option>
  <option aria-describedby="paragraph-b">Option B</option>
  <option aria-describedby="paragraph-c">Option C</option>
</select>

<p id="paragraph-a">This is a description for option A</p>
<p id="paragraph-b">This is a description for option B</p>
<p id="paragraph-c">This is a description for option C</p>

Intuitively, the way this should work is that a screen reader like chromevox or Windows Narrator should read the option, and then the description (e.g "Option A, this is a description for option A). However, this doesn't seem to work with <option> tags, or <select> tags in general.

aria-labelledby doesn't seem to work with <option> either, unless you open the dropdown and select the option from there (which some screen readers, like chromevox, don't let you do, because you're supposed to change the selected option with the up and down arrows).

Is there a feasible way to achieve the desired behaviour?

Solution

  • While the demonstrated way would be valid according to the standards, support in actual assistive technology might vary.

    The only way to achieve this would be to make sure all elements are actually rendered and not replaced elements, by using an accessible custom combobox.

    But even if it worked, it doesn’t seem very user friendly:

    • sighted users have the extra effort of mapping the option with it’s description, which might be covered by the expanded option list, especially on small phone screens
    • users of screen magnifiers will have a hard time jumping between options and descriptions

    So for a more universally accessible way to achieve the same, I’d suggest including the descriptions in the options for everyone:

    <label for="the-select">You have options</label>
<select id="the-select">
  <option>Option A (This is a description for option A)</option>
  <option>Option B (This is a description for option B)</option>
  <option>Option C (This is a description for option C)</option>
</select>

    You might also consider styling a custom combobox two display two lines in the expanded option list – if the description is not of relevance in the collapsed state as well.

    Displaying a different text for the collapsed select might be possible with CSS, a pseudo-element and a data- attribute.

    On testing with Chromevox and Narrator

    ChromeVox is relatively new, therefore its support for accessibility features is not well documented or tested, and it displays some weird behaviour like forbidding to expand a combobox.

    Users of screen readers usually need it also outside the browser, therefore only 0.3 % of these users use ChromeVox as their primary reader. Narrator is not very popular either, with 0.5 %.

    Based on the usage data and your target audience, you might decide optimising for more popular screen readers, while ChromeVox catches up. Common choices are JAWS, NVDA (free) and VoiceOver.

    aria-describedby is a common way to associate an error message with an input field, and ChromeVox does not even support this attribute.

    Test results with Orca, NVDA and Narrator

    All of the above read aria-describedby for a <select> element.

    All of the above allow expanding the option list.

    All of the above respect <option aria-label="…

    Orca and NVDA do read the descriptions for the <option> elements as well, but only when the select is collapsed.