 Hey there, folks. Rob here. Welcome back to the show. So today, I wanted to talk a little bit about screen readers. Screen readers are super important for many of our users out there, but I know a lot of developers are not familiar with these pieces of technology. And that's kind of a bummer because screen readers are actually pretty easy to pick up. And if you're using a computer like a Mac, you've already got a screen reader built in for free. So what I wanted to do today was focus on the screen reader that comes with the Macintosh computer. And then in next episode, we'll look at some free screen reader options for Windows users. So on the Mac, the screen reader that we've got built in is called voiceover. And if you follow me over here to my laptop, I'm going to go to my system preferences. We're going to go to the accessibility setting right here. And then there's a tab. I can zoom in a little bit so you can see it. So there's this little tab over here for voiceover. And click on that. And there's a few options that we have to actually activate voiceover. We could go and just check this checkbox and our laptop would start talking. And we would be like, whoa, I don't know what's going on. Or we could go down here to voiceover training. Now, I highly recommend everyone take maybe about 20 minutes to go through this. I'm going to kind of give you an abbreviated version. So I'll turn the sound on my laptop. See, we'll zoom back out a little bit. We're going to open up voiceover training. And this is just going to guide us through some of the fundamentals of using the screen reader. Welcome back. Welcome back to the voiceover quick start. OK, so I'm just going to talk over this dude a little bit. Here, you know what, I'm going to mute you for a second. So when we open this up, it's going to be really, really big text. And that's because screen readers are often used by folks who might not be completely blind, but they might have low vision. So we want to make sure the text is large enough for them to read. And it's just going to present some instructions. It's about 22 little slides that you can click through. So it doesn't take long at all. And it's basically just going to walk you through some of the basic control keys for voiceover. Now I'm going to give you the cheat sheet version. When you turn voiceover on your Mac, really there's only a handful of keys that most developers are going to need to know. The first thing is this idea of the voiceover or the VO modifier key, which on the Macintosh is Control Alt. So not Command Alt, but Control Alt. So all throughout the instructions, you'll see it referencing things where it says, like, press VO dash right arrow. So that always means just press Control Alt right arrow. To navigate the page very easily, you can use Control Alt right arrow. That will just kind of move you around the screen. If you want to move by something like headings, which I'll demonstrate a bit later, you can use Control Alt Command H. And I'll just jump through the major headings in your document. And you can also use Control Alt spacebar to click on things. And really those three keys are going to get you pretty far. If you're just sort of testing and auditing your website to make sure it has some decent functionality, you can just use that handful of commands to get most of what you need. So let me show you an example of actually using this. We're going to go ahead to this little section here, which has a few controls down at the bottom. It's a little small. I can't really zoom in that easily on this, but bear with me here. And what I'm going to do is click the Start Practice button. And as soon as I do that, it's going to turn voiceover on my laptop. So I'm going to stop talking. And we'll just sort of follow what's going on on the screen. So turn volume on. Voiceover on voiceover, quick start. Move around the screen. Window, show all comments. Selected radio button. One of two has keyboard focus. OK, so it started saying a bunch of things. I'm actually going to hit the Control key. And any time you hit the Control key, that basically tells voiceover, just stop talking. Sometimes what it likes to do, if it's sort of sitting idling on the screen, it'll just sort of start talking again and remind you of where you are, which can be kind of annoying. So right now, what it's saying is that we are focused on this one radio button control. And we're going to use the VO keys, Control Alt, and the right arrow to move to the next control. Hide all comments, radio button, two or two. And we can keep hitting Control Alt, right arrow to move down to this section of settings. Settings, announce alert messages. Settings, uncheck speak selected text settings, uncheck checkbox. I'm just going to hit Control to tell it to be quiet. And now if I want to click on this checkbox, I can use the VO and space bar. Check speak selected text settings, checkbox. And when you do that, it's basically like a simulated mouse click. So if you have a click handler, for instance, it would get triggered by that Control Alt space key. You might have noticed that my screen reader was reading a little fast. If you want to change the rate that voiceover speaks at, you can hit Control Alt command up. Pitch 55%, 60%, 65% or down. 60%, 55%, 50%. You can also hit Control Alt left and right to sort of move through various other options. So volume intonation, 50% intonation. Voice Alex. You can change the speaker, right? So you can have Bruce or Fred. Cathy. Cathy. Vicky, Victoria. Okay. I usually stick with Alex. Alex, he's my man. So I think we've covered all the sort of the fun and middles of just sort of moving around. Why don't we try this on an actual website now? So I'm going to hit, ah, here you go. Good shortcut. Command F5 to turn voiceover off. Command F5 is also how you turn it on. Move around to the screen. Oh wait, sorry, I gotta get out of this tutorial. Command F5. Voiceover on system preferences. Access voiceover off. There we go. Turn it on and off. Command F5 is a very, very useful command. It's also one of those things which if you've ever hung out at the Apple Genius bar, people accidentally hit that all the time and bring their laptops to the Genius bar to be like, I don't know what's happening. They could stop. So Command F5, in case one of your relatives sits on their laptop or something and has a freak out at Christmas, Command F5. Okay, so let's go and actually look at an actual website. So I'm going to go to Wikipedia. Wikipedia has really, really nice accessibility. We're just going to look up Google itself, the company. And now there's a lot of information on this page and one way that you could imagine someone using a screen reader is they just turn it on and they just start moving laterally through everything. So let's try that and see what that's like. Voiceover on Google. Wikipedia. The free encyclopedia. HTML content. I'm going to hit control. There's a lot to stop talking. Oftentimes when you open a website, you need to hit control, alt, shift, down. Google. Wikipedia. The free encyclopedia. Voiceover, I would like to interact with this page right now. Otherwise, it's going to try and move you through the rest of the Mac UI, which you don't want. You want to actually interact with what's in Chrome. And now we're going to hit control, alt, right arrow, the VO, right arrow keys, to just move through all the content. Internal, link, image, pie, link. Slash, six, zero, PX, Wiki, underline, link. Wiki loves monuments. The world, link, image. Page, semi-protected, heading, level one, Google. Okay, so that was slow. I have not even gotten into the main meat of the article yet and I'm already kind of tired of clicking on this thing. And so what we found was through a recent survey conducted by Hayden Works or Hayden Pickering, I think it's his last name. Really cool developer who does a lot of cool accessibility work. He sent out a survey to ask screen reader users, how do you typically navigate the page? And the overwhelming response is most people initially when they first land on a page navigate by headings. So remember to do that, we hit control, alt, command, H. So let's see if this makes our experience a bit more efficient. Heading, level two, contents. Heading, level two, history. Heading, level three, financing. One, nine, heading, level three, growth. Okay, cool. So I feel like that was sort of just a more productive way to move through the document. One thing you might notice is sometimes as we're moving through a webpage, voiceover will not scroll the screen for us all the time if we're just like jumping around by heading. And so if you just hit control, alt, right arrow. March, one, nine, link. It'll start to kind of jump down to the text content itself. It actually, if you're using a screen reader, it kind of doesn't matter if it's not scrolling. But if you are a sighted user and you're trying to debug something, sometimes you have to fiddle with it a little bit to make it actually scroll and move how you want it to. Another really interesting thing that we can do here, and this is sort of like the Uber shortcut, is we can hit control, alt, U. And that's gonna open what's known as the rotor. And the rotor is a menu just full of options relating to the current thing that you're interacting with. So I'll hit control, alt, U. And I'll hit the right arrow and we can just flip through a bunch of different options for the page. All the tables, all the landmarks. So HTML5 landmark elements, things like main, article, aside. The reason why those elements are important is for things like this. It actually lets someone just jump directly to your navigation. All the links, all the headings, et cetera. So this is a really, really useful tool, the rotor, just to jump around kind of like a power user. Now the last thing that I wanna show off related to the screen reader is when the screen reader kind of misbehaves a little bit. Let's say I'm just writing some code. Maybe I'm writing some body copy. And I've got the word Udacity here. So I'll bump this up a little bit so it's easier to read. So I'm just gonna p-tag here with the word Udacity in it, okay? Let me preview this now in my browser and let's see what the screen reader actually announces. So we got the word Udacity there. We will flip on voiceover. Let's hear what it says. Voiceover on Chrome, HTTPS, interact with HTML content. Udacity, group, voiceover off. So you see, instead of saying Udacity, it said Udacity or some other weird amalgamation of that word. You'll oftentimes see this with a screen reader with sort of like complex words. It just tries its best, but it probably doesn't pronounce it as you would like it to. It's tempting to go in and try and correct the screen reader or work around this behavior. So maybe I might go in and replace the word Udacity or Udacity. I might use something like an ARIA label. ARIA label basically tells the screen reader what to say. And I might give it like some phonetic text, like Udacity. So let's see, let's see what that pronounces. Voiceover on Chrome, HTTPS, interact with HTML content. Udacity, group, voiceover off. Okay, so it was like a bit closer, but by the way, did you notice the on-screen text there inside the- Voiceover on Chrome, HTTPS, interact with HTML content. Udacity, group, voiceover off. Right, it actually like printed the words Udacity or whatever, that weird phonetic spelling. It's important to note that if you're working around screen reader pronunciation by adding phonetics and things like that, that might seem cool for someone using a screen reader, but if you have a user who's using a Braille reader, now the word Udacity for them is gonna be Udacity or whatever. It's gonna just be some gibberish. So in general, when the screen reader is acting up, you don't want to try and work around its behavior. Don't try and correct it. What we found from folks who rely on screen readers is that overwhelmingly, they prefer that you just like leave the quirks in place. They're used to the way that the tool works already. And so when you try and correct it, you can actually make the experience worse for other users of different kinds of assistive technology. Okay, so we covered a lot today. That about covers the basics of getting rolling with voiceover. In the next episode, I wanna talk about some free screen readers for Windows. And then I actually wanna move on to talking about mobile screen readers because accessibility on mobile is super, super, super important. And it's one of those areas that I definitely feel like it's underexplored. But if you have any questions on what we talked about today, please leave them for me down below in the comments or as always, you can hit me up on a social network of your choosing. That's it and thanks for watching.