A few months ago, I was in the market looking for a new laptop. My basic requirement included browsing the internet or for entertainment. I had two options either to go with a standard Windows laptop or to try something new with the Chrome Book.
In recent times, Chrome Books have been extremely popular because of their functionality they provide at an affordable price. The features available in Chrome Book are found in much expensive versions of windows laptop. As a result, Chrome Books have gained great popularity among students and people looking for a device to handle basic tasks.
I chose to get my hands on a Chrome Book as it was sufficient for the basic browsing, I intended to do on a laptop. Also, as a low vision person and an accessibility analyst I was quite curious to try out the accessibility features it offers.
The first thing I noticed while using a Chrome Book was the User Interfaces resemblance to Android. Being an erstwhile Android user, the UI felt much more familiar to me. The system was decently fast to get the job done the UI was par for the course. Overall, I was more than satisfied with the performance and functionality of the machine.
However, the accessibility analyst in me was yet curious to get a glimpse of the accessibility features the UI had to offer. Initially the features were a bit confusing but after tinkering around with the features and doing some research, I got hold of it.
Chromebook offers various accessibility features such as Screen reader- ChromeVox, High contrast mode, Text-to-speech, Live caption, Magnification and so on for different user groups. In this fast-paced digital world, web browsing has become an integral part of our daily life. Whether for work, study, entertainment, or staying connected, accessing the web efficiently and effectively is essential.
In this blog, we will explore how we can browse the web using Google Chrome with ChromeVox screen reader.
Enhancing Accessibility with ChromeVox
ChromeVox that is the screen reader available by default in any Chrome Book, was surprisingly responsive and feature packed. You can get going by simply using the shortcut i.e., “ctrl + Alt + Z”. Being an inbuilt software, it is well optimized with the UI making it easy to navigate the menus and access the internet. Some interesting features such as the options to select the details one wants to hear while navigating the pages, adjusting the pitch and so on just elevate the experience.
One of the features that enticed me was the fact that ChromeVox had different sound effects to help me understand the location of content on the web pages i.e., if content is present on the left side of the webpage, it gives out a different sound effect as compared to when the content is present to the right side. Using a pair of stereo earphones, the experience can be enhanced to a greater extent as one can recognize the direction from which ChromeVox speaks. Features like this make the overall experience of using screen readers more intuitive.
Keystrokes to access ChromeVox
| Keystroke | Action |
|---|---|
| Esc | To pause ChromeVox |
| Space | To resume ChromeVox |
| Press and hold Search + Shift > “[“(left bracket) | To make ChromeVox speak faster |
| Press and hold Search + Shift > “]”(right bracket) | To make ChromeVox speak slower |
| Press and hold Search + Shift > Up or Down arrow keys | To change the pitch of ChromeVox’s voice |
| Ctrl + F | Open the find bar |
Tip: ChromeVox can be used with other assistive technologies, such as screen magnifiers and switch devices.
One more interesting feature is that we can access Chromebook without depending on a keyboard, thanks to its touchscreen capability.
ChromeVox touch gestures
| Touch Gesture | Action |
|---|---|
| Swipe left or right | Move to the next or previous element |
| Tap twice | Select the current element |
| Tap and hold | Open a context menu for the current element |
| Swipe up or down | Scroll through the page |
| Three-finger tap | Open the ChromeVox menu |
| Four-finger tap | Speak the current element |
| Three-finger swipe up or down | Change the speech rate |
| Three-finger swipe left or right | Change the speech pitch |
Note: ChromeVox modifier key is the key that you press in combination with other keys to activate ChromeVox commands. The default ChromeVox modifier key is the Search key, but you can change it to another key if you prefer.
General Keystrokes
Before moving to the browsing keystrokes, let us explore some of the general keystrokes of ChromeVox:
Important: Depending on your keyboard, you can press the Search key or Launcher key for some shortcuts. Both keys work the same.
| Keystroke | Action |
|---|---|
| Search + Shift + Right Arrow or Launcher + Shift + Right Arrow | Next character |
| Search + Shift + Left Arrow or Launcher + Shift + Left Arrow | Previous character |
| Search + Ctrl + Shift + Right Arrow or Launcher + Ctrl + Shift + Right Arrow | Next word |
| Search + Ctrl + Shift + Left Arrow or Launcher + Ctrl + Shift + Left Arrow | Previous word |
| Search + Ctrl + Left Arrow or Launcher + Ctrl + Left Arrow | Go to top of page |
| Search + Ctrl + Right Arrow or Launcher + Ctrl + Right Arrow | Go to bottom of page |
| Search + Down Arrow or Launcher + Down Arrow | Next line |
| Search + Up Arrow or Launcher + Up Arrow | Previous line |
| Search + R or Launcher + R | Start reading from current location (read further content continuously) |
| Search +. (period) or Launcher +. (period) | Open the ChromeVox menu |
Browsing Keystrokes
Tip: To hear a description of your cursor’s current position on a page, press Search + K or press Launcher + K.
After having learnt about general keystrokes, let us learn about some browsing keystrokes:
| Keystroke | Action |
|---|---|
| Search + H or Launcher + H | Next heading |
| Search + Shift + H or Launcher + Shift + H | Previous heading |
| Search + B or Launcher + B | Next button |
| Search + Shift + B or Launcher + Shift + B | Previous button |
| Search + X or Launcher + X | Next checkbox |
| Search + Shift + X or Launcher + Shift + X | Previous checkbox |
| Search + C or Launcher + C | Next combo box |
| Search + Shift + C or Launcher + Shift + C | Previous combo box |
| Search + E or Launcher + E | Next editable text area |
| Search + Shift + E or Launcher + Shift + E | Previous editable text area |
| Search + F or Launcher + F | Next form control |
| Search + Shift + F or Launcher + Shift + F | Previous form control |
| Tab | Next focusable item |
| Shift + Tab | Previous focusable item |
| Search + T or Launcher + T | Next table |
| Search + Shift + T or Launcher + Shift + T | Previous table |
| Search + G or Launcher + G | Next graphic |
| Search + Shift + G or Launcher + Shift + G | Previous graphic |
| Search + ; or Launcher + ; | Next Landmark |
| Search + Shift + ; or Launcher + Shift + ; | Previous Landmark |
| Search + L or Launcher + L | Next link |
| Search + Shift + L or Launcher + Shift + L | Previous link |
| Ctrl + Alt + H | Read page title |
Tip: To learn more about a specific element on the screen, press and hold the ChromeVox modifier key and press the spacebar.
Keystrokes for reading table
Important: To start, make sure your cursor is on the table.
| Keystroke | Action |
|---|---|
| Search + Shift + T + H or Launcher + Shift + T + H | Read the headers of the current cell |
| Search + Shift + T + C or Launcher + Shift + T + C | Read the column header of the current cell |
| Search + Shift + T + R or Launcher + Shift + T + R | Read the row header of the current cell |
| Search + Shift + T + L or Launcher + Shift + T + L | Read the current table location |
| Ctrl + Alt + Left Arrow | Previous cell |
| Ctrl + Alt + Right Arro | Next cell |
| Ctrl + Alt + Up Arrow | Up one cell |
| Ctrl + Alt + Down Arrow | Down one cell |
| Ctrl + Alt + Shift + Up Arrow | Previous column |
| Ctrl + Alt + Shift + Down Arrow | Next column |
| Search + Alt + Shift + Left Arrow or Launcher + Alt + Shift + Left Arrow | First cell in the table |
| Search + Alt + Shift + Right Arrow or Launcher + Alt + Shift + Right Arrow | Last cell in the table |
| Search + Alt + Shift + Ctrl + Left Arrow or Launcher + Alt + Shift + Ctrl + Left Arrow | First cell in current row |
| Search + Alt + Shift + Ctrl + Right Arrow or Launcher + Alt + Shift + Ctrl + Right Arrow | Last cell in current row |
| Search + Alt + Shift + Ctrl + Up Arrow or Launcher + Alt + Shift + Ctrl + Up Arrow | First cell in current column |
| Search + Alt + Shift + Ctrl + Down Arrow or Launcher + Alt + Shift + Ctrl + Down Arrow | Last cell in current column |
Note: We can also customize the keyboard shortcuts for the actions by opening the ChromeVox Customize screen by pressing “Ctrl” + “Alt” + “Z”. Then, click on the “Keyboard Shortcuts” tab and find the action you want to change. Click on the keyboard shortcut and enter a new one.
You can learn more about the additional ChromeVox shortcuts by visiting, Use the built-in screen reader of Chromebook!
Now let us do a small task!
Let us navigate through Barrierbreak website and download SAAS Accessibility Toolkit:
- Open Google chrome browser.
- Press Ctrl + L to move focus on address bar.
- Type barrierbreak URL in address bar.
- Press Enter key to open the website.
- Press Ctrl + Alt + H to read the page title (to ensure that we are on correct page).
- Press Search or Launcher + H to jump on “SAAS Accessibility Toolkit” heading.
- Press down arrow to navigate to the “Download Now” button or press Search or Launcher + B to navigate to the “Download Now” button.
- Press Enter key to activate “Download Now” button.
- Now fill in the details such as “Name”, “Corporate Email”, “Company” and “Industry” in the form.
- Now press down arrow to navigate to the “Request toolkit” button or press Search or Launcher + B to navigate to the “Request toolkit” button.
- Press Enter key to activate “Request toolkit” button.
Your SAAS toolkit will be downloaded!
In ChromeVOX there are many keystrokes which we can use to save our time and complete our task quickly. So, let us explore them together.
Also, one more thing, we can inspect code with the screen reader. Let us see how it will work.
Inspecting elements with ChromeVox allows us to view web page’s structure and content in detail.
Here are the steps to use browsers inspect:
- Set the focus on that element for which you want to inspect code.
- Open the ChromeVox menu: Press Search +. (period) or Launcher +. (period).
- Select “Inspect Element”: Use the arrow keys to navigate to the option and press Enter.
ChromeVox will announce the element’s HTML code, providing insights into its structure, attributes, and styles. You can then use the arrow keys and Enter to explore different parts of the code. So, folks that is it! I thoroughly enjoyed sharing my knowledge with everyone in this blog. Being visually impaired I was intrigued by ChromeVox which I will be exploring more personally as I keep exploring Chromebook more. There is always so much more to explore and discover. Hope this blog helped you to learn more about Chrome Vox. So, keep exploring and keep wearing your intuitive hats! If you have any tips and tricks, do share them in the comment section.
This article by Jyoti Verma is a part of our BB Geek series where BarrierBreak team members share their expertise on accessibility and inclusion, drawing from their extensive experience in the field.