This tutorial will:
TURN YOUR VOLUME DOWN BEFORE INSTALLING
Ways to download:
winget install nvda
choco install nvda
This is a regular installation process. Just keep clicking Next.
PRESS AND HOLD
LEFT CTRL TO STOP THE SPEECH
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
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.
You’ll need to open NVDA settings. Right click the purple N icon in your taskbar tray.
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.
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:
By default, if you type any letter, NVDA will speak out that letter. You may prefer to not hear keypresses.
I prefer the speech volume to be a background voice.
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 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.
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 “ń”.
Browser devtools can be quickly toggled using F12. To quickly toggle the screen reader you can:
CTRL+ALT+Nto enable NVDA, and
INSERT+Sto disable speech. There are 3 modes - speech, sound and silent. Press
INSERT+Qseveral times to toggle. NVDA will still work in the background.
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.