Your daily frequent11y newsletter, brought to you by @ChrisBAshton:
Making a Better Custom Select Element
- A ‘how-to’ guide from accessibility expert Julie Grundy. It describes the drawbacks of the native
<select>
element – the lack of autocomplete, the inflexibility around what can appear inside each<option>
. Julie talks us through building a custom select, avoiding the accessibility pitfalls that many custom select components fall down at. She starts from a baseline of<input type="text">
, with progressive enhancement layered on to turn it into an autocomplete dropdown with keyboard functionality and total screen reader support. It links off to the ARIA 1.1 Combobox with Listbox Popup Example, which is also a good dev resource for this.
Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.