 Hey, everybody, what's up? It's Rob Dodson. Welcome back to The AliCast Show. So today, as promised, we're going to be doing an episode on NVDA, the free screen reader for Windows. So to get started with NVDA, follow me over here to my laptop. And I've already gone over to NVAccess.org. So this is the official website of NVDA. NVDA stands for Non-Visual Desktop Access. And what I want to do here is just go click on the Download button. And the nice thing about NVDA is that it is a free and open source project. And so they get their money through donations. And so if you have the means to and you like NVDA, you can consider donating before you download. So as you go through the download form, there's a little option here to do a donation if you would like. And then you can just click this Download button. And I've already gone ahead and downloaded NVDA. So I'm just kind of ready to rock. So what I'm going to do is fire it up using Control-Alt-N. Welcome to NVDA, dialogue. Welcome to NVDA. So I'm going to hit the Caps Lock key to tell it to chill and stop talking for a sec. Similar to voiceover on the Mac, NVDA has kind of like a special NVDA modifier key, which normally is mapped to the Insert key. But this dialogue also lets you map it to the Caps Lock key, which is quite helpful if you're on a laptop. There's a few other options in this dialogue, like always show the dialogue when it starts or start NVDA when you open up Windows. Again, to fire it up, you hit Control-Alt-N. That's how you start the thing. I'm going to hit OK, though, because I think I'm good on these options. And then again, I can hit Caps Lock whenever I want to tell NVDA to stop talking. So what I want to do is give you sort of like a brief tour of how to navigate the page using NVDA. So I've got a JS bin that I've created that just has a few simple controls on it. And this will get us familiar with some of the basics of moving around in the screen reader. So I'm on this page here. This page just has a few headings, some paragraphs of text, and an input field with a sign-up button next to it. So simple button element. So we know that most screen reader users, when they land on an unfamiliar document, are going to navigate by heading. And to do that in NVDA, we use the H key. So let's try that out. Second heading, heading level two. Third heading, heading level three. So the H key moves us forward through the headings. Shift H is going to move us backwards. Second heading, first heading, heading level one. We can also move by line by pressing the up and down arrow key. So if I hit the down arrow key, we'll just move down in the next paragraph text. The first paragraph is full of introductory content. This is well. Right. We can also move by individual character too. And this is useful for screen reader users when they land on a word that maybe the text-to-speech software pronounces poorly. So like the word Udacity, it'll probably pronounce it in kind of a weird way. And so they might navigate through the individual characters to see how it's actually spelled. So to do that, we just hit the left and right arrow keys. H-E-S-F-I-R. Right. Pretty easy. Now, what separates NVDA from a screen reader like voiceover is that NVDA is a modal screen reader, meaning when you're in voiceover, you're kind of always in the same mode. You're sort of always browsing around. You can kind of just interact with things whenever you want. And that's because voiceover uses kind of an elaborate set of keyboard shortcuts to move around the screen. With NVDA, because the screen or because the shortcuts are sort of more abbreviated, they're just single characters and things like that, it means that when we land on something like a form control, we need to tell the screen reader to switch into a special mode so we can interact with that form. So let's try that out. So I've got some form elements down here. If I want to jump to the next available form element on the page, I can hit the F key. Edit, auto, complete, hello world. So you can see that put me on this text field. I can jump to the sign up button by hitting it again. Sign up button. And just like we saw with headings, Shift F is going to move us backwards. Edit, auto, complete, hello world. Now, if I were to hit the H key to start typing in this field, what it's actually going to do, though, is just move me to the next heading, because we haven't told the screen reader to enter forms or focus mode yet. So to do that, we'll use the NVDA key, which, remember, is caps lock, and the space bar. And you hear that little tone, right, that little sort of typewriter sound? That tells the screen reader user that, hey, now you're in forms mode, and you can start typing text kind of free form. So I could say, hello world. W, T, F, T, five, five. And because I have the caps lock key on, it's typing in all caps. But you get the idea, right? You can type in in the text field whenever you want. Now, to exit forms mode, we basically do the same thing with the NVDA key and space bar, or caps lock and space bar, to get out. And again, it'll play a little tone to tell us that we're exiting forms mode. Now, the last thing I want to show you is application mode. So sometimes when you're interacting with a more complex controls, something like a tree or a tab panel or something like that, the ARIA roles that you have on that element instruct the screen reader to enter application mode. And in that mode, it's just going to pass through all the key presses that you hit right to the control. And that way, the control can handle all those keyboard events and implement its own handling. To give you an example, I'm going to go to the very useful ARIA authoring practices guide. And I'm going to find a pattern of sort of a complex control. So I'm going to find a tab panel. Combo box, tab panel, tab 2.0, tab tool tab. With these complex elements, oftentimes the authoring practices guide provides an example implementation. So if I scroll to the bottom of the tab panel, it'll give me an example I can interact with. Well, now it's the tabbed interface be direct. So open A, type, type, and numple tab. So here's an example tab panel on the OpenAJAX site. I'll scroll this a little bit to make it easier to see. That's all in frame. All right, so what I'm going to do is I'm going to start interacting with this control. And now the crop application tab, tab control, cross tab selected one of four. And so it told us it's a tab control. It told us that it's a tab selected one of four. And because we're now in application mode, even though it's not playing a special sound or anything like that, we can actually move through these elements using just the arrow keys on our keyboard. So for instance, we have the right arrow key. Right, that's going through and selecting different tabs. I could also hit up and down arrow keys. So far so good. And if I want to move into the contents of the tab panel itself, I can hit the tab key on my keyboard. And then we can just tab through these and hit spacebar to sort of check or uncheck the check boxes as needed. And then shift tab to get back to the tabs. Right, so far so good. Let's see, the last thing that I want to show off is kind of a really cool and useful mode. I think it's called like elements mode. So you hit caps lock and F seven. So what this is going to do is basically go through and if you remember from the voiceover tutorial, we talked about the rotor and how you can jump to headings and landmarks and links using the rotor. So you don't have to navigate through every single thing on the page manually. The elements list is basically the exact same thing for NBDA. So we can see a list of links. If we filter my edit alt plus F nine and get down to a filter field. So we could filter down to one particular link that we're looking for. We can shift tab to go back to the top. Tree type grouping links. Use the arrow keys to move to, for instance, headings. Headings radio button check alt plus H. And then we can use the up and down arrow keys to select one of these headings. Links radio button check alt. Headings radio button review. Open and level one and samples. And main and mock and samples. And that'll take us to that portion of the page. Now, similar to voiceover, sometimes you might not see the page scroll as you're navigating using NBDA. That's totally fine. It's just kind of a quirk of the screen reader, but it's not something to be sort of alarmed or freaked out about. So yeah, I think that about covers it. We've touched on a lot of the basics of working with NBDA. I'm going to include a couple links down at the bottom. One is to a web aim guide that has a whole bunch of shortcuts for NBDA, kind of like a really useful cheat sheet. The other one is to my friend, Marcy Sutton's egghead.io video, which goes a little bit more in-depth on NBDA and actually shows how to navigate a real page on Wikipedia. So both of those resources are super useful for getting started, especially if you're new to these screen readers. Otherwise, if you have any questions, you can always leave them for me down below in the comments or you can hit me up on a social network of your choosing. As always, thank you so much for watching and I'll see you next time.