Blog» Building an accessible website: The screen reader experience

Building an accessible website: The screen reader experience

By Dave Fearnley  | April 28, 2017  |  Web accessibility

Auditing and developing accessible websites will require you to become familiar with what is referred to as a “screen reader”.

These are software tools used primarily by people with severe vision impairment. The screen reader software interacts with the HTML on the page to give audio feedback to the user. The structure of the HTML has a direct impact on the way the screen reader interprets the content on your site. Screen readers can also be helpful for those with good vision, but with cognitive or literacy issues.

There are various options for screen reader software and browser combinations depending on your operating system. In this post, we will concentrate on what are currently the most popular and useful combinations of Firefox + NVDA on Windows and Safari + VoiceOver on macOS.

On Windows you can download and install the latest version of Firefox and the latest version of NVDA. For now, that is all you will have to do to get up and running. NVDA can be controlled strictly using the keyboard through the use of shortcuts and the NVDA command key. The command key is reserved by the application to invoke NVDA commands. For example, to hear the title of the page, hold the ‘Insert’ key (which is the default NVDA command key) and press ‘t’. The command key can be changed to the ‘Caps Lock’ key in the NVDA keyboard settings.

NVDA keyboard settings dialogue

The voice can be customized as well. You might want to slow the voice down, change the voice gender and even the pitch:

NVDA voice settings dialogue

On a Mac there is no need to download or install any programs because Mac has included the screen reader VoiceOver with the operating system. VoiceOver works best with Safari, the default Mac browser. Although Safari comes pre-installed, you need to make sure it is set up for optimum accessibility. Launch Safari and navigate to the Preferences > Advanced settings panel:

Safari advanced settings panel

In the Accessibility section, make sure that the box next to “Press Tab to highlight each item on a webpage” is checked. Otherwise, there will not be sufficient visual feedback as to which element holds focus and some important elements will be missed altogether while tabbing through the document. The keyboard and especially the Tab key will be your primary method of navigation. More on this later.

You can access the VoiceOver settings in the macOS System Preferences > Accessibility > VoiceOver applet:

Mac accessibility preferences panel

Note the command to “Toggle VoiceOver”. This will come in handy when you want to quickly turn VoiceOver on and off. To delve deeper into the VoiceOver settings, you can click “Open VoiceOver Utility”.

Mac VoiceOver utility dialogue

Note the “Keys to use as the VoiceOver modifier” section indicates which keys access the VoiceOver shortcuts while browsing web pages. These are the default settings - either ‘Control + Option’ or ‘Caps Lock’. You can see how this works by typing Caps Lock+Command+F10 which will toggle the VoiceOver caption on and off. The left menu provides access to all of the settings with which you can customize the behaviour of VoiceOver. For example, the ‘Speech’ applet will help you tailor how VoiceOver sounds:

Mac VoiceOver utility speech settings

Once you have your screen reader set up, it’s time to start browsing! To get a true screen reader experience, it is best to put aside the mouse. If you have to reach for the mouse in any scenario, it is a direct indication that the web page you are viewing is failing the Web Content Accessibility Guidelines in some way. Eliminating the mouse will enable you to immerse yourself in the use of the keyboard and discover the content you are viewing as it is presented to users with severe vision impairment.

Using the keyboard, you can take a few different approaches to accessing the content:

  1. Stepping through every bit of the content
    • When a web page is loaded, the screen will start to read the content in its entirety. You can sit back, relax, and listen, or you can use the arrow keys to navigate through the page at your own pace. Arrowing down or up will trace through every element in the HTML and read any content therein.
  2. Tabbing through the content
    • Think about how you browse the web as someone who is sighted. You may like to scan the page for highlighted items, links, or other points of interest. Similarly, the keyboard and screen reader user can skim through the document using the Tab key. This will stop at any link, input fields on a form, button elements, and any other element that has its “tabindex” attribute set.
  3. Picking from a list of landmark elements on the page
    • The screen reader provides a shortcut (NVDA: NVDA Command Key + F7, VoiceOver: Caps Lock + ‘i’) that will list all of the key elements on the page. You can pull up this list and quickly see a synopsis of the interactive elements on the page. Just select the desired item and press Enter to navigate to that item.

Experiencing your website using a screen reader is of paramount importance in evaluating web pages for accessibility. As the saying goes: “You can't understand someone until you've walked a mile in their shoes.”

Once you've familiarized yourself with screen readers, they will be an essential tool to assess specific accessibility issues including but not limited to forms, image alt tags, and in-page navigation.

Ready to make your website accessible? Sign up to receive a copy of our website accessibility guide or contact us  anytime for a free consultation.


Related Blog Posts

Building an accessible website: in-page navigation

A key component of an accessible website, accessible in-page navigation provides a way for website visitors to jump straight into the main content on...

Read more »

Why web accessibility is more art than science

Ensuring your website is accessible to all members of your target audience can add unique requirements that demand novel solutions from your development...

Read more »

Building an accessible website: Links

Links are the pathways that bind the web and give it structure. For people with web accessibility challenges, perceiving and understanding the links on...

Read more »

Building an accessible website: Contrast

Insufficient contrasting text elements on your website will limit your audience by preventing users who have difficulty distinguishing colours from comfortably...

Read more »

Building an accessible website: How to create accessible forms

Forms are an integral part of many websites but they pose unique challenges for accessible websites.

Read more »

Building an accessible website: Writing accessible alt tags for images

Creating alt tags that conform to Web Content Accessibility Guidelines (WCAG) ensures all of your readers can have access to your website's images. Here's...

Read more »

5 ways your CMS makes a web accessibility implementation easier

Making your website accessible to people with disabilities - whether you’re launching a brand new site, or remediating an existing one - may seem complex...

Read more »

Understanding your web accessibility audience

Before you embark on a project to make your website accessible to people with disabilities, it’s critical to understand what such a large and varied...

Read more »

Why an accessible website benefits your business

Ensuring your website is accessible to people with visual, auditory, speech, cognitive, and neurological disabilities -- including all of its text, images,...

Read more »

Comments

blog comments powered by Disqus

Hi, we're Mugo Web - Nice to meet you!

We're a group of web experts who solve complex web problems.

Learn more about us »

Search


Categories


Yes - we can do that.

We can do that

Many years of experience with complex websites allows us to offer total solutions.

Learn more about what we can do »

We love our clients (and they love us too)

Collage of logos : American express, Habitat, Car and Driver, Rasmussen, and American museum of Natural History

We've solved problems across North America and around the world.

Learn more about what we've done »

We tweet too

Follow us on Twitter for the latest Mugo happenings

mugo twitter page @mugo

© 2008 - 2017 Mugo Web. All rights reserved.