Is your website screen-reader accessible?

With tens of millions of visually impaired visitors on the web and the increased focus on equal access to online resources, it is essential to build websites that meet or exceed the WCAG (W3C’s Website Content Accessibility Guidelines).

One important aspect of accessibility is having a website that ‘reads’ well when visited with a screen reader. Screen readers are applications used by visually impaired users. These applications read aloud the content on the screen and allow the user to interact with the computer using keystrokes.

Screen readers come standard on pretty much all modern computers, tablets, and smart phones running Linux, MacOS, Windows, and Android. 

In this edition of Behind the Browser we will go over how to use the three most common (and free) desktop screen readers for Mac or Windows.

How to Access Your Screen Reader

All recent Mac computers come with an application called VoiceOver. To activate VoiceOver simply press command + F5 on your keyboard. This will open a dialog box and trigger the VoiceOver narrator. If you have your volume turned up, you should hear the narrator saying, “Welcome to VoiceOver…” followed by some instructions.

Getting Started

To start your screen reader application, use these key combinations:

• Voice Over
  • Command + F5 
• NVDA
  • Ctrl + Alt + N 
• Narrator:
  • Windows Logo Key  + Ctrl + Enter 

Pausing the Screen Reader

Don’t be surprised if you start to feel a little disoriented when you first start out. Having everything on your screen read aloud can be confusing. It takes a little getting used to so brace yourself.

For that reason, one of the most important commands to master is the pause keystroke. 

• Voice Over
  • Caps Lock or Control
• NVDA
  • Caps Lock 
• Narrator:
  • Windows Logo  + Ctrl + Enter

Navigating Between Elements

Navigating with the screen reader is also done by keystrokes. The basic navigation method is advancing the reader forward one step or going back one step. The keystrokes for those commands are:

• Voice Over
  • Advance: control + option + right arrow key
  • Reverse: control + option + left arrow key
• NVDA
  • Advance: down or right arrow keys
  • Reverse:  up or left arrow keys
• Narrator:
  • Advance: down or right arrow keys
  • Reverse:  up or left arrow keys

Scan Page Headings

Screen reader users often skip between page headings to get a general idea about the content on the page. To navigate across headings, use these commands:

• Voice Over
  • Advance: control + option + command + H
  • Reverse: control + option + command + shift + H
• NVDA
  • Advance: H Key
  • Reverse: H + Shift
• Narrator:
  • Advance: H Key
  • Reverse: H + Shift

Clicking Without a Mouse

A huge part of navigating the web is clicking on buttons and links. To click elements with a screen reader use these commands:

• Voice Over
  • control + option + spacebar
• NVDA
  • spacebar
• Narrator
  • enter or spacebar

What to look for our your website

If you’re a website manager or admin, we recommend that you navigate through your site with a screen reader to see how it performs. Here are a few things to look out for:

• Order of elements: Does the screen reader easily step through the main navigation of your site? And in the right order? 
• Headings: When stepping through page headings with the screen reader, does the sequence reflect the hierarchy of your content?
• Images: When the screen reader reads your image alt tags aloud are they accurate and descriptive?
• Buttons and Links: Does the screen reader recognize all the linked or clickable objects on the page?

These are just a few of the basic ways that you may find your website isn’t ‘screen-reader-friendly.’ For more instructions on what to look for and why check out the resources available at WebAIM.org.