Accessibility Interview Questions
20 Accessibility interview questions with worked answers, complexity notes, and runnable code you can edit in the browser — ordered easy to hard so you build up steadily. Free, no signup. Open any question for the full answer.
Building for everyone, not just the happy path
Accessibility interviews reveal fast whether a candidate has ever considered a user who is not holding a mouse and looking at the screen. The foundation is almost boringly practical: use the right HTML element and most of the work is already done. A <button> is focusable, announces its role, and fires on Enter and Space for free; a <div> pretending to be a button gives you none of that and makes you rebuild it by hand. The accessibility tree — the parallel structure assistive technology actually reads — is built from your markup, so semantic HTML is not a nicety, it is the API.
ARIA is the tool for the gaps native elements cannot fill, and its first rule is not to use it when a native element would do. When you do reach for it, the discipline is keeping its state in sync with reality: an aria-expanded that lies is worse than no attribute at all. Keyboard operability is non-negotiable — every interactive thing must be reachable and usable without a pointer, with a visible focus indicator so sighted keyboard users know where they are.
The hard questions are the custom widgets: a modal that traps focus and restores it on close, a combobox that manages aria-activedescendant, a menu with roving tabindex. These are where the WAI-ARIA authoring patterns earn their keep. The questions here climb from semantics and contrast up through ARIA and accessible forms into those widgets and a realistic testing strategy — automated scans to catch the obvious, manual keyboard and screen-reader passes to catch what scans never will. A green audit is a floor, not a finish line.
Easy
- Semantic HTML & landmark regions Semantic HTML
Why prefer , , over s? What do landmarks give a screen-reader user? - The accessibility tree & accessible names Accessibility Tree
What is the accessibility tree, and how does an element get its 'accessible name'? - Alt text: decorative vs informative images Images & Alt Text
How do you decide what alt text an image needs? When should alt be empty? - Keyboard navigation & focus order Keyboard Navigation
What makes a UI keyboard-accessible? What does tabindex do, and why is a positive tabindex a smell? - Visible focus indicators & :focus-visible Focus Indicators
Why is `outline: none` a bug? What does :focus-visible solve? - Heading structure & the document outline Document Structure
Why do heading levels matter for screen readers? What are the rules for h1–h6? - Color contrast & not relying on color alone Color & Contrast
What are the WCAG contrast requirements, and why is 'color alone' a failure even when contrast passes? - Labeling form controls Accessible Forms
How do you correctly label an input? Why isn't a placeholder a label, and what's wrong with a bare aria-label?
Medium
- ARIA roles, states, properties — and the first rule of ARIA ARIA
What do ARIA roles, states, and properties actually do? Why is 'no ARIA better than bad ARIA'? - Accessible form errors & validation Accessible Forms
How do you announce a validation error to a screen-reader user and tie it to the field? - Accessible SVG, icons & complex images Images & SVG
How do you make inline SVG icons and complex graphics accessible? What about icon-only buttons? - Skip links & focus management in SPAs Focus Management
What is a skip link and why does it matter? How do you handle focus when a client-side route changes? - Accessible data tables Data Tables
How do you make a data table accessible? What do , , and headers/id do — and why never tables for layout?
Hard
- Building an accessible modal dialog Dialogs & Focus Trap
What does a modal dialog need to be accessible? Walk through the focus trap, aria-modal, and restoring focus. - Accessible combobox / autocomplete (APG) ARIA Widgets
Design an accessible autocomplete. What roles, ARIA state, and keyboard model does the combobox pattern require? - Live regions: aria-live, status vs alert Live Regions
How do you announce dynamic content (toasts, async results, errors) to a screen reader? polite vs assertive? - Menu / menubar & roving tabindex ARIA Widgets
How does an application menu differ from a nav list? What is roving tabindex and why use it? - Accessible tabs (tablist / tab / tabpanel) ARIA Widgets
Build an accessible tabs widget. What roles and ARIA link a tab to its panel, and what's the keyboard model? - Keyboard-accessible drag and drop Keyboard Interaction
Native HTML drag-and-drop is inaccessible. How do you make a reorder/DnD interaction work for keyboard and screen-reader users? - Testing accessibility: automated vs manual Testing
How do you actually verify a feature is accessible? What can automated tools catch, and what can they never catch?
Other topics
HTML/CSS · Browser · JavaScript · TypeScript · React · System Design · Web Performance · Testing · Networking/Security · DSA