Blog author's portrait
Artur Tagisow
Vue dev from Eastern Poland

Set up a screen reader for web development

2021-02-11 12:00:00

This tutorial will:

1. Download & installation

TURN YOUR VOLUME DOWN BEFORE INSTALLING

Ways to download:

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 tag has: * an 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.

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.

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:
NVDA settings open on category "Mouse", with the checkbox labelled "Enable mouse tracking" highlighted

Disable speaking out keypresses

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

NVDA settings open on category "Keyboard", with the checkbox labelled "Speak typed characters" highlighted

Lower speech volume

I prefer the speech volume to be a background voice.
NVDA settings open on category "Speech". The range slider labelled "Volume" is highlighted

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:
NVDA settings open on category "Vision", with the checkbox labelled "Enable highlighting" highlighted

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.
NVDA settings open on category "General". The dropdown labelled "NVDA Language (requires restart)" is open showing all the languages available in NVDA

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 “ń”.
The context menu that shows up after right clicking the NVDA icon on the desktop. My mouse cursor is hovering over the Propeties option in the context menu

The Properties window for the NVDA desktop shortcut. The active tab is labelled "Shortcut". The input box labelled "Shortcut key" is highlighted in red

4. Extra tips

Opening/closing NVDA like browser devtools

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

Misc

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.