Using NVDA to Evaluate Web Accessibility
This article is designed to help users who are new to NonVisual Desktop Access (NVDA) learn the basic controls for testing web content, and to serve as a reference for the occasional NVDA user. NonVisual Desktop Access (NVDA) is a free and open source screen reader for the Microsoft Windows operating system. It supports over 20 languages and can run on any computer entirely from a USB drive with no installation.
It is important to evaluate the accessibility of web content with a screen reader, but screen readers can be very complicated programs for the occasional user, so many people avoid them. This doesn't need to be the case. While screen readers are complicated, it is possible to test web content for accessibility without being a "power user."
While reading this article, keep a few things in mind:
- This article does not contain a comprehensive list of NVDA shortcuts. It does provide a list of the essential commands that new or novice NVDA users should know. For a more comprehensive list of NVDA keyboard shortcuts, see our list of NVDA keyboard shortcuts. The NVDA User Guides are available to provide further documentation.
- If you are new to screen readers, plan on spending more time (perhaps several hours) on this page and the example pages becoming more comfortable using NVDA. Don't get discouraged if things still seem confusing after only a few minutes. Slow down the reading speed and take your time.
- It is usually easier to work with NVDA on a full keyboard. There is a different keyboard configuration available if you prefer to use a laptop keyboard, but it is not addressed in this article.
NVDA is open-source software. You can download NVDA for free (Windows only). Since NVDA is a relatively new project, some of its capabilities are still basic. Once you have NVDA downloaded and installed, you can start running the program by holding Ctrl + Alt + N.
The NVDA key is either the Insert key (by default) or can be set to be the Caps lock key. The start-up dialog box has a check-box option to set the Caps lock key as the NVDA key. If you want to change your NVDA key preference later, press Ctrl + NVDA + K.
While working in NVDA, keep the following guidelines in mind:
- While NVDA has early support for accessing Windows and many Windows applications, we will be focusing on accessing web content only.
- Make sure that NumLock is off.
- You will probably want to test NVDA in Mozilla Firefox, even if it is not your primary browser.
- Remember that screen reader users typically do not use a mouse. As you become more comfortable with NVDA, try using only the keyboard.
- Most browser shortcut keys will work when using NVDA.
- The page may not scroll while you read, so you may hear content being read by NVDA that isn't visible on the screen.
There are dozens of keyboard shortcuts that allow you to read content by line, sentence, word, character, etc. The following is a list of essential reading shortcuts. With these shortcuts, you should be able to navigate through most content.
- Numpad +: Start reading at the top of the page
- NVDA + ↓: Start reading at the current position
- Ctrl: Stop Reading
- NVDA + ↑ or Numpad 8: Current line
- Ctrl + ←/→ or Numpad 4/Numpad 6: Previous/next word
- ↑ or Numpad 7: Prior line
- ↓ or Numpad 9: Next line
- ←/→ or Numpad 1/Numpad 3: Previous/Next character
- F5/Ctrl + F5: Page refresh / Hard page refresh. If you get lost, this is how you can start over.
- NVDA + Ctrl + ↑/↓: Rate of speech increase/decrease
You may want to practice reading through the content on this page with a NVDA right now. Keep in mind that there is a link at the top of this page to skip to the main content.
Every image on a page needs alternative text. If an image does not have alt text, a screen reader will typically ignore it, but the behavior may vary depending on its function.
There are two main uses for tables on the web: for layout and to organize data. In NVDA, to navigate to the next table, press the T key. To navigate between cells, hold down Ctrl + Alt and use ↑/↓/←/→ to move from cell to cell.
Forms are used to interact on the web. The
<label> element is used to explicitly associate form controls and their descriptions. NVDA will read the label of a form element when that form element is navigated to. If a form control does not have an associated label, NVDA will not identify the purpose of that form element. The
<fieldset> element is used to group related form elements. This it typically used to provide details about groups of checkboxes and radio buttons. NVDA typically reads the fieldset legend.
Use the following shortcuts to navigate through and interact with forms:
- When you access a form element, NVDA enters forms or focus mode. In focus mode you can type text without activating Quick Keys and other keyboard shortcuts. You can press Enter or NVDA + space to enter focus mode.
- Press NVDA + space to exit focus mode and return to browse mode.
- Once you are in focus/forms mode, use Tab and Shift + Tab to navigate through the form controls.
- Use Spacebar to select and deselect checkboxes.
- Use ↑/↓to select from a group of radio buttons.
- Use↑/↓ or the first letter to select an element in combo boxes.
- NVDA automatically leaves forms mode when you press Enter to submit the form, navigate to a new page, or select a button.
- Review these pages, section by section. At the end of each section, return to the top and navigate to new sections in different ways. For example:
- Use the Table of Contents
- Use Ctrl + F to open the Find dialog
- Navigate by headings (either H or 1 - 3)
- There are a couple of elements in this page that are visually hidden, but which are provided to better orient screen reader users. See if you can identify them (hint: one is right before the main content section and the other is right after).
- Subscribe to the WebAIM Newsletter without using your mouse.
- Turn off the monitor and repeat some of these tasks.