Enhancement: Add aria-controls to the stages select box

[neilmispelaar]

Description

There is the aria-controls attribute that can be added to the select markup that will enhance the user experience for those using screen readers.

At a high level, aria-control programatically links the control (in this case the select box) to the section of the page that is modified based on the control.

Some screen readers do something with this (i.e. Jaws), but other screen readers just ignore the attribute (doesn't mean we shouldn't use - just that screen readers need to catch up).

How to add

The following is a code sample that can be referenced on how to add the aria-controls attribute to the project.

The aria-controls attribute contains the id of the section that gets updated when the select box changes.

Note: For extra awesomeness you can also add the aria-live="polite" attribute to the markup so that screen readers politely announce changes in content when the select box is changed.

<fieldset>
  <legend>Planet information</legend>
  <label for="planetsSelect">Planet:</label>
  <select id="planetsSelect" aria-controls="planetInfo">
    <option value="">Select a planet&hellip;</option>
    <option value="mercury">Mercury</option>
    <option value="venus">Venus</option>
    <option value="earth">Earth</option>
    <option value="mars">Mars</option>
  </select>
  <button id="renderPlanetInfoButton">Go</button>
</fieldset>

<div role="region" id="planetInfo" aria-live="polite">
  <h2 id="planetTitle">No planet selected</h2>
  <p id="planetDescription">Select a planet to view its description</p>
</div>

Sample code source

Notes

• The absence of the aria-controls attribute does not constitute a fail, so you are still WCAG compliant if it's missing.
• If you Google it, there is some controversy around how valuable adding aria-controls is to markup, as only like 3 / 21 screen readers actually support aria-controls. The comment below from LJWatson below addresses the concern:

Resources

Github issue on aria-controls
ARIA live regions documentation from Mozilla