Screen Readers — How They Parse HTML
debt(d5/e5/b5/t7)
Closest to 'specialist tool catches' (d5) — axe and Lighthouse catch missing alt/labels, but many a11y issues (focus order, dynamic announcements) require manual NVDA/VoiceOver testing per detection_hints.
Closest to 'touches multiple files / significant refactor' (e5) — replacing div-buttons with semantic elements, adding ARIA-live, and fixing focus traps typically spans many components, not a one-line fix.
Closest to 'persistent productivity tax' (b5) — since applies_to is all web contexts, accessibility considerations shape every UI component going forward, slowing many work streams.
Closest to 'serious trap' (t7) — the misconception that ARIA equals accessibility contradicts the actual rule (native HTML first); developers confidently add role=button to divs thinking it's correct when it breaks keyboard semantics.
Also Known As
TL;DR
Explanation
NVDA, JAWS, VoiceOver consume the accessibility tree — each node has role, name, state, value. Semantic HTML provides these automatically: button→role=button, nav→role=navigation. Div and span have no role. First rule of ARIA: use native HTML first.
Common Misconception
Why It Matters
Common Mistakes
- div for buttons — no keyboard focus
- Images without alt text
- Removing outline for aesthetics
- Dynamic content without aria-live
Code Examples
<div class="btn" onclick="submit()">Submit</div><button type="submit">Submit</button>
<nav aria-label="Main"><ul><li><a href="/">Home</a></li></ul></nav>