Lesson 8 / 26

Screen readers

Learn how screen readers use the accessibility tree and how to fix labels, link text and announcements.

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 problems

Avoid these common problems: missing labels, vague link text ("Click here"), meaningful images without alt, unlabelled form fields, no page title, no heading hierarchy, inaccessible carousels and 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.