Testing publications with NVDA: Web pages

This chapter explains how to use NVDA to test the accessibility of a web page.
Accessibility website of the Publications Office of the European Union: op.europa.eu/e...
TRANSCRIPT (shorten)
NVDA can be used to test a web page for accessibility in Firefox, Chrome and Edge. To configure it for this use: download the voices for the used languages, activate the Speech Viewer, the Visual Highlight to see the position of the system focus and the review cursor, and the reading of all document elements.
When navigating from element to element (using the Up and Down arrow keys), a pink rectangle highlights the position of the navigator object, indicating the browse mode and highlighting the review cursor.
The browse mode allows to read elements, but not to interact with them. Once we reach an interactive element (link, button or input field), press the Enter key. The screen reader enters in focus mode, indicated by a high-pitched beep and a blue rectangle highlighting the system focus. Any text now typed enters into the text input field. Leave the focus mode by pressing Escape. Another option for toggling between modes is Insert + Space.
The Tab key finds the next interactive element and the screen reader activates focus mode directly. To delete the content, press Delete.
Shift + Tab reaches the previous interactive element, which is a link, and NVDA returns to browse mode. Down arrow moves the review cursor to the next element. The system focus is highlighted by a dashed blue line, while the review cursor is highlighted in pink in separate positions.
The Tab key moves the system focus and the review cursor to the next interactive element, which is a link. They are combined again: indicated by a solid blue highlight.
This is a web page with some landmarks: headers, footer, navigation, main, etc. Landmarks allow screen readers to find content quickly.
The header landmark shows the name of the newspaper and its slogan. The navigation landmark has a navigation bar and a search landmark with a full-text search function. The main landmark includes an advertising block and a set of articles. The footer landmark includes a reference to the source of the texts.
Start NVDA. Control stops the speech output. Insert + S switches the speech output off.
The Down arrow key navigates element by element. Go back with the Up arrow. To navigate from landmark to landmark, press D or Shift + D. To navigate using headings, press H or Shift + H. G to navigate to graphics, T to tables, L to lists, K to links, and F to form fields.
To get an overview of links, headings, form fields, buttons and landmarks, open the Elements List by Insert + F7. Shift + Tab moves the cursor to the element type selection. To select, press the Right and Left arrows. To get back to the Element List, press the Tab key. Navigate to the selected element by pressing Enter. Leave the dialogue box using Escape.
Inside a text, press 9 or 7 for the next or previous line, 6 or 4 for the next or previous word, and 3 or 1 for the next or previous character.
In a text input field, NVDA switches into focus mode to enter text. Once finished, leave the focus mode by pressing Escape.
If we do not want any audio feedback, open the Preferences using Insert + N and select Browse Mode. Switch off Audio indication of focus and browse modes to lose the beep sound indicating the mode switch (you will gain a spoken description of the current mode the Speech viewer). To toggle browse and focus mode, use Insert + Space.
The version of NVDA 2023.1 has problems rendering the Visual Highlight while scrolling. This is why the browse mode’s pink rectangle might be placed outside the main screen.
When we reach text in multiple languages, NVDA correctly reads each block in the correct language.
The button opens a modal dialogue and can be used with the screen reader. If we close the dialogue box, the cursor is positioned back at the button. This is how it is supposed to work.
This web page has some issues difficult to find without a screen reader. The menu items are not read in the same sequence as they appear visually: their sequence in the DOM needs to be corrected. The advertisement block should be moved into the main landmark. The descriptions of two images have been exchanged. When navigating using the headings, one is missing. The elements list shows three links with identical names targeting different content. Texts are not read out using the correct language.
We activate the button pressing the Tab key, but we are not taken to the correct place. The button is not recognised as an interactive element: it’s an element styled as a button. To navigate to the button using the browse mode, press the Enter key. The dialogue box opens, but the Web browser does not move the focus to it, which makes it impossible for a visually disabled user to use the form.
You can download a quick reference guide with a summary of all of the key commands we use.