A team wants a custom styled dropdown instead of the native select. How do you make sure it is accessible?

What the interviewer wants to hear

• Question whether native select can be styled enough
• Follow established ARIA patterns like combobox or listbox
• Full keyboard support and visible focus
• Accessible name, states and announcements
• Test with screen readers, zoom and touch

Model answer

First I ask whether we really need it. Native selects are accessible by default and work well on mobile, and modern CSS lets us style the closed state quite a lot. If we still need a custom one, for example with search or rich options, I follow an established pattern like the WAI-ARIA combobox or listbox, ideally from a tested library. My spec covers keyboard behaviour: open with Enter, Space or Arrow keys, move with arrows, type to jump, Escape to close and focus returning to the trigger. It needs a visible label linked to it, a clear focus style, states like expanded and selected announced to assistive tech, enough contrast and big enough targets. Before release we test with VoiceOver and NVDA, keyboard only, browser zoom to 200% and touch devices.

More medium UI/UX Designer questions

• You have only one week to design a new feature. How do you include user research?
• A stakeholder gives feedback on your design that you disagree with. How do you handle it?
• How do you measure whether a design change was successful?
• Why are empty, loading and error states important, and how do you design them?
• An engineer says your design will take three times longer to build than planned. What do you do?
• How do you plan and run user interviews for a new feature?
• You are asked to restructure the navigation of a large website with hundreds of pages. How do you approach it?
• How do you turn research findings into design decisions the team actually acts on?
• How do you run a design critique session that is useful rather than a debate about taste?