Creating Screen Reader Friendly Pages

Designing for Screen Reader Compatibility (from WebAIM)

Audio interfaces present content linearly to users, one item at a time. This contrasts with the way in which most people use visual interfaces by skimming the entire page at once.

Here are some ways that screen readers can “skim” through content. This has implications for those who create web pages.

  1. Since a screen reader can generally jump from link to link using the Tab key, it is important that link labels are clear and should make sense when read out of context.
  2. Users can jump from heading to heading, so it is important to organize your pages using headings.
  3. Create a way to skip the navigation links and allow users to jump directly to the main content, if possible.

Seven Screen Reader Usability Tips/(from sitepoint)

  1. Use descriptive headings.
  2. Use descriptive link text.
  3. Provide information in lists.
  4. Employ logical linearization, that is, put important information, like directions,  at the top of the page.
  5. Use short, succinct alt text for images.  This should be descriptive, but not overly wordy.
  6. Write short, front-loaded paragraphs.
  7. Write descriptive page titles.

NOTE: These tips will help all your users, not just those who use screen readers.

Web Accessibility Principles from lynda.com

lynda.com contains a treasure trove of online courses (or tutorials) on many technical and web subjects.  To get the full benefit a paid subscription is required, however, most courses include many free online sections.

One which ties into using a screen reader is found here:  Web Accessibility Principles

I recommend viewing all the videos in section 1, Getting Started with Web Accessibility. These are available to everyone whether you have a subscription or not. The section called  Experiencing a website via a screen reader provides a good example of how screen readers work.  In this less than six-minute video the viewer can see how a screen reader works with a badly designed web page and then how it works with the same web page when improved . 

See An Introduction to Screen Readers, for more information.