Is your website screen-reader accessible?

Braille on blue background saying "Behind the Browser"

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.

blue accessibility symbol

Mac and Windows screen readers

If you use a Mac you won’t have to download or install anything because MacOS comes standard with a screen reader application called VoiceOver.

On Windows computers there are a number of different screen reader options. In this post we’ll discuss two that are free to use. Narrator, which comes installed on Windows 10, is one of those tools. NVDA, the most commonly used screen reader,  is the other. 

As a side note, JAWS is another popular screen reader for Windows but is not free.

How to Access Your Screen Reader

Voice Over Logo

Apple Voice Over

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.

Welcome to VoiceOver Dialog Screenshot

Alternatively, you can open VoiceOver via the Apple Menu in the top left corner of your screen. From there select System Preferences > Accessibility > Voice Over. Here you will find some options for controlling  the application and a link to a tutorial.

NVDA logo

Windows – NVDA

For Windows users, NVDA (which stands for “NonVisual Desktop Access”) is the go to screen reader option. To use NVDA you will first need to download and install it.

This software is a free utility but please consider making a donation to help support NV Access, the makers of NVDA.

Bookmark this A11yCast video on how to use NVDA if you’re interested in getting more in-depth instruction after reading this post.

Windows Narrator icon

Windows – Narrator

Narrator is another Windows OS screen reader utility, one that has been included with all versions of the software since Windows 2000. While Narrator has seen some major improvements in recent years, it is not as widely used as NVDA and is sometimes considered the screen reader of last resort.

To learn more about Narrator here’s a great video from the Windows Accessibility Team.

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.

And as always, thanks for reading and reach out if you have any questions or if you’re interested in doing an initial accessibility scan.

We’d be happy to help and can be reached at info@nulltenrec.com

0 comments on Is your website screen-reader accessible?