2.6: ChromeVox Screen Reader Install and Setup
- Page ID
- 15586
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
\( \newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\)
( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\id}{\mathrm{id}}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\kernel}{\mathrm{null}\,}\)
\( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\)
\( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\)
\( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\AA}{\unicode[.8,0]{x212B}}\)
\( \newcommand{\vectorA}[1]{\vec{#1}} % arrow\)
\( \newcommand{\vectorAt}[1]{\vec{\text{#1}}} % arrow\)
\( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vectorC}[1]{\textbf{#1}} \)
\( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)
\( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)
\( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
\(\newcommand{\avec}{\mathbf a}\) \(\newcommand{\bvec}{\mathbf b}\) \(\newcommand{\cvec}{\mathbf c}\) \(\newcommand{\dvec}{\mathbf d}\) \(\newcommand{\dtil}{\widetilde{\mathbf d}}\) \(\newcommand{\evec}{\mathbf e}\) \(\newcommand{\fvec}{\mathbf f}\) \(\newcommand{\nvec}{\mathbf n}\) \(\newcommand{\pvec}{\mathbf p}\) \(\newcommand{\qvec}{\mathbf q}\) \(\newcommand{\svec}{\mathbf s}\) \(\newcommand{\tvec}{\mathbf t}\) \(\newcommand{\uvec}{\mathbf u}\) \(\newcommand{\vvec}{\mathbf v}\) \(\newcommand{\wvec}{\mathbf w}\) \(\newcommand{\xvec}{\mathbf x}\) \(\newcommand{\yvec}{\mathbf y}\) \(\newcommand{\zvec}{\mathbf z}\) \(\newcommand{\rvec}{\mathbf r}\) \(\newcommand{\mvec}{\mathbf m}\) \(\newcommand{\zerovec}{\mathbf 0}\) \(\newcommand{\onevec}{\mathbf 1}\) \(\newcommand{\real}{\mathbb R}\) \(\newcommand{\twovec}[2]{\left[\begin{array}{r}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\ctwovec}[2]{\left[\begin{array}{c}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\threevec}[3]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\cthreevec}[3]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\fourvec}[4]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\cfourvec}[4]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\fivevec}[5]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\cfivevec}[5]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\mattwo}[4]{\left[\begin{array}{rr}#1 \amp #2 \\ #3 \amp #4 \\ \end{array}\right]}\) \(\newcommand{\laspan}[1]{\text{Span}\{#1\}}\) \(\newcommand{\bcal}{\cal B}\) \(\newcommand{\ccal}{\cal C}\) \(\newcommand{\scal}{\cal S}\) \(\newcommand{\wcal}{\cal W}\) \(\newcommand{\ecal}{\cal E}\) \(\newcommand{\coords}[2]{\left\{#1\right\}_{#2}}\) \(\newcommand{\gray}[1]{\color{gray}{#1}}\) \(\newcommand{\lgray}[1]{\color{lightgray}{#1}}\) \(\newcommand{\rank}{\operatorname{rank}}\) \(\newcommand{\row}{\text{Row}}\) \(\newcommand{\col}{\text{Col}}\) \(\renewcommand{\row}{\text{Row}}\) \(\newcommand{\nul}{\text{Nul}}\) \(\newcommand{\var}{\text{Var}}\) \(\newcommand{\corr}{\text{corr}}\) \(\newcommand{\len}[1]{\left|#1\right|}\) \(\newcommand{\bbar}{\overline{\bvec}}\) \(\newcommand{\bhat}{\widehat{\bvec}}\) \(\newcommand{\bperp}{\bvec^\perp}\) \(\newcommand{\xhat}{\widehat{\xvec}}\) \(\newcommand{\vhat}{\widehat{\vvec}}\) \(\newcommand{\uhat}{\widehat{\uvec}}\) \(\newcommand{\what}{\widehat{\wvec}}\) \(\newcommand{\Sighat}{\widehat{\Sigma}}\) \(\newcommand{\lt}{<}\) \(\newcommand{\gt}{>}\) \(\newcommand{\amp}{&}\) \(\definecolor{fillinmathshade}{gray}{0.9}\)We introduce you to ChromeVox early on, so you’ll have an opportunity to practice using the screen reader we will be using throughout the activities. It will be a key tool in your toolkit that you’ll use to test your work, and it will be the tool the instructors use when marking assignments.
Though there are other more popular screen readers, like JAWS and NVDA to name a couple, for day-to-day screen reader testing, ChromeVox (particularly the ChromeVox Plugin for the Chrome web browser) is our screen reader of choice because it is simple to install and configure, easy to use, free and open source, and works across computer platforms.
Another reason ChromeVox works well for accessibility testing is its good support for WAI-ARIA. WAI-ARIA is still a relatively new technology, and, as of mid-2018, it is still being supported inconsistently across available browsers and screen readers. When developing for the Web, do use WAI-ARIA as it is intended to be used as documented in the WAI-ARIA specification and test it with ChromeVox. You will still want to test with JAWS or perhaps NVDA for production testing, as these are more likely to be used by blind users. For the activities here, however, we will only be using ChromeVox.
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 features of Google Drive, so even for users of other screen readers, ChromeVox may be preferable when working with Google Docs, Sheets, and Slides, etc.
How to Set Up the ChromeVox Screen Reader
- Open the Chrome web browser (install Chrome, if needed).
- Type “Chromevox” into Chrome’s address bar, or into Google search.
- Follow the ChromeVox link to the Chrome Web Store (the first link in the search results).
- Click the “Add to Chrome” button.
- In the dialog box that opens, click “Add extension.”
- Now installed, find the ChromeVox icon near the top right of Chrome to review its options.
- In the Options, set the ChromeVox modifier key to Alt or Ctrl or both (referred to here as CVox).
- In the Options, choose your preferred voice from the Voices menu.
- Done, turn ChromeVox on or off by pressing and holding the modifier key then pressing the letter “A” twice (i.e., CVox + A + A).
If you would rather see ChromeVox installed, the video below describes how to install and begin using ChromeVox.
Video: Installing ChromeVox
ChromeVox Testing and Associated Key Commands
Key Point: Be sure you have the modifier key set in ChromeVox Options, or you are going to have difficulty with the activities.
*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 |
---|---|---|
Toggle ChromeVox On/Off | To turn ChromeVox on or off without having to go into the ChromeVox Settings | Cvox+A+A |
Stop Reading | Stop ChromeVox from reading | Ctrl |
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+TH to announce headers |