How to use NVDA and Firefox to test your web pages for accessibility

This article aims to provide a guide to testing your web sites or web applications using both NVDA and Firefox, hoping to provide you with some of the tools available to visually impaired users who will benefit from your sites being accessible. While there are many tools available to check whether your pages are semantically correct, it is always helpful to also use a real screen reader to hear what your pages would sound like to a blind visitor.

NVDA (Non-visual Desktop Access) is a free and open-source screen reader for the Microsoft Windows operating system. Unlike its commercial counterparts, which have to be purchased to be legally used for testing web sites, NVDA does not cost you any money. Moreover, it is light-weight yet powerful, and can be installed on both physical as well as virtual desktops. Your system won’t be impaired by it, no video drivers will be installed. If you like, you can even put the portable version onto a USB thumb drive and run NVDA from there, requiring no installation at all.

How to get NVDA

NVDA can be downloaded from the project’s homepage. Generally, you have two options:

  • Download the release version, which at the time of this writing is 0.6p3. This is a stable release which is suitable for most tasks. However it may not contain the latest updates.
  • Download a current development snapshot. This may be a bit more unstable, or features may be in flux or temporarily unavailable, but those features that are available are the latest cutting edge. For example, if you want or need to test your web sites with Internet Explorer 8 in addition to Firefox, there’s no way the current release version, 0.6p3, can do that reliably for you. However, please be aware of some limitations when testing Accessible Rich Internet Applications (WAI-ARIA) enabled web apps with IE. Also, NVDA’s support for IE dynamic updates and ARIA support are still heavily under development at this point, so results may not be as good yet because of that.

Once downloaded, install it, or put the portable version on a suitable USB thumb drive and insert it.

First start

Starting NVDA is easy. The installer offers to run it right after it finishes. Running it from the USB drive is as easy as opening it in Explorer and double clicking the NVDA executable.

On first start, a quick start guide will appear. I encourage you to at least browse it. You can then choose to disable this dialog and click OK. Now, NVDA will sit in your system tray, talking to you through your sound card.

Visual speech output

NVDA offers a handy feature for those who cannot, or do not want to, get used to the default voice that ships with it. It comes with a synthesizer that instead of speaking, outputs what it would say into a small window on your screen. To turn this on:

  1. Right-click the NVDA icon in your system tray.
  2. Select Preferences -> Synthesizer.
  3. From the drop down, select the Display synthesizer.
  4. Click OK.
  5. If you want to save your changes to make them permanent, right-click the NVDA icon again and select “Save settings”.

Opening your first web site and looking at it with NVDA

Now, it is time to start Firefox and open a web page to make sure you get the proper output.

Once the page loads, NVDA should automatically announce the title. Now, it is time to familiarize yourself with the virtual buffer concept common to all Windows screen readers on the market. In a nutshell, what happens is that NVDA takes the HTML of the page and converts it into a flat document with semantic information. Links, headings, form fields, images and other information is being spoken along with the actual text of the page. It is done in the order the HTML appears in the source that Firefox just loaded.

This so-called virtual document is what NVDA presents to you by default. You can use the arrow keys to navigate the document by character or line, and with the Ctrl key added, also by word. You can even select text using Shift plus arrow keys and copy that selected text to the clipboard.

If you encounter an interactive control such as a textbox, combobox or listbox, you can switch to what NVDA calls Focus Mode, in which the virtual buffer reading mode is stopped and focus is set to the control at hand, ready for you to interact with it using the keyboard, as if NVDA was not running at all. You invoke focus mode by pressing Enter when the virtual caret is on the relevant field. Using Escape, you switch back to reading inside the virtual document. If you navigate the page with the Tab key, focus mode will automatically be switched on and off for you.

As you navigate the virtual document, NVDA will update the real browser focus to each focusable element as you hit it with the virtual caret. You will often get visual indication of where you are on the page if you get lost.

As you navigate, NVDA will also speak semantic information such as “link”, “heading level 1” (through “heading level 6”), “button” or the like. It will indicate whether you enter or leave lists and how many items these lists have.

Virtual buffer navigation keys

While the virtual buffer is active, the following key combinations can be used to perform actions.

Note: The NVDA key is usually the Insert key on the number pad, but can be configured in the Preferences/Keyboard… settings of the NVDA menu to be the CapsLock key.

General purpose functions
Key Function
NVDA+space Turns virtualBuffer pass-through mode on or off.
control+NVDA+f Find
NVDA+f3 Find next
NVDA+f7 Display a list of all links on the page
NVDA+f5 Refresh the buffer, sometimes needed with dynamic content

The following is a list of quick keys to move the virtual cursor. These single letter keys can be combined with the Shift key to perform the same function in the reverse direction.

Virtual buffer quick keys
Key Element
h heading
1 to 6 headings 1 to 6 respectively
l list (ordered, unordered, definition)
i list item
t table
k link
u unvisited link
v visited link
f form field
e edit field
b button
x checkbox
c combo box
r radio button
q block quote
s separator
m frame
g graphic

So, if you’re browsing this article with NVDA, pressing Ctrl+Home, followed by t once will bring you to the first table, which is the table with the general purpose keystrokes. Pressing t again will move you to the second table which contains the virtual buffer quick keys.

Checking for different aspects of your web page

OK, now that you’ve made yourself familiar with how NVDA works, it’s time to load your own web pages and give them a check up. Things that NVDA can help you determine quickly:

  • Do your headings follow a logical structure and substructure? Or did you put everything at one heading level even though something may be a sub section of something else?
  • Do your form fields like edits and buttons have labels? In other words, does NVDA speak something like “User name: edit” automatically, or does it just say “edit”? If the latter, your labels aren’t properly associated with the field they’re labelling. This is an error in your markup which is easily corrected.
  • Do your important images have proper alternative text? All images that are part of links, and all images that communicate something important must have alternative text. Otherwise, screen readers cannot pick up the meaning of the image. They will try to guess part of the src attribute as the image name, but this is at most cryptic if not completely useless.
  • Are things such as navigational links grouped together inside a list of some sort? Putting them in a list helps to add structural information to your pages.
  • If using WAI-ARIA, are you using landmark roles for navigation, search, main, footer etc.? This will aid in identifying specific parts of your page and thus help in navigation/understanding of the layout.
  • Also if using WAI-ARIA, are your form fields that are required using the aria-required attribute? Screen readers such as NVDA can use this to give an unambiguous indication that this field is required to be filled in.

Of course, there are more things to check than the above, but these are starting points where NVDA can help you assess quickly whether your markup is good.

Advanced techniques

NVDA provides a mechanism called Object Navigation. This mode is a walker of the accessible hierarchy exposed by Firefox and other accessible applications. There is a root accessible object usually representing the main window or frame, and as its children, grandchildren and grand-grandchildren etc. are all the objects the UI and the currently loaded web page expose. There are tools such as Microsofts Accessibility Explorer or IBM’s AccProbe to visualize this, but if you do not have these at hand currently, or want to listen to your tree rather than see it, NVDA offers you the means to do so.

NVDA also provides some default information such as whether the element is actually being displayed (visible), unavailable (grayed out) or other similar info. The following are some basic keystrokes to get you started:

Object Navigator basic keystrokes
Key Description
NVDA+NumPad8 From the current element, go to its parent
NVDA+NumPad4 Go to the previous sibling on the same level as the current object
NVDA+NumPad6 Go to the next sibling of the current object
NVDA+NumPad2 Move to the first child object of the current object

Siblings refer to objects which have a common parent, just like in ordinary family relations.

When navigating your page with this mechanism, you will hear every list, every div (exposed as sections), every form and its formfield children, etc., and can get a feel for how your markup affects the output to the accessibility programming interfaces.

More information on the object navigation is available in both the quick key reference and the NVDA user guide, which were both installed onto your system when you installed NVDA.

In conclusion

This article is not meant to replace the NVDA user guide. It is hoped that this article is going to be useful for web developers who want to add one more testing tool to their daily workspace to test the human interaction factor of their web sites.

Having said that, feedback is, of course, very welcome! You can find information on how to contact me on the “About” page.

In other languages

This page has been translated into Spanish language by Maria Ramos from


39 thoughts on “How to use NVDA and Firefox to test your web pages for accessibility

  1. Hey Marco – great article as ususal, thanks.

    In the latest version of NVDA it looks like the ‘Display Synthesizer’ option is now moved to Tools > Speech viewer. I’m using 2010.2. Does that sound right?

  2. Maybe I’m missing something basic, but whenever I press the single-key shortcuts on a webpage, NVDA just reads the letters aloud. So in your example, pressing ‘t’ just reads the letter ‘t’ aloud, it doesn’t take me to the first table element.

    How do I get these single-letter shortcuts to work?

    1. Hi Daniel

      1. See if the table has th tag? If your table has only td element and not th element, the “t” will not work (Or you can put scope on td elements if you chose not to use th)
      2. Start NVDA before you open the browser, Sometime this also causes issues.

      Hope this works for you

  3. Awesome article, Marco. The tips are also useful. I want to add information to the landmark for WAI-ARIA. As an accessibility engineer and a blind user, I also find it helpful to label landmarks. IE9.0, Firefox 4.0 and above combined with JAWS 12.0 and NVDA will allow users to identify which landmarks go with what sections. For example, some complex pages may have multiple form landmarks. For example, a page may have different form landmark roles. With proper labelling, NVDA and JAWS can identify the different form landmarks on a page (i.e. “Login form landmark”, “Technical Support Form landmark”).

  4. I don’t know either this question is concerning to your blog, but: how can I uninstall NVDA Screenreader? I searched for this problem in the web but I didn’t find an answer. Do you know how I can uninstall the reader? Thx in advance!

  5. hi,
    when i load web page, the screen reader start reading all the page and even when he go get to input or link he does not stopping and continue reading the next tag in the html (unless i am prassing arrow keys or tab).
    how can i force the screen reader to stop om the first input/link without pressing any key(arrow or tab)

    1. You cannot. At least not in every screen reader. In some, you can tell it to not start reading the page. In others, just press the Control key to stop speech and navigate on your own. I know of no screen reader that stops at the first input. I know that, if focus set to any given input, reading of a page does not start, and focus is set there. Example the Google homepage.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.