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 phonetic Letter
  </label>
  <select id="nato">
    <option value="None" selected>None</option>
    <option value="A">Alpha</option>
    <option value="Bravo">Bravo</option>
    <option value="C">Charlie</option>
  </select>
</div>

Focusable disabled select (preferred)

This select is focusable with all options disabled.

<div class="select-container">
  <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>
</div>

Disabled select

This select is completely disabled and not focusable, making it harder to discover for the screen reader.

<div class="select-container">
  <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>
</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