Lesson 7 / 25

Screen readers

Optimize content for users who hear instead of see.

How screen readers work

Popular: NVDA (Windows, free), JAWS (Windows, commercial), VoiceOver (macOS/iOS), TalkBack (Android). They read the accessibility tree—an abstract representation of the page semantics. Proper HTML, labels, alt text, and ARIA enable this tree.

Common screen reader issues

Missing labels, vague link text ('Click here'), decorative images with alt, unlabeled form fields, no page title, no heading hierarchy, inaccessible carousels, infinite scroll.

Using aria-label & aria-describedby

Provide visible or hidden context for screen reader users.

<!-- aria-label for icon-only button -->
<button aria-label="Close menu">✕</button>

<!-- aria-describedby for additional info -->
<input 
  id="password" 
  type="password" 
  aria-describedby="pwd-hint"
/>
<p id="pwd-hint">Min 8 chars with upper, lower, number</p>

<!-- aria-label for image -->
<img src="logo.svg" aria-label="Company logo" />

Live regions for updates

Use aria-live="polite" for notifications, aria-live="assertive" for urgent alerts. Content added to live regions is automatically announced.

Testing with NVDA

Use Forms mode (Tab through forms), Browse mode (navigate with arrow keys), and Focus mode (interact with controls). Spend time with real screen readers.