FREELessons: 9Length: 42 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 The ChromeVox Extension

Throughout this course, we will be using a screen reader extension for the Chrome browser called ChromeVox. In this lesson, I’ll introduce you to ChromeVox and show you where to find it.

Useful Links

2.2 The ChromeVox Extension

Hello and welcome back. In this lesson I want to introduce you to a Chrome extension called ChromeVox. And the ChromeVox extension for the Chrome browser is a screen reader extension. And I wanna use this extension throughout this course so that we can get an idea of what exactly it does and how it responds to our content. And we'll see a big difference in how it treats our default content before we add any accessibility to it, and then how it treats our content once we start adding things like ARIA roles and ARIA attributes and things like that. So if you do a search in Google for ChromeVox, you can find the page for this Chrome extension, and again, this is a Chrome extension. You might find others for other browsers, but this one is specific to Chrome. So we will be using Chrome throughout this course. And as you can see here, I've already added this one to Chrome, I just need to enable it. Now you might notice that it only has two and a half stars in the Chrome Store, but that's okay. For what we need it for in this course, it's gonna do the job just fine. The one thing I would encourage you to do is to get familiar with where you need to go in your browser to turn the extension off when you need to because it will just keep talking if you don't turn it off. So if you go to your menu over here on the right, go to More Tools and then your Extensions, you can enable and disable different extensions from that link. So that's where you're gonna go turn it off when you need to. And since I've got it open here in my window, it already gives me a link to enable it. So I'm going to click to enable that item. >> ChromeVox spoken beat. >> And then you can already hear it talking in the background. If I jump over to Google here, I did a search for weather. And I'll let you experiment with that a little bit on your own. I'm not gonna spend a whole lot of time going through this, but I would advise you to kind of get familiar, go to a couple websites. Get familiar with this extension and how it works, and also take a look at the source code of the page that you're looking at. Take a look at the markup and see how the screen reader reacts to different types of markup, how it reads different types of markup to the user. Now remember, screen readers are for visually impaired users, and so what the screen reader does is it reads it out loud to them. And if your content isn't marked up in an accessible way, then a screen reader might not know what to do with some of your content. And that's why it's really important to make your markup accessible. Now once you've got the ChromeVox extension installed, you can then come over to different parts of your website. >> Fort Worth, Texas. >> And as you click on different areas of the website, you'll hear the screen reader read to you the content for that section. You can also hit the Tab key to go from one part of the page to the next. And as a new piece of the page becomes highlighted, it reads it out loud to you. So if we move over to this precipitation button- >> Precipitation button. >> It reads the name of the button to us, which is precipitation, which is usually the text that's inside the button tags, and then it tells you that it's a button. So what I heard there, I don't know if you could hear it through my speakers, but it said precipitation button. So it lets you know what kind of element you're dealing with. So we're gonna be listening to this screen reader as we add this accessible markup to our code. And hopefully we'll notice a big difference in how the screen reader interprets our content. So thank you for watching, and I'll see you in the next lesson.

Back to the top