Check out a free preview of the full Website Accessibility, v2 course

The "Screen Readers" Lesson is part of the full, Website Accessibility, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Jon discusses what a screen reader is, how it works, what they help people do, some popular screen readers, and provides some links to get set up with a screen reader. Mac OS have built in screen readers which is demonstrated in this segment.

Preview
Close

Transcript from the "Screen Readers" Lesson

[00:00:00]
>> And then our next section is on screen readers. And what we're kind of trying to cover here is an understanding of what they are. I had to read about screen readers quite a lot when I was starting my experience, being a developer, and I literally for years had no idea what they really were.

[00:00:15]
I remember like reading CSS tricks, articles about screen readers, and thinking that They were like a type of iPad or something like that, that I just didn't know about. I didn't have or whatever. So yeah, I think the goal of this section is to learn what screen readers are.

[00:00:28]
Look at the diversity of screen readers because there are a lot of different ones and that provides a few issues. And then for anybody interested getting you set up with a screen reader on your computer, and just to mess around with it a little bit to get a better idea more empathy of what that experience is like.

[00:00:42]
So what are screen readers? There are software that convert digital text into synthesized speech. So again, it's software that you would open that will read aloud the content of your web browser, your mobile app, a desktop app, anything like that. So they're often built in either into the operating system or software that runs on an operating system level.

[00:01:03]
And they help folks that are blind, be able to parse and process and understand these apps. One thing that's really interesting about them as we get started is I often find when I was getting started that I had to really slow the voice down so I could kind of understand what was going on and If you ever get a chance to meet a user who uses a screen reader full time, it's amazingly impressive how quickly they listen to the audio cues, they're very much able to use the mobile app or desktop app at really blazing fast speeds because they've gotten so used to using the screen reader at a really fast level.

[00:01:36]
So the simplest form, there's something that you hit a web page, they'll read all the content to you. They also provide some other cool things that like some other cool features, which is you can listen to the website instead of all the text being read. You can have it read a list of all the links that are on the page or all the headings and then you can drill into a certain heading.

[00:01:55]
So they make it browsing the web a lot easier for big, long pages like a Wikipedia entry or something like that. You could just check all the links, check all the headings, find the one that you want dive into it. We're really getting on par with a mouse user at that point.

[00:02:09]
The one of the bummers for developers is there are quite a few screen readers as we can kinda see a breakdown here. Different ones work on different operating systems. I will say for sure that I would say like 90 to 95% of the experience is gonna be the same across all of the screen readers.

[00:02:28]
So as long as you make your site accessible for one, whichever one you're testing on, It'll work very well for all of them. As you get into more popular apps, for example, when I was doing accessibility on twitter.com, which has hundreds of millions of users, we would occasionally run into screen readers specific issues and even version specific so I'm on version 13 of jaws and this is broken.

[00:02:54]
One thing to keep in mind here again, just kind of empathizing with folks, if you are blind and you use your screen reader for everything on your laptop, right for all of your applications, folks don't update screen readers so often. One, they're kind of expensive. A lot of the good ones are and two, the stakes are really high.

[00:03:12]
If it messes things up, it can be very difficult to onboard again and so you will often find If you work on a very big app with a lot of users, you will often find that folks are often on very old versions of screen readers because it's working well for them and they don't wanna change it.

[00:03:26]
I don't wanna scare anyone away from accessibility development. About 90 95% of it will just get it working nice and easy. It'll work for everybody. If you do work on one of those big massive apps, you probably will eventually run into some issue that's like a specific version of a specific screenwriter because there are a lot of them.

[00:03:43]
And again, it's worth noting, while there is a Wuchang spec and an HTML spec, there isn't a screen reader spec in that sense. So it's sort of up to the individual companies, how they process that data, how they read it. So like an example bug that I've had years ago was when we made nested replies on Twitter.com, right, so you'd have like the tweet and then it would have little replies Certain older screen readers, it would read the entire parent tweet aloud before each reply, so if you said like hello and somebody said, hey, somebody else said hey there it would be like hello, hey, hello hey there hello.

[00:04:18]
It just keep reading that first one. So sometimes you'll run into really like kind of nitty gritty issues, but for the most part building these apps, once we get it working, it'll work for everybody. Jaws and NVDA are those browsers specific like specific Chrome or Firefox or are they system specific like Windows Mac, lit Linux, there are systems specific so they run on Windows NVDA is free.

[00:04:41]
I think jaws is quite expensive. So yeah, all of these, for the most part are gonna be system specific voiceover runs on Mac with the exception that Chrome box is a browser one. So I think that might be the only one that's browser, the restaurant system. So moving into some specific screen readers, just some recommendations for us to kind of get started today for anyone that wants to.

[00:05:03]
Mac comes with a built in screen reader. So if you want to enable it so you can go to your system preferences, click accessibility, click voiceover and then enable it here. So I'm gonna go ahead and click use and then it'll start working my sound is off but this this little gray area here is what will be read aloud, and then you can click the X at any time to turn it off.

[00:05:28]
So I'm gonna go ahead and turn it off for now. If you are not on Mac, you've got a couple options you've got NVDA, which is available for Windows is totally free and can be here. Otherwise, you can check out this Chrome extension which I have here, which is chrome boxes, screen reader.

[00:05:44]
It got lower ratings, maybe it's not as good as the system ones. But if you're like on Linux, or if you just don't want to go ahead and install something on Windows like this is super good enough for today. So you can just add it to Chrome, turn it on, it'll do the same kind of thing.

[00:06:00]
So for our exercise, which will be coming up in a minute, we'll take some time for anyone that's interested to get set up on a screen reader and I'll answer any questions if you run into them. But before we get into that exercise, I just kind of want to cover a few screen readers, specific things for us to be thinking about.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now