Windows Jaws Chrome
Windows NVDA Chrome
MacOS Voiceover Safari
Use the Semantic HTML
- This native select contains all the accessibility criteria for free and is styled to look cool.
Focusable disabled select (preferred)
This select is focusable with all options disabled.
This select is completely disabled and not focusable, making it harder to discover for the screen reader.
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.