{"id":147,"date":"2019-06-04T11:48:22","date_gmt":"2019-06-04T15:48:22","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/iwacc\/?post_type=chapter&p=147"},"modified":"2024-02-13T16:08:23","modified_gmt":"2024-02-13T21:08:23","slug":"chromevox-screen-reader","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/chromevox-screen-reader\/","title":{"raw":"Screen Readers: ChromeVox","rendered":"Screen Readers: ChromeVox"},"content":{"raw":"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.\r\n\r\nFor 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.\r\n\r\nWhile 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\u00a0Google Drive<\/a>, so even for users of other screen readers, ChromeVox may be preferable when working with Google Docs, Sheets, and Slides.\r\n
\r\n\r\nToolkit:<\/strong> Visit the Chrome store while using the Chrome web browser to install the\u00a0ChromeVox screen reader<\/a>. It will be a key element of your Toolkit.\r\n\r\n<\/div>\r\n
\r\n\r\nKey Point: <\/strong>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.\r\n\r\n<\/div>\r\n

ChromeVox Installation<\/h2>\r\n
    \r\n \t
  1. Open the Chrome web browser.<\/li>\r\n \t
  2. Type \u201cChromeVox\u201d into the browser\u2019<\/span>s location bar and press the Enter key.<\/li>\r\n \t
  3. In the search results that appear, ChromeVox should be the first. Follow that link to the Chrome Web Store.<\/li>\r\n \t
  4. On the ChromeVox page in the store, click on the \u201cAdd to Chrome\u201d link to start the installation.<\/li>\r\n \t
  5. In the dialog that opens, click \u201cAdd to Chrome.\u201d<\/li>\r\n \t
  6. 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\u2019<\/span>ll need speakers or headphones to hear ChromeVox.)<\/li>\r\n \t
  7. Click on the ChromeVox icon in the Chrome toolbar, then choose Options.<\/li>\r\n \t
  8. 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 \u201cChromeVox\u201d or \u201cCvox\u201d prefix before a specific key, this is referring to the modifier key you set.<\/li>\r\n \t
  9. If Alt conflicts with other key commands on your system, try using Ctrl, or Ctrl+Alt.<\/li>\r\n \t
  10. You may also want to adjust the voice used by ChromeVox, on the Options page.<\/li>\r\n \t
  11. You may also want to set the reading speed, by pressing Cvox + [ to speed up reading, and Cvox + ] to slow the rate.<\/li>\r\n<\/ol>\r\nNote:<\/strong> 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 \u201cA\u201d key twice (i.e., Cvox + A + A).\r\n\r\nThe videos below show you how to install and begin using ChromeVox.\r\n[h5p id=\"18\"]\r\n\r\nVideo: <\/strong>Installing ChromeVox<\/a> by The Chang School\r\n\r\nVideo:\u00a0<\/strong>ChromeVox Demo<\/a> by Google Open Online Education\r\n

    ChromeVox and Associated Key Commands<\/strong><\/h2>\r\n
    \r\n\r\nKey Point: <\/strong>Download the\u00a0<\/a>ChromeVox Key Commands<\/a> (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<\/strong> set up, or you are going to have difficulty with the activities.\r\n\r\n*The ChromeVox modifier key (i.e., Cvox) is set in the ChromeVox Options. It is typically set to Alt<\/strong>, or Ctrl, or Alt + Ctrl.\r\n\r\nNote: To stop reading, press the Ctrl key.<\/strong>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
    Task<\/th>\r\nTask Description<\/th>\r\nKeyboard Command<\/th>\r\n<\/tr>\r\n<\/thead>\r\n
    Default Reading<\/td>\r\nWhen 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.<\/td>\r\nCvox + up and down arrows<\/td>\r\n<\/tr>\r\n
    Tab Navigation<\/td>\r\nWhen 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.\r\n\r\nAlso, listen for hidden elements such as bypass links or other elements that are not visible but are read aloud by ChromeVox.<\/td>\r\nTab, Shift Tab<\/td>\r\n<\/tr>\r\n
    Navigate through Headings<\/td>\r\nStep 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)?<\/td>\r\nCvox + L + H\r\n\r\nthen up\/down arrows<\/td>\r\n<\/tr>\r\n
    Navigate through Landmarks<\/td>\r\nStep through the landmarks, key navigation points on a page. Are all areas of the page contained in a landmarked region? Note any missing landmarks.<\/td>\r\nCvox + L + ; (semi-colon)\r\n\r\nthen up\/down arrows<\/td>\r\n<\/tr>\r\n
    List Links<\/td>\r\nList the links and navigate through them using the arrow keys, listen for meaningfulness, or listen for context when links are otherwise meaningless.<\/td>\r\nCvox + L + L\r\n\r\nthen up\/down arrows<\/td>\r\n<\/tr>\r\n
    Navigate through Forms<\/td>\r\nNavigate 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?<\/td>\r\nCvox + L + F\r\n\r\nthen up\/down arrows<\/td>\r\n<\/tr>\r\n
    Navigate through Tables<\/td>\r\nNavigate 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?<\/td>\r\nCvox + L + T\r\n\r\nthen up\/down arrows\r\n\r\nthen Enter to select Table\r\n\r\nCvox + arrow to move within table\r\n\r\nCvox +T > H to announce headers<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\nWhen 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<\/strong>) when ChromeVox is not running.\r\n\r\nFor a complete list of key commands see the ChromeVox Options. Default commands are listed and can be changed if needed.\r\n

    Helpful ChromeVox Resource<\/strong><\/h2>\r\n[embed]https:\/\/youtu.be\/x18vEEfpK3g[\/embed]\r\n\r\nVideo:\u00a0<\/strong>Making Accessible Web Apps Using HTML5 and ChromeVox<\/a> by Google Developers<\/a>","rendered":"

    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.<\/p>\n

    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.<\/p>\n

    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\u00a0Google Drive<\/a>, so even for users of other screen readers, ChromeVox may be preferable when working with Google Docs, Sheets, and Slides.<\/p>\n

    \n

    Toolkit:<\/strong> Visit the Chrome store while using the Chrome web browser to install the\u00a0ChromeVox screen reader<\/a>. It will be a key element of your Toolkit.<\/p>\n<\/div>\n

    \n

    Key Point: <\/strong>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.<\/p>\n<\/div>\n

    ChromeVox Installation<\/h2>\n
      \n
    1. Open the Chrome web browser.<\/li>\n
    2. Type \u201cChromeVox\u201d into the browser\u2019<\/span>s location bar and press the Enter key.<\/li>\n
    3. In the search results that appear, ChromeVox should be the first. Follow that link to the Chrome Web Store.<\/li>\n
    4. On the ChromeVox page in the store, click on the \u201cAdd to Chrome\u201d link to start the installation.<\/li>\n
    5. In the dialog that opens, click \u201cAdd to Chrome.\u201d<\/li>\n
    6. 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\u2019<\/span>ll need speakers or headphones to hear ChromeVox.)<\/li>\n
    7. Click on the ChromeVox icon in the Chrome toolbar, then choose Options.<\/li>\n
    8. 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 \u201cChromeVox\u201d or \u201cCvox\u201d prefix before a specific key, this is referring to the modifier key you set.<\/li>\n
    9. If Alt conflicts with other key commands on your system, try using Ctrl, or Ctrl+Alt.<\/li>\n
    10. You may also want to adjust the voice used by ChromeVox, on the Options page.<\/li>\n
    11. You may also want to set the reading speed, by pressing Cvox + [ to speed up reading, and Cvox + ] to slow the rate.<\/li>\n<\/ol>\n

      Note:<\/strong> 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 \u201cA\u201d key twice (i.e., Cvox + A + A).<\/p>\n

      The videos below show you how to install and begin using ChromeVox.<\/p>\n

      \n
      <\/div>\n<\/div>\n

      Video: <\/strong>Installing ChromeVox<\/a> by The Chang School<\/p>\n

      Video:\u00a0<\/strong>ChromeVox Demo<\/a> by Google Open Online Education<\/p>\n

      ChromeVox and Associated Key Commands<\/strong><\/h2>\n
      \n

      Key Point: <\/strong>Download the\u00a0<\/a>ChromeVox Key Commands<\/a> (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<\/strong> set up, or you are going to have difficulty with the activities.<\/p>\n

      *The ChromeVox modifier key (i.e., Cvox) is set in the ChromeVox Options. It is typically set to Alt<\/strong>, or Ctrl, or Alt + Ctrl.<\/p>\n

      Note: To stop reading, press the Ctrl key.<\/strong><\/p>\n<\/div>\n\n\n\n\n\n\n\n\n\n\n\n
      Task<\/th>\nTask Description<\/th>\nKeyboard Command<\/th>\n<\/tr>\n<\/thead>\n
      Default Reading<\/td>\nWhen 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.<\/td>\nCvox + up and down arrows<\/td>\n<\/tr>\n
      Tab Navigation<\/td>\nWhen 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.<\/p>\n

      Also, listen for hidden elements such as bypass links or other elements that are not visible but are read aloud by ChromeVox.<\/td>\n

      		Tab, Shift Tab<\/td>\n<\/tr>\n
      Navigate through Headings<\/td>\nStep 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)?<\/td>\nCvox + L + H<\/p>\n

      then up\/down arrows<\/td>\n<\/tr>\n

      Navigate through Landmarks<\/td>\nStep through the landmarks, key navigation points on a page. Are all areas of the page contained in a landmarked region? Note any missing landmarks.<\/td>\nCvox + L + ; (semi-colon)<\/p>\n

      then up\/down arrows<\/td>\n<\/tr>\n

      List Links<\/td>\nList the links and navigate through them using the arrow keys, listen for meaningfulness, or listen for context when links are otherwise meaningless.<\/td>\nCvox + L + L<\/p>\n

      then up\/down arrows<\/td>\n<\/tr>\n

      Navigate through Forms<\/td>\nNavigate 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?<\/td>\nCvox + L + F<\/p>\n

      then up\/down arrows<\/td>\n<\/tr>\n

      Navigate through Tables<\/td>\nNavigate 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?<\/td>\nCvox + L + T<\/p>\n

      then up\/down arrows<\/p>\n

      then Enter to select Table<\/p>\n

      Cvox + arrow to move within table<\/p>\n

      Cvox +T > H to announce headers<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

      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<\/strong>) when ChromeVox is not running.<\/p>\n

      For a complete list of key commands see the ChromeVox Options. Default commands are listed and can be changed if needed.<\/p>\n

      Helpful ChromeVox Resource<\/strong><\/h2>\n