Q3 of 24 · Accessibility

What is semantic HTML and why does it matter for accessibility testing?

AccessibilityJunioraccessibilitysemantic-htmlariadomfundamentals

Short answer

Short answer: Semantic HTML uses elements whose tag names convey meaning — button, nav, main, h1, label — rather than generic divs and spans. Browsers expose native semantics to the accessibility tree automatically, so assistive technology announces a button as a button without any extra work. ARIA is only needed when native HTML falls short.

Detail

Every HTML element has a default ARIA role derived from its tag. A <button> is announced by screen readers as a button, is focusable by default, is activatable with Enter and Space, and is programmatically identifiable as an interactive control. A <div> has none of those properties — to replicate a button's behaviour with a div you need role="button", tabindex="0", keyboard event handlers, and careful ARIA state management.

This is the basis of the "first rule of ARIA": use native HTML before reaching for ARIA. Every time a developer replaces a <nav> with a <div role="navigation">, or a <button> with a <span role="button">, they take on maintenance debt and introduce points of failure.

Testing implications: during a code review or audit, look for: interactive elements built from divs or spans without appropriate roles, heading structure that uses styled paragraphs instead of h1-h6, form fields without associated <label> elements, and navigation landmarks replaced with generic containers.

A practical check: run the browser's accessibility tree inspector (DevTools → Accessibility pane in Chrome/Firefox) and verify that the role, name, and state shown for each interactive element match what you'd expect. If a button shows as generic instead of button, the semantics are wrong.

// WHAT INTERVIEWERS LOOK FOR

Explains *why* semantic HTML matters (native accessibility tree mapping, not just 'it's good practice'). States the first rule of ARIA: use native HTML before ARIA.

// COMMON PITFALL

Knowing that semantic HTML is important but not being able to explain the mechanism — that browsers automatically expose element semantics to the accessibility tree.