Accessibility Developer Guide: Setup and use a blind user's environment
Tags: a11y, webdev, testing, screenreaders
Published: 2019-06-23 00:24:09

---
title: Accessibility Developer Guide: Setup and use a blind user's environment
published: true
description: How to setup and work with a screen reader
tags: a11y, webdev, testing, screenreaders
---

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](https://www.accessibility-developer-guide.com/) created by the [Access4all](https://www.access-for-all.ch/en/accessibility.html) 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](https://www.virtualbox.org/) with [Windows](https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/)
- [NVDA screen reader](https://www.nvaccess.org/)
- [karabiner-elements](https://pqrs.org/osx/karabiner/) (Mac Users)
- [Firefox ESR](https://www.mozilla.org/en-US/firefox/organizations/all/)
- [Chrome](https://www.google.com/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](https://pqrs.org/osx/karabiner/)
- 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](https://www.virtualbox.org/wiki/Downloads) *(or use your already existing virtual machine software)*
- Download & setup [Windows from Modern.IE](https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/)

## 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](https://www.nvaccess.org/download/)

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](https://www.mozilla.org/en-US/firefox/organizations/all/)
- Download & install [Chrome](https://www.google.com/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](#focus-and-browse-mode) below).

- Download & install [Focus Highlight](https://addons.nvda-project.org/addons/focusHighlight.en.html)

Border | Description
--- | ---
green & thin (dashed) | indicates the navigator object
red & thin | indicates the focused object/control
red & thick | indicates when navigator object and focused object are overlapping
blue & thick (dashed) | indicates NVDA is in focus mode, i.e. key types are passed to the control

**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 name="focus-and-browse-mode"></a>

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](#browse-mode-shorcuts) 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 <a name="browse-mode-shorcuts"></a>

```
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](http://www.chromevox.com/) - browser extension for Chrome used as screen reader for chromebooks
- [WAVE](https://wave.webaim.org/extension/) - accessibility audits, as browser extension for Chrome and Firefox
- [A11y](https://developers.google.com/web/tools/lighthouse/) - accessibility audits, as npm module / cli (also integrated in Chrome Dev Tools)
- [Pa11y](http://pa11y.org/) - accessibility audits, as npm module / cli, webservice, dashboard, etc.

# Further Links:

- [Accessibility Developer Guide](https://www.accessibility-developer-guide.com/)
- [NVDA User Guide](https://www.nvaccess.org/files/nvda/documentation/userGuide.html)
- [WebAIM Survey about Screenreaders](https://webaim.org/projects/screenreadersurvey7/
)