Screen Reader Testing

Problem

• As a developer it can be difficult to know how individual web page elements are voiced by screen readers.
• Popular screen readers, such as JAWS and NVDA take quite a while to get used to.

Solution

• ChromeVox is a Google Chrome extension that allows visually impaired users to access web pages, especially those that use WAI-ARIA.
• ChromeVox is also very useful for developers when testing their pages.

Installation

• Open Google Chrome
• Go to the ChromeVox download page
• Click on 'Add to Chrome'
• ChromeVox will be installed as a Chrome extension
• Note: to turn ChromeVox off go to 'Settings' > 'Extensions' and then uncheck 'Enabled'

ChromeVox Modifier Keys

• Windows: Control + Alt
• Mac OS X: Control + Cmd (Note: this may not be set by default)
• ChromeBook: Shift + Search

Customising the Modifier Key

• Open the Chrome menu and select 'More Tools' > 'Extensions'
• Look for 'Screen Reader'
• If ChromeVox is currently running, turn it off by unchecking 'Enabled'
• Click on 'Details' and then turn  the screen reader on
• Click on 'Extension options'
• Under 'Modifier Keys',  set the ChromeVox modifier key
  • For Mac, a good choice is Control + Option, because this is the same as Voiceover
• Close the ChromeVox Extension options window

ChromeVox Keyboard Shortcuts

Navigation

• Control = Stop speaking the current text
• Tab = move to the next selectable item
• Shift + Tab = move to the next selectable item
• ChromeVox + Down = Navigate forwards
• ChromeVox + Up = Navigate backwards
• ChromeVox + Right = Navigate forward at a more detailed level
• ChromeVox + Left = Navigate backward at a more detailed level
• ChromeVox + Equals = Change navigation level to more detail
• ChromeVox + Minus = Change navigation level to less detail
• Enter = Perform default action on current item
• ChromeVox + Space = Click on current item
• ChromeVox + R = Start reading from current location

Jump Commands

• ChromeVox + N then H = Next heading
• ChromeVox + P then H = Previous heading
• ChromeVox + N then L = Next link
• ChromeVox + N then O = Next list
• ChromeVox + N then I = Next item
• ChromeVox + N then T = Next table
• ChromeVox + N then F = Next form
• ChromeVox + N then ; = Next landmark

Tables

• ChromeVox + \ = Activate table mode
• ChromeVox + Back space = Exit table mode
• ChromeVox + Down = Go to next table row
• ChromeVox + Up = Go to previous table row
• ChromeVox + Right = Go to next table column
• ChromeVox + Left = Go to previous table column
• ChromeVox + T then H = Announce headers of the current cell

Overview

• ChromeVox + L then F = Show a list of forms
• ChromeVox + L then H = Show a list of headings
• ChromeVox + L then ; = Show a list of landmarks
• ChromeVox + L then L = Show a list of links
• ChromeVox + L then T = Show a list of tables

Console Output

Developers familiar with Chrome DevTools might prefer to the see screen reader output in a Console, rather than relying on a voice.

To enable text to speech output within ChromeVox use the following shortcut

• ChromeVox + D then C = Enable TTS logging

To view text to speech output, open DevTools and click on Console.

Other Shortcuts

A full list of shortcuts is available in the ChromeVox options

• Open the Chrome menu and select 'More Tools' > 'Extensions'
• Look for 'Screen Reader'
• If ChromeVox is currently running, turn it off by unchecking 'Enabled'
• Click on 'Details' and then turn  the screen reader on
• Click on 'Extension options'