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.
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
Option ⌥ or
Shift ⇧) like this:
- Download, install and run karabiner-elements
Add itemand choose a desired
From keyand set
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
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).
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
- Check option
Show Speech Viewer on Startup(always see what has been announced by the screen reader)
- Check option
- Open the settings window by choosing
General-> select the
Windows OneCore voicesand press
OK. Then select the
Voiceyou like most.
Speak typed characters(prevents announcing characters while typing)
Enable mouse tracking(prevents announcing the objects below the mouse)
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
|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.
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
The following is an overview of most shortcuts for the NVDA screen reader.
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.
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
Esc Switch to browse/read mode (sound is played) Space Toggle checkboxes / radios or expand / collapse comboboxes Enter Activate Links / submit forms
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.