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 Webhostinghub.com.

Skip to top

Comments

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

  1. Pingback: Article on how to use NVDA and Firefox to test web sites for accessibility « Marco’s accessibility blog

  2. Pingback: mpaciello (Mike Paciello)

  3. Pingback: laura_carlson (Laura Carlson)

  4. Pingback: refreshdetroit (Refresh Detroit)

  5. Pingback: sprungmarkers (Sylvia Egger)

  6. Pingback: boa2009 (BOA-Symposium)

  7. Pingback: ramoncorominas (Ramón Corominas)

  8. Pingback: sarahebourne (Sarah Bourne)

  9. Pingback: veyfeyken (Gijs Veyfeyken)

  10. Pingback: Interview mit Marco Zehe, zuständig für Barrierefreiheit bei der Mozilla Corporation » sw4

  11. Pingback: protofunc() » Wai-Aria Widget-Entwicklung mit Accessibility Probe/Inspect am Beispiel einer custom Select-Drop-Down-Box

  12. Twitter Comment


    @cssquirrel You could try NVDA + Firefox: [link to post]

    Posted using Chat Catcher

  13. Pingback: Ultraviolet Design Blog : More Accessible User Interfaces with ARIA

  14. Pingback: strottrot.com » Blog Archive » Book Review: Web Form Design: Filling in the Blanks

  15. Good article by @MarcoZehe on #accessibility testing with NVDA & Firefox and how to used , This are a good step for firefox.

  16. Pingback: Screenreader nutzen – Anleitung für NVDA | Blind-Text

  17. xenki says:

    thank you for your useful post i really appreciate it

  18. Henny says:

    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?

  19. Pingback: IT Accessibility News – March 2011

  20. These tips are really helpful. I really appreciate that marco had shared these tips and tricks. Thanks :)

  21. Daniel says:

    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?

  22. Pingback: Learning How to Test with Screen Readers « The BAT Channel

  23. Heidi says:

    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”).

  24. Pingback: Learning How to Test with Screen Readers « Web Design « yoursite

  25. Pingback: Screen reader demos, research and resources « Alistair Duggin's blog

  26. Hi Marco. This is a great resource. Would you have a problem with me linking to your blog from my website? I’d like to promote what you’re doing.

  27. Pingback: Para saber más sobre accesibilidad | HTML + CSS

  28. Christian Schroll says:

    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!

  29. Marco says:

    Christian, just uninstall it from the Control Panel/uninstall programs window.

  30. Pingback: Accessibility Related Reading List – March 26 2013 | Recreate Web

  31. Sujit says:

    Thanks marco for sharing these tips… they are realy helpful

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>