Evaluating web accessibility with NVDA

Sumari

1. Introduction and objectives

Blind users and some people with low vision depend upon screen readers to interact with desktop applications and to browse the web. Screen readers are complex programs for occasional users and this is the reason many accessibility experts don't include a revision with a screen reader within their evaluation strategy. That decision hinders their ability to make sound reports for their customers or about their own products. This guide intends to offer simple tips to accessibility consultants for they to know basic commands of NVDA, to know the most important options of the program, and to remember some usual keys. This guide could also be of help to new NVDA users and for some occasional users.

2. Why is it important to evaluate a website with a screen reader?

To evaluate a website accessibility with a screen reader makes a big diffrence to evaluating it without a screen reader. When a person uses the screen reader he is out of her comfort zone, and she experiences the web on the shoes of a blind person. This experience would permit her to understand the actual impact of an error or bad practice on markup and scripts, and also it would make her discover errors otherwise not known. For example, it is different to see the alternative text from hearing it in the context of the complete paragraph, it is different to see the structure of the page from experiencing the navigating through tons of links, or as a last example, it is different to see a table from navigating it cell by cell. Additionally, standards are half the history, and more often than desired some errors are caused by incompatibilities between the screen reader and the specific markup.

2.1. Which aspects could we evaluate with a screen reader?

A screen reader could help us to review if:

• Headings are structured logically,
• Web forms elements are correctly labelled, and their order are correct,
• Compulsory web form fields are correctly identified,
• The system tells the errors to the user and helps him to recover from them,
• Alternative text makes sense in its context,
• Links are correctly grouped and their target is clear enough,
• The different regions and roles of the pages such as menus, search, main content or footer are correctly identified by markup and scripting.

We can find an example in the following images, of Adaptabit logo. One of them has a correct alternative text, one has an alternative text not correct (the file name), and another has no alternative text, but for a sighted user all of them look the same.

Imatge 1:

Imatge 2:

Imatge 3:

3. What is NVDA?

NVDA (NonVisual Desktop Access) is a free screen reader for Windows operating system. It has been developed by NV Access, a non-profit organization. NVDA screen reader is increasingly being used all over the world. Nowadays, as reported in WebAIM annual survey, it is the second most used screen reader, only after JAWS, and half of the persons surveyed use it. But the most important data is that the number of users is constantly growing since its publication, while JAWS users are decreasing. JAWS is the screen reader most used in Catalonia and Spain. NVDA success is based on the many functions it covers and on it being free. Currently NVDA is available in more than 40 languages, and in particular in Spanish and Catalan.

The Catalan version has been prepared by Adaptabit WorkGroup with founding support by the Diputació de Barcelona. The Catalan version includes the translation of the official software user guide, with a complete list of functions, menu options and commands.

4. Starting with NVDA

4.1. Setup

To install NVDA, first we must download it from download section in NV access web, and then execute the installer as with any other Windows program. Once installed we can initiate it activating the desktop icon, or the option in the Windows Start Menu or simply pressing Ctrl + Alt + n.

NVDA allows you to create a portable copy during the setup, or afterwards. If you already installed NVDA and want to create a portable section, you must go to the "Tools" menu, and select "Create a portable copy". We can have this portable copy within a USB pen or an external hard drive.

4.2. Aspects to take into account before using NVDA

• NVDA supports many mainstream applications such as web browsers, mail clients, office suites, etc. but it can suffer from some incompatibility with some desktop programs. Just in case, in this tutorial we focus our attention in the evaluation of web content.
• When evaluation accessibility as a blind user, it is important to avoid the use of the mouse, a device not used by blind users. When simulating a low vision user, you can test some of the mouse functionalities offered by NVDA.
• Before a real evaluation, it is recommended to feel comfortable with NVDA. So, it is adviced to practice with the screen reader during some days, browsing several webs without a mouse, testing the use of the keyboard and even switching the screen off, to rely only on voiced content and to assess if it makes sense.
• It is common that the visual focus does not follow the reading focus, and so the page will be fixed while NVDA will advance through it; this is common with several screen readers. If you try to verify NVDA interaction by sight you'll have to open the same page on another browser, know it beforehand or have a printed copy.
• NVDA navigates with two different mechanisms: with the system caret (also known as editing caret) and with the review caret. When the focus reaches an object hold by the system caret, it allows us to move through the text by the keyboard arrows and Page Navigation keys, and even edit it if the object is editable. The review cursor, allows us to review the text not requiring the system caret to be on the object, in order to keep the editing position. On the contrary, when the system caret is moved, the review caret follows it. With both carets we can read the current object, letter by letter, word by word or line by line.
• It is important to test contents and interaction with most widespread web browsers such as the most used versions of Microsoft Explorer, Firefox and Chrome.

4.3. NVDA key

Like many other screen readers, NVDA has a specific key, called "modifier key", which is used in many program functions, usually combined with other keys. By default NVDA key will be the Insert key in the numeric keypad, but we can also use CapsLock key, if we configure it in the Settings menu in NVDA. You can access that menu by pressing Ctrl + NVDA + k.

4.4. Main menu options

The NVDA menu has, among others, options to establish the program settings, access the help, change voice dictionaries or quit NVDA.

Once NVDA has started, we can access the menu pressing NVDA key + n, or clicking with the right mouse button over the Windows Operating System Menu. Within this menu we find other submenus such as:

• Preferences: which allows us to access general options, synthesizer options, voice options, Braille display options, mouse options, cursor review options, input options, object presentation options, navigation options, document format options, pronunciation dictionaries, pronunciation of symbols and puntuation, and input gestures.
• Tools: which allows us access NVDA log, voice visualizer, Python console, the extensions manager and the creation of a portable version.
• Help: which allows us access the user guide, a quick command reference, the last version news, the license, updates, etc.
• Configuration profiles: where we can create new configurations that NVDA will activate under certain circumstances. We can restore the last configuration or restore the default settings with other options in this menu.
• Quit: exits the program.

4.5. Keyboard layout

NVDA offers two keyboards layouts: one for desktop computers (set by default) and another for laptops. We can choose one or the other depending on our context of use, in the Preferences submenu. In this tutorial we use the desktop keyboard layout. Blind users tend to use desktop layout more often.

5. Reading

NVDA has many shortcut keys to read the content line by line, word by word or character by character. Following you will find the most common ones:

• NVDA+Ctrl + ↑/↓: Increases/decreases voice speed
  Attention: it is recommended to decrease voice speed the first times you use NVDA, as it is difficult to understand all the information given by voice without training.
• Home: Moves to the beginning of the page.
• NVDA + ↓: Starts reading from the current position.
• Ctrl: Stops reading
  Attention: this is an important key, especially the first hours with NVDA, to stop the voice and take a break.
• NDA + ↓: reads from Llegeix from the current point.
• ↑ / ↓ : Previous line / next line
• left arrow / right arrow : Previous/Next character
• F5: Page refresh.

6. Navigation

NVDA can navigate and explore the content by several ways, as blind users do. You can move through headings, through list elements, through links, etc. Following you will find the most common keyboard shortcuts to navigate content elements.

In this section, many keyboard shortcuts consist in only one letter which will move us from one element to the next one. When we combine this shortcut key with Caps we will move to the previous element instead.

6.1. Landmarks and headings

• d: Landmarks.
• h: Headings.
• 1-6: Level 1 to 6 headings

6.2. Lists

• l: Lists.
• i: Lists items.

6.3. Tables

• t: Tables.
• You can use ↑/↓ to navigate between cells. But to read them completely is better to use Ctrl+Alt+Arrow keys

6.4. Forms

• f: to move from one form to the next.
• When you are in a form element NVDA + SpaceBar: Enters form mode.
• NVDA + SpaceBar: Exits form mode.

Once you have entered the form:

• Tab: Go to the next control in the form.
• Caps + Tab: Go to the previous control in the form.
• x: Selection box.
• c: combo box.
• r: option button.
• SpaceBar: Activates or desactivates a selection.
• alt + ↓: Opens a combo box.
• ↑/↓: to go from option buttons and combo boxes.
• Insert key: Submits the information.

6.5. Links

• k: Links.
• u: unvisited links.
• v: visited links.

6.6. Other elements

• b: buttons.
• Ctrl + Home: Beginning of the page.
• Ctrl + End: End of the page.
• Alt + D: Browser URL bar.
• Caps + comma: Goes to the beginning of a container (lists, tables, etc.).
• Comma: Goes to the end of a container.

7. Practical exercises

Following you will find some practical exercises to initiate yourself with the evaluation of web pages with NVDA. They will be done on the contents of the tutorial itself.

7.1. Reading

Read section 1 of this guide with NVDA in one shot (you can do a small trick and without closing the screen move the cursor to the beginning of the section). After it, move line by line and move backwards until you find the word "blind". Spell it. Go forward and stop NVDA once or twice.

7.2. Content navigation

Move through level 2 headings in this guide until you find section "6. Navigation".

Move through level 3 headings in this guide until you find section "6.5 Links".

Navigate throught the lists of this guide. How many lists are there?

7.3. Images

On secion 2.1, navigate through the images of the Adaptabit logo and discover which is the correct one and which one has no alternative text.

7.4. Tables

To practice you will have to read NVDA table functions on NVDA userguide. Try to read the tables at the end of this section, and answer the following questions:

• How many columns are there in the following tables?
• Which headings relate to the value "100" in the first and the third table? What differences are there between these two tables?
• Do all the tables have columns headings? and row headings?

7.5. Forms

Try to fill in the next form (you don't need to submit it) and answer the following questions:

• What difference is there between the fields "Family Name" and "First Name"? Why?
• Which form fields are not compulsory?
• Which options are available in the field "How do you prefer to be contacted"?
• Which buttons are there in the form?