Screen Reader Users
Navigation patterns and content authoring for screen readers
Screen readers are software tools that convert on-screen text and interface elements into synthesized speech or Braille output. Users navigate by headings, landmarks, links, and form controls - not by visual layout. Content designed with screen readers in mind must be well-structured, logically ordered, and properly labeled.
Core requirements
Clear heading hierarchy
Screen reader users frequently navigate a page by jumping between headings. A well-structured heading hierarchy gives them a fast overview and lets them jump directly to the section they need. See the Heading Structure guide for full details.
Descriptive alt text for images
Every meaningful image must have alt text that conveys the purpose and content of the image. Decorative images should have alt="" so screen readers skip them. See the Image Alt Text guide for full details.
Descriptive link text
Screen reader users can call up a list of all links on the page and navigate directly to any of them. "Click here" and "Read more" are useless in this context. See the Link and Button Names guide for full details.
Logical reading order
Screen readers read content in DOM order - the order the HTML elements appear in the source, not the visual order on screen. These must match. A common failure is CSS that visually reorders columns while the DOM order remains unchanged, causing screen reader users to hear content in a confusing sequence.
Labeled forms and interactive elements
Every form input must have a visible, programmatically associated label. Placeholder text is not a substitute - it disappears when the user starts typing and is often announced inconsistently by screen readers.
<!-- Correct: explicit label association -->
<label for="email">Email address</label>
<input type="email" id="email" name="email">
<!-- Incorrect: placeholder only -->
<input type="email" placeholder="Email address">Testing with a screen reader
The most effective way to evaluate screen reader accessibility is to use one. Free options include:
- NVDA (Windows, free) - the most widely used screen reader
- VoiceOver (macOS and iOS, built-in) - press Cmd + F5 to activate
- TalkBack (Android, built-in)
A basic screen reader test should cover: navigating by headings, following links, completing a form, and reading an image description.
Why it matters
Over 7 million people in the United States use screen readers. Many do so full-time as their primary way of accessing digital content. Good structure benefits all users - headings, labeled forms, and logical reading order improve usability even for sighted keyboard users.