Blog - Artur Tagisow
11 Feb 2021

How to set up a screen reader for web development

I never could find any tutorial that explains how to install a screen reader, how to use it as a web developer and how to configure its useful features for - again - web development. For a year, I worked on the eUrząd Skarbowy, which is Poland’s official government website that aims to digitize and simplify the usual government paperwork such as paying all kinds of taxes, submitting requests or sending statements. From an accessibility perspective, it’s a big deal.

This blog posts describes how to more or less end up with the screen reader setup used for accessibility-centric web development during that time. It was used by me and my < 10 (less than all, minimum 4, can’t count the word-of-mouth :P) coworkers that I shared this blog post with. This post served as something I could send a new coworker instead of manually explaining the same thing N times to different people.

This tutorial will:

1. Download & installation

TURN YOUR VOLUME DOWN BEFORE INSTALLING

Ways to download:

  • standard Windows .exe installer (simplest):
    NVDA 2020.3
    or visit NVDA’s download page to download the absolutely latest version
  • or use winget (Windows package manager):
    winget install nvda
  • or use chocolatey:
    choco install nvda

This is a regular installation process. Just keep clicking Next.

2. First steps after installation

PRESS AND HOLD LEFT CTRL TO STOP THE SPEECH
PRESS INSERT+Q TO QUIT

NVDA will automatically launch after setup finishes. It’ll loudly describe elements you hover with the mouse. I’ll tell you how to disable this mouse behavior later.

For now, go to this screen reader playground and press the TAB key a few times.

Internet Explorer is not supported by NVDA, by the way.

NVDA will read out elements you select with TAB - what it says depends on HTML & attributes of whatever you selected.
For example, if a HTML <div> tag has:

  • a role=“button” attribute, NVDA will say “push button”,
  • an aria-sort=“ascending” attribute, it’ll say “sorted ascending”

and so on.

If you’re curious “What’ll NVDA say after adding this ARIA attribute here?” this’d be a good time to create a index.html file, edit it with Notepad, open it in browser and see for yourself.

3. Disabling features you may not need

You’ll need to open NVDA settings. Right click the purple N icon in your taskbar tray.
0screader_opening_settings_at_all.jpg

3.1. Silencing whatever NVDA is saying right now

Press CTRL (or hold to always silence). It will cut off and silence whatever NVDA is saying at the moment. This works for the CURRENT sentence. If you focus some other element, NVDA will start reading again, unless you’re holding CTRL.

3.2. Disable speaking out element under cursor

When you hover an element, NVDA will describe it - even outside the browser window (eg. when you’re responding to a coworker on Slack). You may prefer screen reader features to be available only through the keyboard.
To disable mouse speaking - uncheck the checkbox highlighted below:
1screader_disable_mousespeak.jpg

3.3. Disable speaking out keypresses

By default, if you type any letter, NVDA will speak out that letter. You may prefer to not hear keypresses.
2screader_disable_speaking_ut_keypresses.jpg

3.4. Lower speech volume

I prefer the speech volume to be a background voice.
voice_volume.jpg

3.5. Enable focus highlight

Highlighting the element NVDA is currently reading with a blue border can make things easier. To enable showing the border you can see in the two above screenshots, check the checkbox highlighted below:
3cursor_highlighting.jpg

3.6. Making NVDA speak in another language

NVDA can speak eg aria-sort=“ascending” as “Sorted ascending” or “Posortowane rosnąco” (Polish equivalent). You’ll need to change the NVDA language - this will also change the UI language, so the above screenshots will be more difficult to follow.

Learned this one when the WCAG auditor on the customer’s side submitted a report that something is read out wrong by a screen reader in Polish, where I was using English for development, so I had to switch.

making_nvda_speak_another_language.jpg

3.7. Default “Launch NVDA” shortcut conflicting with accented characters

The CTRL+ALT+N shortcut can be customized. If you’re using a Polish keyboard layout and press CTRL+ALT+N, you won’t be able to write the letter “ń”. So depending on your keyboard layout, you may want to change it.
1of2screader_change_shortcut.jpg 2of2screader_change_shortcut.jpg

4. Extra tips

4.1. Opening/closing NVDA like browser devtools

Browser devtools can be quickly toggled using F12. To quickly toggle the screen reader you can:

  • Use CTRL+ALT+N to enable NVDA, and INSERT+Q to quit
  • Press INSERT+Sto disable speech. There are 3 modes - speech, sound and silent. Press INSERT+Q several times to toggle. NVDA will still work in the background.

4.2. Windows Narrator

You may think a working screen reader is built into Windows. It’s not. Windows Narrator works only with Windows UI. It’s useless for webdev.