Screen Readers — How They Parse HTML
Also Known As
NVDA
JAWS
VoiceOver
accessibility tree
TL;DR
Screen readers build an accessibility tree — semantic HTML provides roles automatically; ARIA fills gaps for custom components.
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
✗ Adding ARIA roles makes content accessible — the first rule of ARIA is use native HTML first; button is always better than div with role=button.
Why It Matters
A page built entirely with divs announces nothing to screen readers — semantic HTML makes it fully navigable without any ARIA.
Common Mistakes
- div for buttons — no keyboard focus
- Images without alt text
- Removing outline for aesthetics
- Dynamic content without aria-live
Code Examples
✗ Vulnerable
<div class="btn" onclick="submit()">Submit</div>
✓ Fixed
<button type="submit">Submit</button>
<nav aria-label="Main"><ul><li><a href="/">Home</a></li></ul></nav>Tags
🤝 Adopt this term
£79/year · your link shown here
Added
16 Mar 2026
Edited
22 Mar 2026
Views
37
🤖 AI Guestbook educational data only
|
|
Last 30 days
Agents 1
No pings yesterday
Amazonbot 16
Perplexity 7
Google 4
Unknown AI 2
SEMrush 2
Ahrefs 2
Also referenced
How they use it
crawler 30
crawler_json 3
Related categories
⚡
DEV INTEL
Tools & Severity
🟠 High
⚙ Fix effort: Medium
⚡ Quick Fix
Test with NVDA (Windows free) or VoiceOver (Mac/iOS built-in) on your most critical user flows — you will find issues that automated tools miss every time
📦 Applies To
any HTML5
web
🔗 Prerequisites
🔍 Detection Hints
Images without alt text; form inputs without labels; modals without focus trapping; custom widgets without ARIA roles
Auto-detectable:
✓ Yes
nvda
voiceover
jaws
axe
lighthouse
⚠ Related Problems
🤖 AI Agent
Confidence: High
False Positives: Medium
✗ Manual fix
Fix: Medium
Context: File
Tests: Update