1. Aspects of Web Accessibility Auditing
ChromeVox Screen Reader
We will introduce you to ChromeVox, the screen reader we will be using, early on, so you have plenty of opportunity to practice using it. It will be a key tool used in auditing the accessibility of web content, and will be used in the activity for this unit.
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, ability to work across computer platforms, and the fact that it’s free and open source.
Technical: One reason ChromeVox works well for accessibility testing is its good support for ARIA. We will cover ARIA in greater detail in the unit Other Accessibility Standards. ARIA is still a relatively new technology, and as of late 2019, it is still being supported inconsistently across available screen readers. When developing for the Web, do use ARIA as it is intended to be used as documented in the ARIA Specification, and test it with ChromeVox.
You will still want to test with JAWS or perhaps NVDA, as these are most likely to be used by blind users. You may, however, find that what works in ChromeVox does not work with the other screen readers. So, for the time being, it may be necessary to provide workarounds when developing custom web elements, so they will work across technologies, with the assumption that these other technologies will catch up eventually.
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 compiling 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.
The videos below will help show you how to install and begin using ChromeVox.
Video: Installing ChromeVox
Video: ChromeVox Demo
© Google Open Online Education. Released under the terms of a Standard YouTube License. All rights reserved.
ChromeVox Testing and Associated Key Commands
* The ChromeVox modifier key (i.e., Cvox) is set in Chrome’s Settings > Extensions > ChromeVox Options, typically set to Alt or Ctrl.
| Task | Task Description | Keyboard Command |
|---|---|---|
| Default Reading | When a webpage 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 element 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 +TH to announce headers |
