How do you make an interface fully keyboard accessible?
Assesses fundamental understanding of Web Accessibility conventions, runtime behavior, and memory/performance considerations.
Hiring managers look for precision, avoidance of ambiguous jargon, and ability to explain trade-offs under real production conditions.
Every interactive element must be reachable and operable with the keyboard alone. Native elements such as button, a[href], input, select and textarea are focusable and handle Enter and Space automatically. A clickable div is not, and adding tabindex="0" plus key handlers is usually a sign to use a button instead. Use tabindex="0" sparingly to add elements to the tab order and tabindex="-1" to make something programmatically focusable without adding it to the sequence.
Focus must be visible, so never remove outlines without a clear replacement, such as :focus-visible styles. Tab order should follow the visual and logical reading order, and positive tabindex values should be avoided because they create a confusing parallel order.
Manage focus when content changes: move focus into a dialog and trap it there, return it to the trigger on close, and after deleting an item move focus to a sensible neighbour. Add a skip link to bypass repeated navigation, and test by unplugging the mouse.
Candidate Response Strategy & Interview Tips
- Start with a concise one-sentence summary: Deliver a direct, confident answer first before expanding into nuances.
- Demonstrate real-world trade-offs: Discuss where this approach excels and when you would avoid it in production systems.
- Discuss complexity & edge cases: Proactively explain time/space complexity or boundary conditions (null values, scale limits).
- Prepare for interviewer follow-ups: Technical hiring panels frequently probe deeper into concurrency, backward compatibility, or alternative libraries.