Testing your website
or application with the NVDA screen reader
What is a screen reader?
A "screen reader" is the generic term for a
program that helps blind people use a computer. Simply put, a
screen reader will "read" (speak) the content of a page to the
blind user.
Where do you go to download the
free NVDA screen reader?
You will need to go to the following website www.nvaccess.org
Note to developers
NVDA is a fully functional screen reader. It does
not time out. NVDA will only work on Window based computers
(starting from Windows 7 - up to Windows 10). For more information
on which Windows operating systems NVDA works with, please see the
section called system requirements in the user manual.
You will not have to pay a subscription to be able to test your
website or application. However, NVACCESS will ask for a donation
(to keep this project going and free for everyone). Please donate
(if you can) no matter how small the amount might be, as it all
counts.
Note from Quentin Christensen
(NVACCESS developer) regarding making software accessible
There are two parts to making software accessible
to screen reader users. One is being able to get around with the
keyboard, and the other is having the right information reported.
For keyboard navigation, it is important to have controls in a
logical order. At its simplest, this might be when a user moves
around with TAB or the ARROWS. Where useful, controls should have
keyboard shortcuts or accelerator keys. For instance, consider
video call software. It is much more efficient having a shortcut
key to answer a call than needing to tab 20 times to get to the
answer button.
Most screen reader users don’t use the mouse. Anything which ONLY
works with mouse is going to be problematic. A lot of standard
controls already work fine with both keyboard and mouse. You can
press TAB to move a standard button and press ENTER to activate
it. If a shortcut key has been defined, you can press that to
activate the button from anywhere on that screen. Many controls
have a letter underlined to show that you can press alt and that
letter. In a save dialog, for instance, the “Save” button has the
“S” underlined. With such a dialog open, you can press alt+s to
activate that save button.
With controls such as buttons and edit boxes, it is best to use an
existing standard control than create a new one. Pre-defined
controls have things like labels, tab control and screen reader
accessibility built-in. If you make a new thing you want to act
like a button, you can make it accessible, it just tends to be
more work. The same is true for combo boxes, edit boxes,
checkboxes and so on.
A control with an attached text label, such as a standard
checkbox, tells a screen reader all about itself. When creating a
custom check box, a lot of this information may need to be setup
by hand. This includes what it is (a checkbox), what it is for
(the text in the label) and its state (checked or unchecked). Most
environments offer properties for controls, such as a “label”,
“name” or “description”. Ensure this field is descriptive will
make it usable for screen reader users.
NVDA is free for anyone to use. We are quite happy for developers
to download it and test it with their programs. Try to navigate
your app and use the features of it with the keyboard. NVDA should
read enough to tell you where you are at any point. NVDA’s tools
menu has a “Speech Viewer” which displays in text what NVDA reads
aloud. This can be very useful for anyone unfamiliar with
Text-To-Speech (TTS) voices.
NVDA will work on desktop applications as well as supported
browsers.
You will need to go to the following website at http://www.nvaccess.org then
locate the downloads page. Here, you will find the latest version
of the NVDA screen reader.
After it has been downloaded to your computer, locate the file and
click on it, and the welcome dialogue will come up. It will give
you the option to set the keyboard layout, use the caps lock key
as a modifier key or have NVDA start when the computer does. A
musical sound will be heard. You will see in front of you
documentation that can be read and agreed to. You will then be
given 3 options: one to install NVDA to your computer, the second
to make a portable copy and the third to run a temporary copy of
NVDA without installing it to your computer. Choose the first
option and follow the directions to install it to your computer.
If a UAC screen comes up, just use the Alt key + Y to say yes to
it so it can be installed to the computer.
Keys to start, exit and also go
into the settings of NVDA
To start your copy of NVDA (if it is not running)
use the Alt key + Ctrl key + the letter N.
To go into the settings of NVDA, use the NVDA key + the letter N.
When the preferences menu comes up, arrow or click on the settings
menu to open it. Here you can make changes like speeding up or
slowing down how fast NVDA speaks etcetera.
Under the HELP section is where you will find the user guide.
To turn off NVDA, use the NVDA key + the letter Q. Either tab or
click on the ok button to close it. You might have noticed
(depending upon which option is shown) that the default is set to
exit NVDA.
NVDA modifier keys
Where I refer to the NVDA key, this is a modifier
key which can either be the Caps Lock key, the Insert key or the
extended Insert key. You would use one of these (whichever one you
choose) to close NVDA (for example the Insert key + the letter Q).
The modifier keys can be found under the keyboard section of NVDA.
You can have more than one.
Some keys you will use
Depending if you are testing NVDA (either on a
desktop program or on the web) the keys used will be keyboard
based.
In most cases on the desktop, you will use the Enter key to go
into a program, the Tab key sometimes to jump into a section and
the Shift/Tab key to jump back out of it (including forms on the
internet); the left, right, up and down arrow keys (not on
the numeric keypad) to navigate the desktop and menus; the Alt key
to bring up a file menu; and the Alt key + F4 to close a program
or page. The NVDA key + Tab key is used to speak what it is
focused on at that time.
The following sections in the user guide might help you. Namely:
Objects, Navigating with the system focus and Navigating with the
system caret along with the focus highlighter feature in NVDA (to
know where you are on the desktop or web page).
Focus highlighter in NVDA
If you are a sighted developer or trainer and you
want to see what NVDA is talking at that time you can turn on the
focus highlighter in NVDA. To turn it on, you will need to have
NVDA running, then press the NVDA key + the letter N. When the
preferences menu comes up, locate the settings menu with either
the arrow keys or a mouse. If using the arrow keys, press the
Enter key on the settings menu. Here you will see different
sections come up. Locate the vision section of NVDA in most cases
you would use your arrow keys or a sighted person would click on
it.
If using the arrow keys after you have found the vision section,
just use the Tab key. You will be given different options such as
Enable highlighting, Highlight system focus, Highlight navigator
object and Highlight browse mode cursor. You will need to check
the box on the option you wish to use.
To find out more about what they do when checked or unchecked,
please read the user guide under the help section of NVDA. You
will need to locate the vision and the Focus highlight section in
the user guide where you can find out more about what they do.
This could be while on a website or on the desktop.
Turning off NVDA to stop it from
speaking what it is focused on
If you are a sighted developer and do not want to
hear NVDA speak what it is doing you can turn off the speech
within NVDA. Press the NVDA key + the letter S and toggle it until
you hear NVDA say speech mode off. The other alternative is just
to mute the speaker in Windows or just turn them off.
If you want to hear NVDA speak again, just repeat the process
until you hear NVDA say speech mode talk.
Speech Viewer
For sighted software developers or people
demonstrating NVDA to sighted audiences, a floating window is
available that allows you to view all the text that NVDA is
currently speaking.
To enable the speech viewer, check the "Speech Viewer" menu item
under Tools in the NVDA menu. Uncheck the menu item to disable it.
The speech viewer can be resized and moved around on your screen.
To find out more about the speech viewer please see the section
called speech viewer in the user guide.
Testing your website with NVDA
Hearing the difference between
browse mode and focus mode with NVDA
When you go to test your web page with NVDA, you
can hear one of either 2 different sounds. One sound will be when
it goes to browse mode and the other to focus mode. If you want to
hear it spoken use the NVDA key +Ctrl key + the letter B. When the
browse mode settings dialogue comes up, locate the section called
Audio indication of focus and browse modes and uncheck that box,
then apply and ok the changes. Now, you should hear NVDA say
browse mode (where the quick navigation keys can be used to
navigate a web page quickly in browse mode and focus mode, where
you can type into an editable area).
You can force NVDA to change between these 2 modes. Use the NVDA
key + Spacebar to do this.
There are different keys that are used on a web page to quickly
navigate a web site in browse mode. These are known as single
letter navigation keys, which can be found in the NVDA user guide.
Some people will refer to these as quick navigation keys on a web
page that NVDA can use.
.
Visually impaired and blind people do not use a mouse on a
website, so in that case the only option is using a keyboard. NVDA
has quick navigation keys that you can use to navigate a website.
You should be able to use any supported browser that NVDA can use
(for example Google Chrome, the new Microsoft Edge, Firefox and
many other chromium based browsers). You must be in browse mode to
do this using the quick navigation keys.
Depending how you are going to test your webpage, locate the page
you want to test and make sure NVDA is focused inside of that
page. You can use the Ctrl key + Home key to go to the top of the
page.
You need to be in browse mode to use the quick navigation keys in
NVDA. If the content is marked up correctly, you should hear or
see what NVDA is speaking.
There are many quick navigation keys that NVDA can use on a
website, but the most common ones used are H for headings, B for
buttons, L for lists, I for list items, T for tables, F for form
fields, E for editable fields, C for combo boxes, R for radio
buttons, D for landmarks, G for graphics, and K for links.
Make sure your links, graphics etcetera have Alt text as well, so
that the screen reader knows what it is (for example a graphic
with no Alt text associated with it will only say graphic).
Instead, putting the Alt text into the graphic, means that the
screen reader could say what it is (for example logo of NVACCESS).
Pressing one of those letters while in browse mode on a web page,
will take you down by say H for headings (down the page) while
adding a Shift key with that same letter H will take you back up
the page by headings.
For a complete list of quick navigation keys that can be used with
NVDA while on a webpage, please see the section called Single
Letter Navigation in the user guide.
Using the say all command to read a
webpage
You might want to hear your webpage read out by
NVDA. While in browse mode, you can use the following keys. The
first option is for a desktop user and the second for a laptop
user.
Say all commands can also be used on a document.
NVDA + down Arrow
Say all
NVDA + A
Starts reading from the current position of the system caret,
moving it along as it goes.
Press the Ctrl key to stop NVDA from talking if you want to hear
what it is saying. Repeat the say all command for NVDA to start
speaking again.
If you wish to adjust the speech rate that NVDA is talking at, you
can do the following. Press the Ctrl key + NVDA key + down or up
arrow key. The default shortcut is set to the rate slider. Using
the up arrow key will increase the speed at which it is talking,
and the down arrow key will decrease the speed at which it is
talking. They must all be done at the same time while tapping the
arrow key.
The following webpage by Web Aim called WebAIM: Using NVDA to
Evaluate Web Accessibility may help you to use NVDA on a webpage
and go more into depth on other ways you can improve your web site
for screen reader users. The link to this page is https://webaim.org/articles/nvda/