Frontend Developer interview question
How do you make a web interface accessible?
Accessible UI starts with semantic HTML and keyboard behaviour. Use native controls where possible, provide visible focus, meaningful labels, correct heading order, and test with keyboard and assistive technology.
Direct answer
What a strong answer covers
How it works
Accessibility rests on semantics the browser already understands. Native elements bring keyboard handling, focus management, and roles for free; ARIA only fills gaps and cannot repair a div pretending to be a button. Beyond structure, the interface needs sufficient contrast, visible focus, labels tied to inputs, error messages announced to screen readers, and no reliance on colour or hover alone. Testing with a keyboard and a screen reader catches most issues automated tools miss.
Example
Use a button for an action rather than a clickable div, then add an accessible name and verify Tab, Enter, and Space behaviour. When a modal opens, move focus into it, trap Tab within it, restore focus to the trigger on close, and announce the title through aria-labelledby so a screen reader user knows where they are.
Common mistakes
- Adding ARIA roles to generic elements instead of using the native element.
- Removing focus outlines for aesthetics without providing a visible replacement.
- Testing only with an automated checker and never with a keyboard or screen reader.
A useful answer structure
Answer from your own work.
Do not memorise a script: use only examples you can explain honestly in follow-up questions.
Open the desktop workspace and rehearse a clear answer in your own words.