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’Hara, RTD, Filament Group, and LugoLabs.

If you must implement a custom select dropdown, you will most like need to use the ARIA listbox role, combobox 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!

• Anatomy of an Accessible Auto Suggest (UX Mastery) by Adem Cifcioglu
  • Modified version by Web Axe author: Accessible Autosuggest Dropdown
• Custom Select by Deque Systems
• Combobo — accessible combobox module by Harris Schneiderman (of Deque Systems) combobo on github
• Building an accessible auto-complete (Slideshare) by @russmaxdesign and now Russ’ preso for ID24 on YouTube!
• Accessible Autocomplete by Adina Halter
• jQuery accessible autocomplete list by Nicolas Hoffmann
• Accessible Autocomplete examples by alphagov (gov.uk); related article about testing autocomplete.
• Basic autocomplete (activedescendent) CodePen by Heydon Pickering
• Collapsible Dropdown Listbox Example by W3C (from comments)
• Combobox with Listbox Popup Examples by W3C
• Gerard Cohen’s custom select: Presentation video (YouTube) / Web-based slide deck / code demo
• Styling a Select Like It’s 2019 by filament group
• Building an accessible autocomplete control by Adam Silver (Feb. 2020) demo
• <select> your poison by Sarah Higley (Dec. 2019)

Other articles

• Under-Engineered Select Menus by Adrian Roselli
• Consistently Inconsistent: When the Most Accessible Experience is Different for Each User by Eric Bailey
• ARIA Combobox Update, Differences between ARIA 1.1 and 1.2 and Responsive Design Considerations by Bryan Garaventa
  (Oct. 2022)