Why is semantic HTML preferred over divs with ARIA?
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.
Semantic HTML uses elements that describe meaning: header, nav, main, section, article, aside, footer, button, label, table and ul. Assistive technologies and browsers derive roles, names, states and keyboard behaviour from these elements for free. A button announces itself as a button, is focusable and responds to Enter and Space. A styled div with an onclick does none of that without extra code, and the extra code is easy to get wrong.
Headings h1 to h6 form an outline that screen reader users navigate by, so use them for structure, not for font size. Landmarks let users jump between regions. Lists group related items, and tables with th and scope expose relationships.
Semantic markup is also better for SEO, easier to style and more robust than ARIA. The first rule of ARIA is not to use ARIA when a native element already does the job. Incorrect ARIA is often worse than none, because it overrides correct native semantics.
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.