Testing publications with NVDA – Web pages
[Narrator:] NVDA is an excellent tool to use to test a web page for accessibility. NVDA works with Firefox, Chrome and Edge. For our demo we will use the Firefox web browser. Apart from the initial settings explained in the Configuration chapter, we need to configure NVDA to optimise it for our use:
- Our demo web page presents content in four languages. Therefore, we have to download the voices for these languages as Windows OneCore voices.
- Instead of hearing the speech output, for testing purposes we prefer to read it. This can make the search for an accessibility problem easier. We therefore have to activate the Speech Viewer.
- As we find it rather challenging to follow a pure auditory interface, we activate the Visual Highlight so we can see the position of the system focus and the review cursor.
- We activate the reading of all document elements in the Document Formatting settings.
If you have any questions on how to configure one of these settings, please review the previous chapter, Testing publications with NVDA – Configuration.
Modes
Before we start our demo, let’s talk about the different navigation modes and how they are rendered by the previously activated Visual Highlight. When navigating from element to element in sequential order, for example by using the Up and Down arrow keys, we can see a solid pink rectangle highlighting the current position of the navigator object. The pink rectangle indicates that we are running in browse mode. It highlights the review cursor.
While browse mode allows us to read elements, it does not allow us to interact with them. Once we reach an interactive element, like a link, a button or an input field, we can press the Enter key. In our example, the screen reader is notified that we want to enter content into the text input field. We are now in focus mode. The rectangle now highlights the system focus. The mode change is indicated by the colour of the rectangle changing to blue, along with a high-pitched beep. The navigation keys from browse mode can no longer be used. Any text now typed is entered directly into the text input field. Once we finish typing, we can leave the focus mode by pressing the Escape key. The change in the highlight colour and the lower-pitched beep indicate that we have returned to browse mode. If we want to modify the text in the input field again, we just need to press the Enter key to return to focus mode. Another option for toggling between browse and switch modes is to use the Insert + Space keys. We continue to navigate using the Arrow Down key.
The Tab key lets a user go directly to the next interactive element. Shift + Tab finds the previous interactive element.
As we are only addressing interactive elements, the screen reader activates focus mode directly. If we want to delete the content of the text input element, we just need to press the Delete key.
By pressing Shift + Tab we reach the previous interactive element, which is a link. The low-pitched beep tells us that we have returned to browse mode. By pressing Down arrow the screen reader knows we want to move the review cursor to the next element. Note how the system focus is now highlighted by a dashed blue line, while the review cursor is highlighted in pink. The system focus and the review cursor are now in separate positions.
If we press the Tab key we move the system focus and the review cursor to the next interactive element, which is a link. They are then combined again, as indicated by a solid blue highlight.
The demo
Before starting our demo, we made sure that our web page passed all the tests we described in the HTML Testing chapter. So we are sure that the HTML code is error free and that basic accessibility features are working. We are using semantic elements, alternative texts, labelled form elements and ARIA roles, properties and states.
We have prepared a simple web page. The Wonderland Gazette is an imaginary newspaper in the world of Alice’s Adventures in Wonderland. We have coded some landmarks into this web page. Landmarks are sections of content on the page to which users might want to navigate easily, such as headers, footer, navigation, main, etc. Therefore, landmarks allow screen readers and other assistive technologies to find content quickly, since they can jump directly to them.
At the top of the page is a header landmark showing the name of the newspaper and its slogan. Below is a navigation landmark with a navigation bar. A landmark may include another landmark. In this case we have included a search landmark offering the user a full-text search function.
The main content is embedded in a main landmark. It includes an advertising block followed by a set of articles. The footer includes a reference to the source of the texts. It is embedded in a footer landmark.
[Screen reader:] Demo Alice News, Mozilla Firefox.
[Narrator:] We start the NVDA screen reader. By pressing the Control key we can stop the speech output. As we are not used to speech output, we turn it off and will use the output of the Speech viewer only. To switch the speech output off, press Insert + S.
[Screen reader:] Speech mode off.
[Narrator:] Please note that whenever we mention the Insert key we are referring to the NVDA modifier key. Let’s take our first steps in the document. We will use the Down arrow key to go through the document element by element. We can go back again by pressing the Up arrow.
As this approach only offers us a sequential way of reading the document elements, we prefer to use the structure of the document to speed up our navigation experience. To navigate from landmark to landmark we can press D. You can see how we navigate from landmark to landmark using the Speech Viewer and the Visual Highlight. We can reverse the navigation direction using Shift + D.
Another popular way to navigate the content of the page is to use the headings. We press the H key to go from our current position to the next heading. And of course, we can use Shift + H to reverse the direction. In the next set of examples we won’t mention again that the Shift key can be used to reverse the navigation direction, but it can be used in all of them. We can use the G key to navigate from graphic to graphic. In the same way, we can use the T key for tables. The L key can be used to find lists. The K key forwards us to links. The F key takes us to form fields.
To get an overview of links, headings, form fields, buttons and landmarks, we can open the Elements List by pressing Insert and F7. Using Shift + Tab we can move the cursor to the element type selection. To select the element type, press the right and left Arrow keys. To get back to the Element List, press the Tab key. We can navigate to the selected element by pressing Enter. We can leave the dialogue box using the Escape key.
We try to navigate inside a text. We press 9 or 7 on the numeric keypad 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.
For now we have only navigated content using the browse mode. When we reach a text input field, NVDA switches into focus mode.
[NVDA system sound.]
When typing, the input will be used to enter text into the form field. Once we finish typing, we can leave the focus mode by pressing Escape.
[NVDA system sound.]
We are changing back to browse mode.
If we do not want any audio feedback, the following hint could be useful. Open the Preferences using Insert + N and select Browse Mode. Making sure Audio indication of focus and browse modes is switched off, you will lose the beep sound indicating the mode switch, but you will gain a spoken description of the current mode, which is logged in the Speech viewer. To toggle browse and focus mode, we can use Insert + Space. Notice how the mode switch is now logged in the Speech Viewer.
We use the heading navigation to reach a text block that uses multiple languages. Please note that the current version of NVDA 2023.1 has problems rendering the Visual Highlight while scrolling. This is why, when scrolling, the browse mode’s pink rectangle might be placed outside the main screen. We scroll a little bit to make the text easier to see.
Using the silent mode, we do not notice any difference in the presentation. We therefore switch speech mode off and continue reading.
[Screen reader:] Speech mode beeps.
[Narrator:] When we switch, NVDA first activates the mode Speech beeps, which activates a beep between each navigation step.
[Screen reader:] Speech mode talk.
[Narrator:] When we switch again, we activate Speech mode talk.
[Screen reader:] … many languages and is read by people… List with 4 items. Bullet. France. [In French] Aventures d’Alice au pays des merveilles. Bullet. Germany. [In German] Alice’s Abenteuer im Wunderland. Bullet. Italy. [In Italian] Le Avventure d’Alice nel Paese delle Meraviglie. Bullet. Spain. [In Spanish] Alicia en el País de las Maravillas.
[Narrator:] This is working well. We activate silent mode again and check the functionality of the button.
[Screen reader:] Speech mode off.
[Narrator:] The modal dialogue box opens and can be used with the screen reader. If we close the dialogue box, the cursor is positioned at the button where we had previously opened the dialogue box. This is how it is supposed to work.
Potential error scenarios
We prepared this web page with some issues that are difficult to find without using a screen reader. We will not explain how to fix them as that was part of the HTML Coding chapter.
When we start navigating the page, we notice that the menu items are not read in the same sequence as they appear visually. The visual sequence should always match the sequence in which the elements are read by a screen reader. Their sequence in the HTML DOM obviously needs to be corrected.
A user starting to read the web page at the main landmark could easily miss the advertisement block. We should move the advertisement block into the main landmark.
Have you noticed that the image descriptions of two images have accidentally been exchanged? We need to switch them to correct this. Bugs like these are difficult to find when the alternative text stays hidden from a sighted user.
When we navigated using the headings, one of them was missing. This heading was obviously not marked as a heading in the code; it is just visually presented in the same way as a heading.
The elements list shows three links with identical names targeting different content. Links should always use different names so they can be distinguished in a list. The elements list makes it easy to find identical link names.
[Screen reader:] Speech mode beeps. Speech mode talk. …many languages and is read… List with 4 items. Bullet. France.
[Read in English] Aventures d’Alice au pays des merveilles. Bullet. Germany. [Read in English] Alice’s Abenteuer im Wunderland. Bullet. Italy. [Read in English] Le Avventure d’Alice nel Paese delle Meraviglie. Bullet. Spain. [Read in English] Alicia en el País de las Maravillas.
[Narrator:] In this implementation the texts are not read out using the correct language. The code does not contain any attributes that would help a screen reader find a matching voice. When using a screen reader, it is easy to come across texts that are read out using a voice that does not match the language in which they are written.
[Screen reader:] Speech mode off.
[Narrator:] We want to have the free newspaper issue, so we want to activate the button. We press the Tab key, but we are not taken to the correct place. The screen reader does not recognise the button as an interactive element. It has been implemented as an HTML span element styled as a button. We therefore navigate to the button using the browse mode. As the button uses a JavaScript onClick handler to open the dialogue box, we simulate a mouse click by pressing the Enter key. The dialogue box opens, but the Web browser does not move the focus to the modal dialogue box. The focus stays at the same position as the button, which makes it impossible for a visually disabled user to use the form. As you have seen, there are accessibility problems that cannot easily be detected without a screen reader.
Keyboard shortcuts
Here is a summary of the keyboard combinations we have used during this tutorial.
Please note that you can download a quick reference guide with a summary of all of the key commands we use.
Where to continue?
You have now had an introduction to testing web pages with NVDA.
Depending on your interests, you could continue with one of the following chapters:
- Testing publications with NVDA: PDFs.
- Testing publications with NVDA: EPUBs.
[Automated voice:] Accessibility. For more information visit: op.europa.eu/en/web/accessibility.