Google Chrome Screen Reader Basics

Making your website accessible to everyone, including those who rely on screen readers, is crucial. Google Chrome's built-in screen reader, ChromeVox, is a powerful tool for this purpose. It's easy to set up, works across multiple platforms, and integrates well with Chrome's developer tools. Here's what you need to know to get started:

What is ChromeVox? It's a screen reader built into Google Chrome that reads out the content on the screen.
Why use ChromeVox? It helps ensure your website is accessible to visually impaired users, is cross-platform compatible, and is integrated with Chrome's developer tools for easy accessibility testing.
Getting Started: Ensure you have Google Chrome installed, and use keyboard shortcuts like Ctrl+Alt+Z to activate ChromeVox.
Basic Navigation: Use modifier keys and basic commands to navigate through web content with ChromeVox.
Advanced Features: ChromeVox offers high contrast colors, braille support, and customizable voices and sounds to enhance accessibility.
Testing and Debugging: Use ChromeVox along with Chrome's accessibility panel and other tools to test and improve your site's accessibility.

By following these guidelines and utilizing ChromeVox, you can make your website more inclusive and accessible to all users.

Think of a screen reader as a helpful tool that reads out loud everything on a computer screen for people who can't see it well or at all. It can talk about the text, describe pictures, and even tell you about different buttons or menus. Screen readers can change how fast they talk and how they sound, so it's easier for users to understand. They help people use websites, fill out forms, and do lots of other online tasks by turning visual info into words or braille.

Why are Screen Readers Important for Developers?

For folks who build websites and apps, making sure everything works with screen readers is super important. Here’s why:

More people can use your stuff: Lots of people around the world need screen readers to use the internet. If your site works with these tools, you're helping millions more people access it.
It’s often required: There are rules about making the web easy for everyone to use. If you make sure your site is good with screen readers from the start, you won't have to go back and fix it later, saving time and money.
It shows you care: Testing your site with screen readers shows you want everyone to have a good experience. This makes users feel valued and builds trust.

Making your site screen reader friendly means everyone can get to your information and use your site just like anyone else. This is a big part of making the web a place for everyone.

Google Chrome's built-in screen reader, ChromeVox, is super helpful for web developers who want to make sure their websites can be used by everyone, including people who need screen readers. Here's why ChromeVox is a good choice:

Cross-Platform Compatibility

ChromeVox works on different operating systems like Windows, macOS, Linux, and ChromeOS without any extra setup
It's already on Chromebooks, so it's easy to start using
Because it works the same way on all these systems, it makes testing simpler

Integrated with Developer Tools

ChromeVox is part of Chrome's tools for checking how accessible a website is
It can spot problems like missing descriptions for images, colors that are hard to tell apart, and more
There's a feature that shows what ChromeVox will read out for any part of a webpage
This makes it easier to try out changes and see if they help right away

ChromeVox is a great tool for web developers because it's easy to use and helps find and fix accessibility issues fast. It works on lots of devices and is built into Chrome, so you don't need to install anything extra. This makes testing your site to ensure it's accessible to everyone a lot less of a hassle.

Prerequisites

Before you start using the Google Chrome screen reader, ChromeVox, make sure you have:

Google Chrome browser on your computer: Since ChromeVox is part of Chrome, just having the browser means you're almost ready.
Latest version of Chrome: Chrome updates itself automatically, but it's a good idea to check that you have the latest version.
A way to listen: ChromeVox talks to you, so you need speakers or headphones to hear what it says.

That's all you need! No extra software or add-ons. If you've got Chrome and can hear your computer, you're set to use ChromeVox. It's designed to be simple and works on any operating system with Chrome, like:

Windows
macOS
ChromeOS
Linux

You don't need different screen readers for each type of computer. Just open Chrome, press Ctrl+Alt+Z, and ChromeVox starts talking. This is great for quickly checking how websites work for people who use screen readers. Plus, it's handy if you switch between different computers for work.

Before you jump in, make sure your audio is working. After that, you're ready to explore how ChromeVox can help make websites more accessible to everyone.

Installation and Setup

Install ChromeVox Extension

Go to the Chrome Web Store and look up "ChromeVox".
Hit "Add to Chrome" to get the ChromeVox extension. This adds the screen reader to your browser.

Go to Chrome menu > Settings > Advanced > Accessibility.
Tick the "Enable screen reader" box. This switches on ChromeVox for your browser.

Once you've got the extension and turned on the screen reader in settings, ChromeVox will kick in by itself when you open Chrome.

Now, you can use keyboard shortcuts to make ChromeVox read out loud. Here are some you might use a lot:

Ctrl + Alt + Z - Switches ChromeVox on or off
Ctrl + Up/Down arrow - Reads the next/previous line
Ctrl + Left/Right arrow - Reads the next/previous word
Ctrl + Shift + Up/Down arrow - Reads the whole paragraph

Check out the full list of ChromeVox keyboard shortcuts for more ways to move around pages.

With ChromeVox ready to go, you can now see if websites are easy to use with a screen reader. Make sure everything on the page is spoken out loud, buttons and forms work right, and the order it reads things makes sense.

In the next part, we'll give you tips on what to watch for when checking out sites with ChromeVox.

To use ChromeVox, you'll need to press certain keys together. Think of these as shortcuts that help you tell ChromeVox what to do.

Modifier Keys

The key to using ChromeVox shortcuts is the Search key. On Windows computers, it's the key with the Windows logo, and on Macs, it's the Command key. When you press the Search key with other keys, you can make ChromeVox do different things.

Here are a few examples:

Search + Down arrow - Reads the next line of text
Search + Up arrow - Reads the line above
Search + Right arrow - Reads the next word
Search + Left arrow - Reads the word before

Navigating Page Content

To move through a webpage and hear what's on it, here are some basic moves:

To hear the next or previous line: Press Search + Down or Up arrow
For the next or previous word: Press Search + Right or Left arrow
To hear whole paragraphs: Press Ctrl + Down or Up arrow
To find headings: Press Search + the number 1 for the next heading, 2 for the previous one

You can change how fast ChromeVox talks and how high or low the voice sounds in its settings.

Navigating Page Landmarks

Websites are divided into different parts, like headers, the main part, and footers. These are called landmarks.

To move quickly to these parts, do this:

Search + ; - This shows a list of the website's parts
Arrow keys - Use these to pick a part, then press Enter to go there

For instance, if you press Search + ;, then the Down arrow two times, and Enter, you'll jump to the main part of the page.

Landmarks include things like the top banner, menus, search boxes, the main content, and the bottom footer.

Advanced Features

High Contrast Colors

ChromeVox has a feature that changes colors on websites to make them easier to see. This is really helpful for people who have trouble seeing certain colors or need more contrast to read comfortably.

To turn this feature on:

Press Search + S to open ChromeVox settings
Use the down arrow to find High contrast and press Enter
Pick a color theme that works best for you
Some common choices are black text on a white background, white text on black, yellow text on black, and the other way around
Hit Enter to apply your choice

Now, as you visit different websites, the colors will be bold and easier to read.

For people who make websites, it's good to check your site with these high contrast settings on. Make sure that:

There's a good amount of contrast between the text and the background
Things like underlines and borders are easy to see
Pictures and icons are clear and not too light

If anything's hard to see, you might need to adjust the colors, fonts, or styles to make everything stand out more.

Braille Support

ChromeVox can also work with braille displays, which let people read the text on a screen with their fingers. This makes the internet more accessible for more people.

Here's how to set it up:

Connect your braille display to your computer
Turn on the display
Go to ChromeVox settings (Search + S), then select Braille
Choose your display model
Make sure you can see text on the display as you go through websites

This is especially useful for finding problems like:

Missing descriptions for pictures
Links that don't clearly say where they go
Text that's too squished together

Fixing these issues helps everyone understand and enjoy your website better.

Customize Voices and Sounds

If you don't like how ChromeVox sounds, you can change its voice. Chrome has lots of voice options, including different languages and accents.

To pick a new voice:

Go to settings by pressing Search + S
Click on Speech > Voice
Choose a voice from the list that you like

You can also change how ChromeVox makes sounds when it reads websites:

Turn on beeps for punctuation marks
Play a sound when you move over items
Adjust how loud ChromeVox talks
Change how fast it speaks

With these settings, you can make ChromeVox work just right for you. And if you're making websites, trying out different voices and sounds can help you spot problems that might make it hard for some people to understand your site. Changing these settings as you test your site makes sure it's easy for everyone to use.

Testing and Debugging

When you're making websites, it's super important to check if they work well for everyone, including people who use screen readers like ChromeVox. Here's how to make sure your site is friendly for screen reader users:

Use ChromeVox to Experience Your Site

Try going through your site with ChromeVox turned on. Think about:

Does it talk about everything you can see, like pictures and videos?
Can you move around using headings, buttons, and links easily?
Are things like forms and controls easy to understand and use?
Can you do everything using just the keyboard?

Write down any problems you find, then look at those parts in your site's code to fix them.

Leverage the Accessibility Panel

Chrome has special tools for checking if a site is easy to use for everyone. Look for things like:

Forms that don't have labels
Text that's hard to read because there's not enough contrast
Images that don't have descriptions
Links that don't explain where they go
Headings that don't follow a good order

Fix these issues and use ChromeVox to check your fixes worked.

Emulate Vision Deficiencies

Chrome's tools can also pretend to have vision problems like color blindness to see if your site still works well. This helps make sure everyone can use your site, no matter how they see.

Use a Combination of Tools

ChromeVox is great for quick checks, but also try other screen readers like NVDA and VoiceOver to get a full picture. Each screen reader is a bit different.

Don't Rely Solely on Automated Tests

Tools that automatically check for problems are helpful, but they can't catch everything. It's also important to look at your site yourself to make sure it's really easy to use.

By carefully checking your site with ChromeVox, Chrome's tools, and other screen readers, you can make sure it's good for everyone to use.

Additional Resources

Here are some simple guides and tools to help you make your websites and apps easier for everyone to use:

Web Accessibility Checklist - This is a list of common issues that make websites hard to use for some people, and how you can fix them.
Chrome Accessibility Extensions - These are extra tools you can add to Chrome to help find and fix accessibility issues. Look for ones like aXe, WAVE, and Accessibility Insights.
Accessibility Features in Gmail - Find out how Gmail works with screen readers and what you should keep an eye on.
Accessibility in Google Docs - Learn how to make documents that are easy to read with screen readers.
Web Content Accessibility Guidelines (WCAG) - These are the rules for making websites that are easy for everyone to use.
The A11Y Project - A community-driven project that aims to make understanding web accessibility simpler.
A11ycasts by Rob Dodson - Short videos that explain different parts of web accessibility.

These resources should help you understand more about web accessibility and how to make sure your sites work well with tools like the ChromeVox screen reader. Remember, making the internet easy to use for everyone is important, and Chrome has some great built-in tools to help developers do just that.

Conclusion

It's really important to make websites and apps easy for everyone to use. This includes people who need screen readers because they have trouble seeing. By using tools like ChromeVox to check your website and fixing any problems, you can help everyone have a better time online.

Here's what to remember:

Screen readers, such as ChromeVox, read out loud the text on websites so people with vision problems can understand what's there.
Making sure your website works well with ChromeVox means more people can use it.
Chrome has special tools that help you spot and fix issues like missing picture descriptions or labels.
It's smart to test your site with different screen readers because they might pick up on different things.
Following rules for making websites easy to use, like the WCAG 2.1, helps make sure your site is friendly for everyone.
Solving problems with how easy it is to use your site not only helps people with disabilities but makes the site better for everyone.

Testing your site yourself, in addition to using automatic checks, is the best way to really understand how accessible it is. Starting with accessibility in mind from the beginning saves you time and lets you reach more people.

With careful testing and some updates, your websites can welcome everyone. If you have questions, feel free to ask in the comments!

To start or stop the Chrome screen reader (ChromeVox):

Go to your Google Account settings. You might need to log in.
On the left, click "Personal info."
Under "General preferences for the web," find Accessibility.
You can turn the Screen reader on or off here.

To turn on the TalkBack screen reader on Android devices:

Head to Settings and tap Accessibility (it might be under Voice Assistant or Accessibility Suite on some phones).
The experience can be different across devices - Google and Samsung devices usually have the best performance.

How do I get Google to read my screen?

If you want your Google Assistant to read a webpage out loud:

On your Android device, open a webpage in Chrome, the Google app, or Google News.
Say "Hey Google," then ask it to "Read this page" or "Read aloud."

What is ChromeVox and do I need it?

ChromeVox is a screen reader that's built into Chromebooks for free and can be added to the Chrome browser. It speaks the content on the screen to help people who have trouble seeing. If you're looking for a way to have your computer talk to you, ChromeVox is a straightforward option without needing extra software.

Google Chrome Screen Reader Basics