Use Semantic HTML
This native select contains all the accessibility criteria for free and is styled to look cool.
Custom listboxes are notoriously difficult to make screen reader accessible.
Even Angular Material documentation says “The native
<select> offers the best accessibility because it is supported directly by screen-readers.”
Custom listboxes are notoriously difficult to develop in a way that works for the screen reader.
Angular material custom listbox requires the Live Announcer overlay to be accessible, and advises using a native
<select> for accessibility.
Before you attempt to use one of these, be certain a native
<select> is not an option.
- The popup button should reference the label with
role="listbox"on the list itself.
role="option"for each list item
- The state is expressed by changing the inner text of the focusable popup button
- Listboxes require a number of relationships to be built with custom attributes.
aria-haspopup="listbox"to indicate its function
- Naming the popup button requires
- The list itself requires
aria-labelledby="listbox-label"to associate options with the label.
- Focus must be visible
- Using the arrow keys doesn’t change the focus, it changes the name of the focusable popup button