Categories
aria forms

Accessible Custom Select Dropdowns

In web development, creating custom select dropdowns is difficult. It requires a lot of resources to sufficiently design (annotating the interaction, etc) and develop (the Javascript is fairly complex and the ARIA isn’t easy) and then test. Additional requirements such as option groups and auto-suggest make it even more challenging and time-consuming, and usually frustrating.

Most often the result is not fully accessible; browser and assistive technology is inconsistent; and implementations vary across the web. This is why it’s always better to use native selects with HTML/web. (Native components is also a better choice for native apps.) Don’t forget that HTML selects can be styled with CSS; see these resources by Scott O’HaraRTD, Filament Group, and LugoLabs.

If you must implement a custom select dropdown, you will most like need to use the ARIA listbox rolecombobox role (which specifies a composite widget), and often a combination of those roles. The option role is also required and usually a few other ARIA attributes (for label, state, etc.).

Examples

Here are some great examples which will save many folks a lot of time—if you must customize!

screen shot of custom select; category dropdown and submit button

Other articles

5 replies on “Accessible Custom Select Dropdowns”

All solutions have the same problem: they don’t work well for sighted users on small mobile devices, because on a smartphone they work just like on bug screens.
The way Apple for example handles selects on phones is far better:
You first select an item which easily can be a wrong one if you’re suffering from tremors or you are just on a walk and try to fill in a form.
Only after you finally selected the right option you press on a button to check in your choice.
This behavior is much more user friendly than picking from a list, that immediately closes itself even if you tapped accidentally on a wrong item.

Leave a Reply

Your email address will not be published. Required fields are marked *