If you want to build accessible websites, you should check whether they work well together with screenreaders. A screenreader is a software application that reads the screen aloud for the user, typically used by people who are blind. NVDA is one of the most important screenreaders that work on Windows, so you should check whether your site works with NVDA. As NVDA is free, the treshold is low, but screenreaders are complex and challenging applications to start using, so I decided to make this writeup to get you going.
Installation
NVDA - NonVisual Desktop Access - is made by NV access, and you can download the installer from their website: https://www.nvaccess.org/download/
Set up
By default the voice NVDA uses to read aloud is based on English pronounciation. As I build Dutch websites, I want to use a Dutch language voice. NVDA can access the voices installed on Windows 10, so it can use the same voices as Narrator. Otherwise NVDA can use the bundler e-Speak-NG. For more information on installing additional languages see here: https://github.com/nvaccess/nvda/wiki/ExtraVoices
NVDA also has a so-called speech viewer, which is a modal that shows which text NVDA is reading aloud right now. Useless for the blind, but useful for testing purposes and getting used to screenreader usage for visual people such as us. To turn this on, you can find the option in the NVDA system tray menu, in the tools submenu.
Usage
The main input device for screenreaders is the keyboard, so most input to screenreaders goes via hotkeys, or key combinations. Like most screenreaders, NVDA has a "NVDA key" with is used by many hotkey combinations. This is what is meant with NVDA in the upcoming table. See the table for a few of the most commonly used or important hotkeys.
| Hotkey | Function | Use |
|---|---|---|
| NVDA + t | Speak title bar | know on which page you are |
| NVDA + tab | Report current focused object | know where you are on the page, which kind of element |
| NVDA + F7 | Show lists of landmarks, headings, links, ... | These lists allow a user to quickly go to their point of interest |
| Insert + down arrow or Numpad + | continue talking | similar to continue reading for a visually able user |
| Control | stop reading | Sometimes you want it to stop ;) |
| NVDA + ctrl + F | search | to search for text |
| NVDA + 1 | help | to help with NVDA usage |
For more hotkeys, see:
- https://www.nvaccess.org/files/nvdaTracAttachments/455/keycommands%20with%20laptop%20keyboard%20layout.html
- https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts
NVDA also has a built in screen curtain, which blacks out most of the screen. It is a so-called "empathy tool", so you as a visually able person can really experience the website a bit more like a blind person would. This is important to try some time, to really get a feel of how muuch - or actually how few - information and overview you get when you cannot see your website but only rely on the screenreader.
RealTM screenreader usage
now that we know a little bit on how to actually do something - anything - with a screenreader, it is useful to know what screenreaders actually do with this in the Real WorldTM. To that end I can recommend the following videos:
- Léonie Watson: how a screen reader uses the web https://www.youtube.com/watch?v=OUDV1gqs9GA
- Screen Reader Basics: NVDA (hear the old voice...) https://www.youtube.com/watch?v=Jao3s_CwdRU part of a11ycasts playlist https://www.youtube.com/watch?v=HtTyRajRuyY&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g
- (added 20/5) Deque has made a video on the same subject as this post! quite recommend it: https://www.youtube.com/watch?v=Vx1vSd5uYS8
Top comments (0)