It is very important for every web developer to write clean code, but it is equally important to make sure that what's written actually works for people who know nothing about the code: 95% of the people who use the web. For this reason, developers spend a lot of time testing with various browsers, on different platforms, lots of devices, and even get advice from other people.
Among the various testing environments, screen readers remain one of the gray areas for many developers. There are a few reasons for this: sometimes people ask why do they need to bother. But perhaps many of you ask "where do I get one?" or complain, "I don't know what to do with this thing." I hope this article will answer the last two concerns. Perhaps I'll try to persuade you why you should bother in another article. Hopefully, though, you already know why accessibility is important for web development.
What is NVDA for Windows?
Screen reader is an assistive technology software that allows any blind or visually impaired person to perform everyday computing tasks, such as browsing the internet, reading, writing, or proofreading documents in different formats, listening to and recording music, playing games, and more. Essentially, it's the hub of everything on the computer.
NVDA for Windows is one of several screen reader programs available on the market today. NVDA is free and open source. It is very strict in how it treats web pages and thus can serve as a perfect testing tool. Testing web pages with the NVDA screen reader is as easy as 1, 2, 3 or, I should rather say, A, B, C. Read on to find out why!
You can download the official version of the NVDA screen reader. However, if you would like to experiment with newest features, download the most most recent development snapshot, as it contains the latest code.
Getting started
- Install NVDA
- Make yourself comfortable by adjusting rate, pitch, volume, and even the language of the speech by:
- Control+Insert+Left/Right arrows -- navigate between available parameters (see below).
- Control+Insert+Up/Down arrows -- change a particular parameter, e.g. make speech faster or slower.
- You can save your preferences for later by:
- Pressing Insert+N to open NVDA menu.
- Choosing "Save Preference" from the menu.
Please note: If you are installing the NVDA screen reader inside a virtual machine or your keyboard does not have an INSERT key, consider using software such as "Sharp Keys" to reassign the keys on your keyboard.
Start testing web pages
I've made a list of most essential NVDA shortcut keys below, which should give you a helpful reference guide. If you know your alphabet, you will have no trouble remembering them! Very important, do not use a mouse and turn off your computer monitor. With a little patience you'll be able to get the hang of it. Follow along with the example below to get started.
Important to remember:
- NVDA uses a view, called "browse mode" to present web pages to the user, where:
- Screen reader intercepts arrow and some other keys (see below) to offer additional navigation operations for the user.
- NVDA "browse" cursor tries its best but may not always follow onscreen cursor, so do not trust your eyes -- trust your ears!
- NVDA uses "focus mode" when interacting with edit fields and ARIA-enabled DHTML widgets.
- NVDA will try to switch between "browse" and "focus" modes automatically when the user navigates with a tab key. The change between modes will be indicated by two distinct sounds.
- If NVDA does not change the modes automatically, press SPACE bar on an edit control or an ARIA-enabled widget to force the switch.
Yahoo! Homepage: a real-life example
To demonstrate how NVDA navigation shortcut keys work, let us explore the new Yahoo! Homepage using the concepts above
Locating a "search box"
Since a search box is most likely an edit field or, at the very least, a form field, we can use a shortcut "f" or "shift+f" to browse between the form fields on the page or "e" or "shift+e" to jump between edit fields exclusively. To see how this works with edit fields, do the following:
- Press Control+HOME to jump to the top of the page.
- Press the letter "e" to jump to the first edit field on the page; NVDA will say "search edit.".
- Press letter "e" again; NVDA will say "Enter stock symbol edit, has autocomplete."
- Press the letter "e" again; this time NVDA will say "No next edit field."
- Move backwards using the "shift+e" shortcut key; when you reach the top of the page, NVDA will say "No previous edit field."
Please note, when you reach an edit field, you cannot start typing immediately. First, you have to hit the SPACE bar to enter the "focus mode" to focus on it. If you used the TAB key to reach the edit field, NVDA will turn on the "focus mode" for you automatically.
Experiment with other navigation shortcuts such as "h" for headings, "g" for graphics and "b" for buttons" and see what you find!
Victor Tsaran
Yahoo! Accessibility Project Manager
Additional Notes
Shortcut Keys for the NVDA Screen Reader
Please note: NVDA key refers to either INSERT key or the key that you have to press in order to execute NVDA commands. The following is the list of the most essential NVDA shortcut keys:General
- NVDA+T -- read the window title of the currently-active application.
- TAB or SHIFT+TAB -- move between objects in the tab order.
- NVDA+TAB -- read the object currently in focus.
- NVDA+Up_Arrow -- read the current line under NVDA cursor.
- ENTER or SPACE bar key -- activate the item under the cursor, e.g., an HTML link, a button, etc.
- More shortcuts under NVDA Help menu.
Navigating web pages:
(applicable in "browse mode" only)- CONTROL+HOME -- move to the top of the page.
- CONTROL+END -- move to the bottom of the page.
- Up and DOWN arrows -- navigate between elements in a linear fashion.
- Left and Right arrows -- navigate character by character.
- NVDA+F7 -- display a list of all the HTML links and headings on the page; start typing to narrow down your search.
- B or SHIFT+B -- move between buttons.
- C or SHIFT+C -- move between combo boxes.
- D and SHIFT+D -- move between ARIA landmarks.
- E or SHIFT+E -- move between edit fields.
- F or SHIFT+F -- move between form fields.
- G or SHIFT+G -- move between graphics; NVDA will speak alt text if one is present or will speak a lot of gibberish if no alt text is found.
- H or SHIFT+H -- move between HTML headings.
- 1 through 6 or SHIFT+1 through SHIFT+6 -- move between HTML headings of a particular level.
- I or SHIFT+I -- move between list items of an HTML list (note: you have to be inside an HTML list to use this function).
- K and SHIFT+K -- move between links.
- L or SHIFT+L -- move between HTML lists.
- M or SHIFT+M -- move between frames and iframes on the page.
- N or SHIFT+N -- skip to the first block of text (non-link elements).
- O or Shift+O -- move between embedded objects, such as Flash movies, press SPACE bar to start interacting with object; press NVDA+SPACE to stop interacting with the object.
- Q or SHIFT+Q -- move between blockquotes on the page.
- R or SHIFT+R -- move between radiobuttons on the page.
- S or SHIFT+S -- move between separators (HR tags) on the page.
- T and SHIFT+T -- move between HTML tables.
- U or SHIFT+U -- move between unvisited links.
- V or SHIFT+V -- move between visited links.
- X or SHIFT+X -- move between check boxes.
- ESCAPE -- move out of the "focus mode".
Why all these shortcut keys?
- The shortcut keys listed above allow the user to quickly skip between various HTML elements on the page, e.g., buttons, check boxes, edit fields, links etc.
- Using the shortcut keys above the developer can quickly determine whether they've used semantically-correct HTML, i.e. if pressing "B" or "SHIFT+B" does not find the button in question, most likely an incorrect mark-up was used for it.
More hints
It is also strongly recommended that you skim through the How to use NVDA and Firefox to test your web pages for accessibility article by Mozilla's Marco Zehe as it offers even more tips on the efficient testing techniques with NVDA. For more information about and help on NVDA visit the "Help" menu or NVDA web site.
NVDA provides a utility called "Display synthesizer" which allows you to see all spoken text in a separate window on the screen instead of hearing it through synthetic
speech. To select the "display synthesizer" mode, choose NVDA menu->Preferences->Synthesizer Settings->Display Synthesizer. Please note, in the most recent snapshots of NVDA this utility is called "Speech Viewer" and it is located under NVDA Menu->Tools->Speech Viewer. With "Speech Viewer" you can listen to speech and see the text on the screen at the same time.
If you do not want to hear the speech synthesizer while using "Speech Viewer" tool, you can toggle the screen reader's voice on and off with the INSERT+S shortcut key.
2 Comments
Shouldn’t item number ten in “Navigating web pages” section be
F or SHIFT+F– move between form fields
instead of
F or SHIFT+EF– move between form fields
Hope this is helpful.
@jfc3
Thanks John, Just corrected. Now, this is what I call an “open” spirit! :