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'