Make a Custom Dropdown Accessible
Make a Custom Dropdown Accessible
MediumFrontend0% accepted
A designer built a <div>-based dropdown that mouse users love but keyboard and screen-reader users can't operate. Explain how to make a custom select fully accessible. Cover: correct ARIA roles (listbox/option), keyboard interaction (Arrow keys, Enter, Esc, type-ahead), focus management, and aria-expanded/aria-activedescendant.
Approach
Use role=listbox/option, manage focus, support Arrow/Enter/Esc/Home/End, set aria-expanded and aria-activedescendant, and ensure the trigger is a real focusable button.
More Frontend problems
Browse all coding problems →Scenarios & Expected Answers
No example scenarios for this problem.
Sign in to continue
Create a free account to view answers and mark progress.
- Free forever — no credit card
- Theory Q&A with detailed answers
- Points, streaks & leaderboards