Refactor a legacy UI for accessible DOM flow
deep accessibility beyond ARIA.
align DOM order with reading order, use semantic landmarks and headings, and ensure a sensible tab order with managed focus.
relying on ARIA to patch a div soup with broken source order.
WHAT THIS TESTS The interviewer wants to see that you understand the first rule of ARIA, which is to not use ARIA when native semantics and correct structure will do. Legacy UIs usually fail because the DOM order and element choices are wrong, not because attributes are missing.
A GOOD ANSWER COVERS Start with logical flow: the order of elements in the DOM source should match the order in which content should be read and traversed, because screen readers and sequential keyboard focus follow source order, not CSS-positioned visual order. Refactor CSS-driven reordering so the source itself is correct. Replace generic divs and spans with semantic elements and landmark regions: header, nav, main, footer, plus a single logical heading hierarchy so users can navigate by headings. Ensure keyboard navigability by using natively focusable elements like button and a, avoiding clickable divs, and never relying on positive tabindex values that fragment the tab order. Manage focus explicitly: move focus into modals and trap it, return focus on close, and move focus to new content on client-side route changes.
COMMON WRONG ANSWERS Adding role and aria-label to a div instead of using a real button. Using positive tabindex to force an order, which becomes unmaintainable. Leaving DOM order scrambled and trusting screen readers to follow visual layout, which they do not.
LIKELY FOLLOW-UPS How do you audit current state, for example with the accessibility tree and a screen reader. How do you handle a single-page app's focus on navigation. How do you decide between fixing structure versus adding ARIA. How do you prevent regressions in CI.
ONE CONCRETE EXAMPLE A legacy page placed the sidebar before main content in the DOM but positioned it visually beside the body. Screen reader users heard all navigation before any content. Reordering the source to header, main, then nav, wrapping each in landmarks, and converting fake button divs into real buttons made the page traversable with no extra ARIA.
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.