Screen Reader

ELI5 — The Vibe Check

A screen reader is software that reads your website out loud for people who can't see the screen. It navigates through your HTML and reads the text, labels, and descriptions. If your buttons just say 'Click here' or your images have no alt text, screen reader users are completely lost.

Real Talk

Screen readers are assistive technology software (e.g., NVDA, JAWS, VoiceOver) that convert on-screen text and UI elements to speech or braille output for users with visual impairments. They traverse the accessibility tree, which is built from the DOM and ARIA attributes. Proper semantic HTML and ARIA are critical for screen reader compatibility.

Show Me The Code

<!-- Screen reader will say nothing useful -->
<img src="graph.png" />

<!-- Screen reader will say the alt text -->
<img src="graph.png" alt="Bar chart showing 40% growth in Q4 2024" />

When You'll Hear This

Test with VoiceOver on Mac to catch screen reader issues.,Screen reader users navigate by headings — use a logical heading hierarchy.,Our modal traps focus correctly for screen reader users.