Why Learn About Web Accessibility
Screen Readers: ChromeVox
We are introducing you to the ChromeVox screen reader early in the materials here so you have plenty of opportunity to practice using it. It will be a useful tool for understanding what creates barriers in web content, and it will be used throughout the units here to experience and understand barriers firsthand.
For day-to-day screen reader testing, ChromeVox (particularly, the ChromeVox plugin for the Chrome web browser) is our screen reader of choice because of its simple installation and configuration, its ability to work across computer platforms, and it is free and open source.
While a relatively small number of screen reader users currently use ChromeVox, it is a highly effective tool for developers when testing web content. Also, ChromeVox is tailored to work with elements of Google Drive, so even for users of other screen readers, ChromeVox may be preferable when working with Google Docs, Sheets, and Slides.
Toolkit: Visit the Chrome store while using the Chrome web browser to install the ChromeVox screen reader. It will be a key element of your Toolkit.
Key Point: Though we recommend using ChromeVox for activities in the units that follow, if you already use another screen reader regularly, you are free to use it if you prefer.
ChromeVox Installation
- Open the Chrome web browser.
- Type “ChromeVox” into the browser’s location bar and press the Enter key.
- In the search results that appear, ChromeVox should be the first. Follow that link to the Chrome Web Store.
- On the ChromeVox page in the store, click on the “Add to Chrome” link to start the installation.
- In the dialog that opens, click “Add to Chrome.”
- When the installation is complete, ChromeVox will announce it is ready, and a small dialog will open pointing out the ChromeVox icon added to the Chrome toolbar. (You’ll need speakers or headphones to hear ChromeVox.)
- Click on the ChromeVox icon in the Chrome toolbar, then choose Options.
- On the Options screen, click in the Modifier Key field, and set the key, typically by pressing the Alt key. In the key commands when you see the “ChromeVox” or “Cvox” prefix before a specific key, this is referring to the modifier key you set.
- If Alt conflicts with other key commands on your system, try using Ctrl, or Ctrl+Alt.
- You may also want to adjust the voice used by ChromeVox, on the Options page.
- You may also want to set the reading speed, by pressing Cvox + [ to speed up reading, and Cvox + ] to slow the rate.
Note: The Cvox key is held down while pressing other keys. For example, to turn ChromeVox on or off, press the Cvox key (e.g., Alt) and hold it, then quickly press the “A” key twice (i.e., Cvox + A + A).
The videos below show you how to install and begin using ChromeVox.
Video: Installing ChromeVox by The Chang School
Video: ChromeVox Demo by Google Open Online Education
ChromeVox and Associated Key Commands
Key Point: Download the ChromeVox Key Commands (Word), outlined in the table below. Print it or have it beside you when completing screen reader activities throughout the units that follow. Also, be sure you have the ChromeVox modifier key set up, or you are going to have difficulty with the activities.
*The ChromeVox modifier key (i.e., Cvox) is set in the ChromeVox Options. It is typically set to Alt, or Ctrl, or Alt + Ctrl.
Note: To stop reading, press the Ctrl key.
| Task | Task Description | Keyboard Command |
|---|---|---|
| Default Reading | When a web page loads, ChromeVox will read the element that takes focus on the page. Use the Cvox + arrow keys to read through content. Listen to the spoken output and note any inconsistencies from what one might expect to hear based on what is visible on the screen. | Cvox + up and down arrows |
| Tab Navigation | When a page has loaded, press the Tab key to navigate through operable elements of the page like links and forms. Listen to the output when these elements are in focus, and note any elements that are clickable but not focusable with the keyboard.
Also, listen for hidden elements such as bypass links or other elements that are not visible but are read aloud by ChromeVox. |
Tab, Shift Tab |
| Navigate through Headings | Step through all the headings on a page. Note whether all headings are announced as expected. Note the heading level announced. Are they sequenced to create semantic structure (i.e., nested in the proper order)? | Cvox + L + H
then up/down arrows |
| Navigate through Landmarks | Step through the landmarks, key navigation points on a page. Are all areas of the page contained in a landmarked region? Note any missing landmarks. | Cvox + L + ; (semi-colon)
then up/down arrows |
| List Links | List the links and navigate through them using the arrow keys, listen for meaningfulness, or listen for context when links are otherwise meaningless. | Cvox + L + L
then up/down arrows |
| Navigate through Forms | Navigate to forms on a page, then press the Tab or F keys to listen to each of the fields. Are fields announced effectively, including required fields? | Cvox + L + F
then up/down arrows |
| Navigate through Tables | Navigate to Tables on a page, press Enter to go to a table, press up/down arrow keys to move through cells in sequence (left to right, top to bottom), press Ctrl + Alt + arrow to move to adjacent cells, press Ctrl-Alt and 5 on the number pad to list column and row headers where applicable. Note whether header cells are read or not. Are Fieldset labels announced, where applicable? | Cvox + L + T
then up/down arrows then Enter to select Table Cvox + arrow to move within table Cvox +T > H to announce headers |
When you are navigating with ChromeVox, it will add its own highlighting around elements when they receive focus. Test for focus visibility (SC 2.4.7) when ChromeVox is not running.
For a complete list of key commands see the ChromeVox Options. Default commands are listed and can be changed if needed.
Helpful ChromeVox Resource
Video: Making Accessible Web Apps Using HTML5 and ChromeVox by Google Developers
