Designing for Screen Reader Accessibility

How do screen reader users navigate a webpage?

Introduction to Screen Readers

A screen reader is a form of assistive technology that converts digital text into synthesized speech or braille. 92% of screen reader users use the technology due to a disability (most commonly blindness or visual impairment). The three most commonly used screen readers are JAWS (Windows), NVDA (Windows), and VoiceOver (Mac/iOS).

Screen reader users typically use a keyboard to control their screen reader, as blind and visually impaired users cannot locate where their mouse is pointing on the screen. Screen readers tell users where they are on a webpage, read the content to users, and allow users to jump to different parts of the page to navigate to the content that interests them.

Screen Reader Demo: Navigation

(Relevant timestamps: 01:20 to 01:46)

In this video, Mark Sutton from the University of California San Francisco’s IT Department gives a quick demonstration of how he uses a screen reader to navigate through a webpage and find the information he needs.

WebAIM Screen Reader User Survey: Navigation

In WebAIM’s 2021 survey of screen reader users, over two-thirds of the 1,547 respondents (67.7%) indicated that they prefer to use headings to find information on lengthy webpages. Other users prefer to use the "find" feature of a screen reader, to read through the entire page, or to navigate using the links or regions of the page.

Bar chart showing results for the WebAIM screen reader survey question "When trying to find information on a lengthy web page, which of the following are you most likely to do first?" The top result is "Navigate through the headings on the page" at 67.7% of respondents. Other results with less responses are "use the find feature", "read through the page", "navigate through the links of the page", and "navigate through the regions of the page"

What WCAG guidelines address screen reader accessibility?

Introduction to WCAG

The Web Content Accessibility Guidelines, or WCAG (“wuh-kag”), are a set of guidelines developed by the Web Accessibility Initiative (WAI), part of the World Wide Web Consortium (W3C). These guidelines are collaboratively produced with feedback from industry professionals, disability organizations, accessibility researchers, government, and others interested in web accessibility.

WCAG exists as a tool to explain how to make web content more accessible to people with disabilities. While WCAG is an extensive guide, four WCAG guidelines in particular are especially important to screen reader accessibility:

Headings
Links
Tables
Alt text

WCAG Guidelines: Headings

Headings should be used to structure a webpage by creating an outline that matches the organization of the content. Just as visual cues like text size and boldness allow sighted users to skim through content, coding heading levels correctly allows users with visual impairments to navigate content in the same way.

Each page should have only one <h1> (heading level one). Use <h2> to <h6> (heading levels two through six) to provide further structure for content.

Skipping a heading level, such as going from <h2> to <h4> (heading level two to heading level four), interferes with a user's conceptual outline of a webpage and can cause confusion for a screen reader users.

Screen Reader Demo: Headings

(Relevant timestamps: 08:41 to 09:25)

In this demo, Kerrin, a UX Designer, shows how screen readers navigate through headings, and what happens when headings are used incorrectly on a webpage.

WebAIM Screen Reader User Survey: Headings

In another question from WebAIM’s 2021 survey of screen reader users, around 85% of respondents (1,320 users) indicated that they find heading levels useful when navigating a webpage. This is the most common way that screen reader users navigate through a webpage, so it is important to structure your content intentionally to be accessible.

Bar chart showing results for the WebAIM screen reader survey question "When navigating a web page by headings, how useful are the heading levels to you?" The top result is "Very useful" at 52.8% of respondents. The second highest result is "Somewhat useful" at 32.9% of respondents. Only 14.3% of respondents did not indicate that they found heading levels useful

WCAG Guidelines: Links

Like headings, screen reader users can pull up a list of all links on a page to navigate and find the information that they need. Since these links contain only the hyperlinked text without surrounding text, link text should make sense when read out of context.

Use unambiguous link words and phrases such as “Contact us." Link text such as “click here” makes no sense out of context and should be avoided. Also, most screen readers say "link" before each link, so you do not need to include the word "link" in your text.

In addition, users should be able to access all links on a webpage using only a keyboard. Test keyboard functionality for yourself by seeing if you can jump to all links on a page using the "Tab" key, and select links using the "Enter" key.

Screen Reader Demo: Links

(Relevant timestamps: 09:26 to 09:48)

This video clip is another demo from Kerrin, who will show how screen readers can navigate through the links on a webpage, and why descriptive link text is important for screen reader users to navigate efficiently.

WCAG Guidelines: Tables

Tables contain complex data, and proper use of HTML is essential for screen reader users to parse the information included in them. When the proper HTML markup is in place, screen reader users can navigate through data tables one cell at a time, and they will hear the column and row headers spoken to them to provide context for individual cells and data points.

In order for screen readers to accurately narrate data tables, you will need to designate row and column headers for the table using HTML, and use the “scope” HTML attribute to associate data cells with the appropriate headers.

Screen Reader Demo: Tables

(Relevant timestamps: 02:22 to 02:58)

In this demo, Mark Sutton demonstrates how a screen reader navigates through a table and why proper coding of row and column headers is important. Without proper coding, screen reader users must expend more effort to parse and understand a data table.

WCAG Guidelines: Alt Text

Alternative text, or alt text, is a description of images and non-text content on a webpage. Alt text is a complex topic, so this is a very brief overview!

When writing alt text, carefully consider an image’s content and function. For content, consider what the image conveys to a sighted user. For function, ask yourself if the image is a button or a link.

Be accurate when describing the content and function of an image in alt text, but keep it succinct and avoid repeating information found in the surrounding text. You should also avoid phrases like “image of” or “graphic of” in your alt text. Screen readers already say “graphic” before reading alt text, so it’s redundant to include in the alt text itself.

If an image is purely decorative and doesn’t present important content or have a function, the image does not need alt text.

Screen Reader Demo: Alt Text

(Relevant timestamps: 01:56 to 02:19)

In this demo, Mark Sutton demonstrates how a screen reader reads out the alt text for an image, and what happens when alt text is not included. Instead of describing the image, the screen reader reads out the name of the image file.

How can technical communicators create content that is accessible to screen reader users?

Key Takeaways

Use structure and formatting intentionally, rather than just for styling.
- - Use heading tags <h1> through <h6> (heading levels one through six) to outline the structure of a page.
  - Heading tags should not be used solely for visual styling.
Design with accessibility in mind.
- - Write descriptive, unambiguous link text.
  - Include accurate, succinct alt text.
  - Format data tables correctly.
Test content yourself using an actual screen reader.
- - Online accessibility evaluation tools can be hard to parse.
  - Test for yourself to understand how real users will access your content.
  - Screen reader options (download links found in the "Sources" section below):
    1. - NVDA (Windows computers; free)
      - VoiceOver (Mac computers and iOS devices; pre-installed)
      - JAWS (Windows computers; requires purchase)