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.
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:
- Right-click the NVDA icon in your system tray.
- Select Preferences -> Synthesizer.
- From the drop down, select the Display synthesizer.
- Click OK.
- 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.
|NVDA+space||Turns virtualBuffer pass-through mode on or off.|
|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.
|1 to 6||headings 1 to 6 respectively|
|l||list (ordered, unordered, definition)|
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.
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:
|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.
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.