Installing a Screen Reader

[00:00:00]
>> Jon Kuperman: So we'll jump into what I have dubbed exercise 0, in that it's not necessarily a full exercise. But I think it would be a good opportunity for everyone to get a little bit of time to get a screen reader installed, kind of set up and running. We will dive into some specific exercises for it later, but I just wanted to kind of cover this here.

[00:00:18]
So we've got this app, it's on my GitHub, github.com/jkup/learn-ally. And also, the app is deployed at learn-ally.netlify.app. I'll leave this up, but just to kind of show you what we'll be doing for this first section. We've got the website here and then we've got this screen reader setup guide.

[00:00:37]
And so hopefully, this will cover all of your use cases. Please reach out and let me know if it doesn't. But this provides free screen readers for every operating system. So for Mac, VoiceOver comes shipped automatically, and so all you'll need to do is enable it and turn it on.

[00:00:52]
For Windows, there's lots of great options, but NVDA is the free one that should be easy to use today. For Linux, we've got Orca. Again, tons of great options, but this one is great. And then for anyone who either can't or doesn't want to install something on their full application, you can also install ChromeVox, so you can use a screen reader built into your browser right there.

[00:01:14]
So ideally, what we'll do is just take a little bit of time, make sure that everyone can get a screen reader installed, and maybe just take it for a spin on this page. And then I have also provided a few helpful shortcuts for each one of the screen readers, just to make sure that you can kind of start navigating the website really well with it.

[00:01:34]
So let's take a little bit of time, get those installed, make sure everybody is okay with that, because we'll be using them for a lot of the exercises going forward. All right, cool, so yeah, hopefully everybody was able to get something installed and running on their computer. My sound is off, but just to give kind of a quick walkthrough.

[00:01:55]
So for me, I'm on a Mac, so I can kinda come here and I can do my CMD + F5 to turn VoiceOver on. And you can hide this, but I will just kinda use VoiceOver and we'll at least get this visual indicator, which will show us what the VoiceOver is reading.

[00:02:09]
You can kind of tab around through the website and see that it changes, link all the different things that it's going to say. And then I added some of these hotkeys so I can see something, what I use the most on VoiceOver is the rotor, the web rotor.

[00:02:21]
So I'll do Ctrl + Option + U and it'll open up. Let me move this. Control + Option + U and it'll open up this thing, where I can kind of browse through all the headings. So you can kind of see that within the screen reader. It's not just that it has the ability to read everything, but it also provides some really good back and forth.

[00:02:38]
Yeah, really quick ways to kind of move around so I could find the one that I want. Let's say I wanted Windows NVDA, I can hit Enter on it and now it'll kind of get me there and start reading through the different things, this section. So yeah, hopefully everybody was able to get that set up.

[00:02:51]
We will, in the first exercise, be doing kinda quite a bit of comparison between an inaccessible website and an accessible one. So it's very good to just kinda have this set up and ready to go.