Will Hall Consulting

Using a screen reader to test your website's accessibility

By Will Hall

2016-03-25

Originally written for designspike.com

As your website reaches a larger audience, you should become more interested in ensuring that your site meets the needs of a wider variety of readers.  Some of your audience will rely on tools like screen readers to be able to consume your content and activate your site's features.

Contents

What's a screen reader?

A screen reader is a program which (among other things) will read out loud the contents of a web page and help you navigate websites without seeing the screen. Basically it's how blind and low-vision visitors use the web. You can use keyboard shortcuts to activate links and jump around site contents.

Here's a demonstration video which records us using the NVDA screen reader to browse and use a recent project, Next Generation Zone:

Why use a screen reader to test my site?

Well, you could use tools like WebAIM's WAVE, which will scan your site and point out some red flags with its web accessibility.  But testing for screen reader friendliness without actually using a screen reader, is like testing for mobile friendliness without using a mobile device.  You can't perfectly predict what the user's experience will be like when they're using a completely different interface from the one you're used to.

Setting up your screen reader program

  1. Download and install NVDA. NVDA is a free, open source screen reader that works pretty well in our experience.  Its usage is growing according to recent surveys
  2. (Recommended) Install the Focus Highlighter add-on for NVDA.  This is a great add-on for beginner users who are sighted.  It visually highlights elements on the page as they're being read so you have a better idea of what's going on.
  3. Fire up NVDA
  4. (Recommended) If you're using Windows, I recommend using the Windows voice synthesizer. It's a little less jarring than the NVDA default (eSpeak).
    1. In the system tray, click the NVDA icon
    2. Go to Preferences > Synthesizer
    3. Under the Synthesizer option, select Microsoft Speech API
  5. Fire up NVDA and go to a webpage - it'll start reading out loud to you.

Shortcut keys for NVDA screen reader

There are tons of shortcut keys for NVDA - it's the main way you use the program.  But here are a few of the ones I use the most.

Shortcut Command Notes
Up/Down Read next / previous line If you don't want to get fancy, you can move through a web page using the up and down keys.
H Next heading Super useful if the web developer used headings to break up site content. This is one of the most-used features of screen reader software when users browse the web.
1/2/3 Next level 1 heading (or 2, 3, 4, etc) Useful when navigating within a single page.
D Next landmark Jump to sections like the header, footer, or navigation.  Only works if the developer has used HTML5 tags like <header>, <footer>, and <nav>.
Tab Next link or form input Use this when trying to find a link or fill out a form.
Enter Activate a link or button  
Shift   Combine this with other commands to go backwards. For example, Shift-H goes to the previous heading.

For a huge list of shortcuts, check out WebAIM's NVDA shortcut page.

Top accessibility problems to find on your site

Here's a list of the biggest, most common problems that I've found when using a screen reader to navigate websites.

  1. Poor or missing image labels.  Screen readers need alt attributes to describe images.  Use descriptive alt tags and give details when they're important.  When using background images, you can use aria-label instead of alt: 
    <div aria-label="3 kittens on a blanket" style="background-image: url(cute-kittens.jpg)">

    Screen readers will pick up on aria-label and announce the value to the visitor.

  2. Links and buttons with no text.  With convenient tools like fontawesome, today's links often don't contain text at all, using icons instead.  The aria-label and title attributes come in handy in this situation by giving you a way to describe your links. 
     <a title="Design Spike on Twitter" href="http://twitter.com/designspike"><i class="fa fa-twitter"></i></a>
  3. Low quality link and button text. Using descriptive button and link text is always really important, because it lets users know what will happen when activating the link or button, without having to laboriously read the surrounding context. For screen reader software, it's even more important because scanning the surrounding content is difficult.  Always use link and button text that describes the resource or action that will be visited or activated.
  4. Lack of headings, lists, and other semantic tags to format text.  It turns out that all that talk about semantics on the web has another use: it makes using a screen reader way easier.  Take advantage of appropriate tags whenever you can, especially headings, lists, and html5 stuff like <nav>, <header>, and <footer>.  Visitors with screen readers can use these tags to zoom around your web pages with ease.

Let's get empathetic!

The biggest reason to use a screen reader when testing your site's accessibility? It creates empathy by putting you in your users' shoes.  If you have a frustrating experience, chances are your users will too.  By becoming a screen reader user, you'll naturally start demanding better accessibility from your webpages.