Skip to main content
Workforce LibreTexts

2.9: ChromeVox Screen Reader

  • Page ID
    15499
  • \( \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 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.

    Key Point: Though we recommend using ChromeVox for activities that follow, and as a tool that works well for screen reader testing while accessibility auditing, you are free to use other screen readers if you prefer.

    The videos below will help show you how to install and begin using ChromeVox.

    Video: Installing ChromeVox

    Thumbnail for the embedded element "Installing ChromeVox"

    A YouTube element has been excluded from this version of the text. You can view it online here: https://pressbooks.library.ryerson.ca/pwaa/?p=1242

    Video: ChromeVox Demo

    Thumbnail for the embedded element "ChromeVox demo"

    A YouTube element has been excluded from this version of the text. You can view it online here: https://pressbooks.library.ryerson.ca/pwaa/?p=1242

    © Google Open Online Education. Released under the terms of a Standard YouTube License. All rights reserved.

    ChromeVox Testing and Associated Key Commands

    Key Point: Download the ChromeVox Keyboard Commands [docx], outlined in the table below, print it, and have it beside you when completing the activity in this unit. Also be sure you have set the ChromeVox modifier key*, described in the following line, or you are going to have difficulty with the activity.

    * 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

    This page titled 2.9: ChromeVox Screen Reader is shared under a CC BY-SA license and was authored, remixed, and/or curated by Digital Education Strategies, The Chang School.