Testing Web Pages with NVDA

About NVDA

NVDA is a free screen reader for Windows that is the primary screen reader for 40% users. It is also great for testing the accessibility of web pages.

Installing NVDA

NVDA is a free screen reader for Windows that is the primary screen reader for 40% users. It is also great for testing the accessibility of web pages.

NVDA can be downloaded for free.

Starting and Exiting NVDA

  1. Start NVDA by clicking the Window start icon and then the NVDA icon
    NVDA icon in Windows start menu
  2. Exit NVDA icon in the Windows taskbar.
    NVDA icon in Taskbar with Exit menu

Speech Viewer

  • If you aren't used to using a screen reader, the voice output can be a bit overwhelming.
  • NVDA has a useful Speech Viewer that allows developers to view the screen reader output as text.

To enable the Speech Viewer:

  1. Start NVDA
  2. Find the NVDA icon in the Windows taskbar.
    NVDA icon in Taskbar
  3. Right click on the NVDA icon and then select 'Tools' and 'Speech Viewer'
    NVDA Tools menu with Speech viewer
  4. That's it. You should now see the Speech Viewer
    NVDA speech viewer
  5. The first thing that you will notice is that the Speech Viewer updates with a constant stream of information whenever you move the mouse. In order to stop this go to the NVDA menu and click on 'Preferences' > 'Settings' > 'Mouse settings' and then uncheck 'Enable mouse tracking'.
  6. By default NVDA starts reading all content when the page loads. To disable this, click on 'Preferences' > 'Settings' > 'Browse Mode' and then uncheck 'Automatic Say All on page load'.

Visual Highlight

  • NVDA has a useful Visual Highlight that displays visually the element on the page has current system focus.

To enable Visual highlight:

  1. Start NVDA
  2. Find the NVDA icon in the Windows taskbar.
  3. Right click on the NVDA icon and then select 'Preferences' and 'Settings'
  4. In the Categories list, select 'Vision'
  5. Under Visual Highlight, click 'Enable Highlighting'
  6. Click the 'OK' button

Deciding Which Browser to Use

According to the WebAIM Screen Reader Survey #10 (2024):

  • 21.3% of screen reader users use NVDA with Chrome.
  • 10% of screen reader users use NVDA with Firefox.
  • 5% of screen reader users use NVDA with Edge.

Useful Shortcuts

Launching

  • Control + Alt + N = Start NVDA
  • Insert + Q = Exit NVDA
  • Control + Esc + 'Chrome' = Launch Chrome

Browsing

  • Control + N = New window
  • Control + Shift + N = New incognito window
  • Control + T = New tab
  • Control + L = Go to Location bar
  • Alt + ← = Previous page
  • Alt + → = Next page

Navigating

  • H = Next heading
  • Shift + H = Previous heading
  • L = Next list
  • Shift + L = Previous list
  • I = Next list item
  • Shift + I = Previous list item
  • G = Next graphic
  • Shift + G = Previous graphic

Reading

  • Control = Stops NVDA reading
  • ↓ = Next line
  • ↑ = Previous line
  • → = Next character
  • ← = Previous character
  • Control + → = Next word
  • Control + ← = Previous word

Forms

Form Shortcuts

  • F = Next form
  • Tab = Next form control
  • Shift + Tab = Previous form control
  • Space = Select and deselect checkboxes
  • ↓ / ↑ = Select radio button or combo box options
  • Insert + Spacebar = Enter focus mode (sometimes called forms mode)
  • Insert + Spacebar = Exit focus mode and return to browse mode

Browse mode v. Focus mode

NVDA has two modes of operation: browse mode for navigating and reading the page and focus mode for interacting with controls, such as form input fields.

In browse mode, keyboard shortcuts help the user to navigate. For example, the H key will move focus to the next heading.

When a user inputs data into a form field, they want characters to appear when pressing keys. For example, the H key should enter the symbol 'h', rather than move to the next heading. To achieve this, screen readers have a focus mode (sometimes called forms mode). When a screen reader enters focus mode, keyboard shortcuts are disabled.

Testing Forms

  1. Open the web page containing the form in Chrome
  2. Open NVDA
  3. Make sure the Focus Highlight add-on is enabled. A red outline indicates browse mode; a blue outline indicates focus mode.
  4. Make sure the Speech Viewer is visible
  5. Tab down to the first form input field
  6. NVDA will make a clicking sound and the focus highlight outline will turn blue.

    Note: NVDA automatically changes to focus mode when it enters a form. To move in and out of focus mode press Insert + Spacebar

  7. Use Tab and Shift + Tab to move through the form fields
  8. Check that everything that appears on screen is read out to the screen reader

Tables

Table Shortcuts

  • T = Next table
  • Control + Alt + → = Next cell
  • Control + Alt + ← = Previous cell
  • Control + Alt + ↓ = Next row
  • Control + Alt + ↑ = Previous row

Testing Tables

  1. Open the web page containing the form in Chrome
  2. Open NVDA
  3. Make sure the Focus Highlight add-on is enabled. A red outline indicates browse mode; a blue outline indicates focus mode.
  4. Make sure the Speech Viewer is visible
  5. Press T to move to the next table. NVDA will read out the number of rows and columns in the table
  6. Use Control + Alt + → to move across the top row. Make sure each heading is read out
  7. Use Control + Alt + ↓ to move to the next row. Make sure that the cell contents is read out
  8. Verify that the navigation order of the table makes sense
  9. Make sure that interactive items within the table, such as links and buttons, are read out

Links