Video examples

iOS Voiceover Safari

Android Talkback Chrome

Windows Jaws Chrome

Windows NVDA Chrome

MacOS Voiceover Safari

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.
<div class="select-container">
  <label for="nato">
    Select a NATO Phoenetic Letter
  </label>
  <select id="nato">
    <option label="None" disabled selected>None</option>
    <option label="Alpha">Alpha</option>
    <option label="Bravo">Bravo</option>
    <option label="Charlie">Charlie</option>
  </select>
</div>

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.

Further reading