Video examples

iOS Voiceover

Android Talkback

Windows Jaws Chrome

Windows NVDA Chrome

MacOS Voiceover Safari

Custom dropdown select elements: Just don’t.

Custom dropdown selects are notoriously difficult to make screen reader accessible.

…it is now thoroughly clear that recreating the native behavior of a <select> element is impossible: its underlying semantics differ across platforms; its keyboard behavior is inconsistent; its mobile presentation and behavior is entirely different from desktop. In making a custom UI control, we take upon ourselves what was the browser’s responsibility to define semantics, presentation, and behavior, and this means we must choose one single implementation to serve to everyone. — Sarah Higley, Web Developer at Microsoft

Even Angular Material documentation says “The native <select> offers the best accessibility because it is supported directly by screen-readers.”

Angular material custom listbox requires the Live Announcer overlay to be accessible, and advises using a native <select> for accessibility.

Angular Material also supports use of the native <select> element inside of <mat-form-field>. The native control has several performance, accessibility, and usability advantages.

Before you attempt to use one of these, be certain a native <select> is not an option and you understand the commitment for coding and testing across all platforms.

Code examples

Use the Semantic HTML <select>

  • This native select contains all the accessibility criteria for free and is styled to look cool.
  • It uses CSS pseudo attributes to create the arrow indicator, no Javascript.
<label for="nato">
  Select a Nato phonetic Letter
</label>
<select id="nato">
  <option value="None" selected disabled>Select a letter</option>
  <option value="A">Alpha</option>
  <option value="B">Bravo</option>
  <option value="C">Charlie</option>
  <option value="D">Delta</option>
  <option value="E">Echo</option>
  <option value="F">Foxtrot</option>
  <option value="G">Golf</option>
  <option value="H">Hotel</option>
  <option value="I">India</option>
  <option value="J">Juliet</option>
  <option value="K">Kilo</option>
  <option value="L">Lima</option>
  <option value="M">Mike</option>
  <option value="N">November</option>
  <option value="O">Oscar</option>
  <option value="P">Papa</option>
  <option value="Q">Quebec</option>
  <option value="R">Romeo</option>
  <option value="S">Sierra</option>
  <option value="T">Tango</option>
  <option value="U">Uniform</option>
  <option value="V">Victor</option>
  <option value="W">Whiskey</option>
  <option value="X">X-ray</option>
  <option value="Y">Yankee</option>
  <option value="Z">Zulu</option>
</select>

Focusable disabled select

This select is focusable with all options disabled.

By using aria-disabled="true" and disabling each option, the select is more discoverable for people using a screenreader.

<label for="nato-disabled-focusable">
  Select a Nato phonetic Letter
</label>
<select id="nato-disabled-focusable" aria-disabled="true">
  <option value="None" disabled>None</option>
  <option value="A" disabled selected>Alpha</option>
  <option value="B" disabled>Bravo</option>
  <option value="C" disabled>Charlie</option>
</select>

Disabled select

This select is completely disabled and not focusable, making it harder to discover for people using a screenreader.

<label for="nato-disabled">
  Select a Nato phonetic Letter
</label>
<select id="nato-disabled" disabled>
  <option value="None">None</option>
  <option value="A">Alpha</option>
  <option value="B" selected>Bravo</option>
  <option value="C">Charlie</option>
</select>

Bad example

  • Don’t use selects for non-logically sequential information
  • This select would be better served as a set of radio buttons allowing inspection of all options without hiding them
Select a product ID number

Further reading

Related select dropdown entries