Using NVDA to Evaluate Web Accessibility

Introduction

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.

Getting Started

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.

Note
  • The NVDA key is set to the Insert key by default, but it can be changed to the Caps lock key when installing NVDA for the first time. If you want to change your NVDA key preference later, press Ctrl + NVDA + K.
  • To close NVDA, press NVDA + Q.

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.

Reading

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.

Images

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.

Image examples and practice

Data Tables

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.

Table examples and practice

Forms

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 is typically used to provide details about groups of checkboxes and radio buttons. NVDA typically reads the fieldset legend.

Forms Mode

Since screen readers use many of the keys on the keyboard for quick navigation, trying to enter text in a form field presents an interesting problem. For example, trying to type the letter "h" in browse mode with NVDA would take you out of the form field and navigate to the next heading on the page. Luckily, screen readers have a built-in fix for this issue: Forms mode. In forms mode, most standard screen reader quick keys are deactivated, so that you can fill out forms without accidentally triggering a quick key.

Forms mode is activated automatically in NVDA when you navigate to a form control, such as a text field or radio button, with the Tab key. It automatically deactivates when you navigate out of the form, press Enter to submit the form, or select a button. You'll hear one sound, like a chime, when forms mode activates, and a slightly different sound when it deactivates.

Use the following shortcuts to navigate through and interact with forms:

  • Press Enter (while focused on a form control) or NVDA + Space to enter forms mode.
  • Press NVDA + Space to exit forms mode and return to browse mode.
  • Once you are in forms mode, use Tab and Shift + Tab to navigate through the form controls.
  • Use Space to select and deselect checkboxes.
  • Use / to select from a group of radio buttons.
  • Use / or the first letter of an option to select an option in a combo box.

Form examples and practice

Practice

  • 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 breadcrumbs).
  • Subscribe to the WebAIM Newsletter without using your mouse.
  • Turn off the monitor and repeat some of these tasks.