The awareness for accessibility in website development gladly seems to have increased a lot in the past few years. A great resource for how to build and test accessible websites and widgets is the Accessibility Developer Guide created by the Access4all foundation and its partner agencies. Check it out if you haven't done it yet!

In this article I want to get you started on how to setup an environment to test your websites from a blind user's perspective with a screen reader.

Setup Environment

Used software:

• VirtualBox with Windows
• NVDA screen reader
• karabiner-elements (Mac Users)
• Firefox ESR
• Chrome

Create Insert Key

When using a screen reader, you sometimes need a modifier key for special key combinations. Caps Lock and Insert are offered but Caps Lock doesn't seem to work with VirtualBox.

For Mac Users: There is no native Insert key on a MacBook, but you can remap an unused key as Insert (e.g. right Command ⌘, Option ⌥ or Shift ⇧) like this:

• Download, install and run karabiner-elements
• Press Simple Modifications -> Add item and choose a desired From key and set To key to Insert

Install Virtual Machine

To install the screen reader software a Windows OS is required. It makes sense to install it as a virtual machine to prevent polluting your system and have a ready environment for testing. Microsoft gives away a free 90 days Windows trial for browser testing that you can use. I went for the MSEdge on Win10, since IE11 is also installed along with Edge and therefore also useful for normal cross browser testing, especially on a Mac.

• Download & install VirtualBox (or use your already existing virtual machine software)
• Download & setup Windows from Modern.IE

Install Screen Reader & Browsers

The two most commonly used screen readers are JAWS (66%) and NVDA (64.9%). As you see, screen reader users tend to use more than just one screen reader. Since NVDA is free to use, we will use that one.

• Download & install NVDA

A screen reader software just lays on top of a normal browser and users can decide which browser they want to use. Hence you should also install other popular browsers besides IE. Usually JAWS is used with IE (24.7%) and NVDA is used with Firefox (23.6%). For Firefox you need to install a special extended support release (ESR).

• Download & install Firefox ESR
• Download & install Chrome

Configure NVDA

You should primarily go with the default configuration, but there are some options that are helpful with testing. If NVDA is running, press Insert + N to open the NVDA menu.

• Open speech viewer by choosing Tools -> Speech viewer
  • Check option Show Speech Viewer on Startup (always see what has been announced by the screen reader)
• Open the settings window by choosing Preferences -> Settings...
  • Choose General -> select the Language you want
  • Choose Speech -> Synthesizer -> Press Change... -> select Windows OneCore voices and press OK. Then select the Voice you like most.
  • Choose Keyboard -> Uncheck Speak typed characters (prevents announcing characters while typing)
  • Choose Mouse -> Uncheck Enable mouse tracking (prevents announcing the objects below the mouse)
  • Choose Browse Mode -> Uncheck Automatic Say All on page load (prevents starting to read the whole document on page load)

Additionally you should also install the Focus Highlight plugin. It shows you the current position of the navigator and focused object (see Focus and Browse Mode below).

• Download & install Focus Highlight

Important: After installing/configuring the screen reader and browsers you should take a snapshot from the system to be able to restore it after Windows has expired.

Usage of Screen Reader

Focus and Browse Mode

A screen reader essentially has two modes, browse and focus mode. When reading a page, blind users use browse mode by using Down/Up arrow keys to sequentially read line by line. It moves the navigator object. Other shortcuts are used to move it to certain elements of the website like headings or links (see Browse/Read Mode Shortcuts below).

If you want to interact with elements, like entering text into an input field, you have to enter focus mode. You can switch to it by pressing the Enter key when the navigator object is over the element or by using the Tab key to focus the next interactive element. In focus mode, the screen reader also tries to find and announce associated information (e.g. from a label or aria-describedby). You can go back to browse mode with ESC.

Keyboard Shortcuts

The following is an overview of most shortcuts for the NVDA screen reader.

General

Tab
Jump to next focusable element and activates focus mode where appropriate.

Ctrl
Abort announcing current stream of words

Ctrl + Home
Jump to beginning of the page

Ctrl + Alt + N
Start/Restart NVDA

Insert + N
Open NVDA menu

Insert + S
Toggle speech mode (on, off or beep mode)

Insert + F7
Shows the elements list.

Browse/Read Mode

Down / Up Arrow
Read content sequentially line by line

Ctrl + Down / Up Arrow
Read paragraph by paragraph (or any other kind of container)

Left / Right Arrow
Read next / previous character

Enter
Switch to focus mode if available (sound is played)

H
Move to next heading

1-6
Jump to next headings on specific level

K
Move no next link

V / U
Jump to visited / unvisited links

L / I
Jump to lists / list item

G
Jump to images

T / Ctrl + Alt + Left/Right/Up/Down
Jump to tables / navigate through

F
Jump to forms

B
Jump to buttons

D
Jump to landmarks

Focus/Interaction Mode

Esc
Switch to browse/read mode (sound is played)

Space
Toggle checkboxes / radios or expand / collapse comboboxes

Enter
Activate Links / submit forms

Alternative Tools

You may don't have the possibility to install a virtual machine on your computer. There are some alternative tools you can use to ensure accessibility to some extent. But be aware that the majority of blind users use NVDA or JAWS and they might behave differently.

• Chrome Vox - browser extension for Chrome used as screen reader for chromebooks
• WAVE - accessibility audits, as browser extension for Chrome and Firefox
• A11y - accessibility audits, as npm module / cli (also integrated in Chrome Dev Tools)
• Pa11y - accessibility audits, as npm module / cli, webservice, dashboard, etc.

Further Links:

• Accessibility Developer Guide
• NVDA User Guide
• WebAIM Survey about Screenreaders