Screen Reader Basics: NVDA — A11ycasts #09

[MUSIC PLAYING] ROB DODSON: Hey, everybody. What’s up? It’s Rob Dodson. Welcome back to
the A11ycasts show. So today, as
promised, we’re going to be doing an episode on
NVDA, the free screenreader for Windows. So to get started with
NVDA, follow me over here to my laptop, and I have already
gone over to 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. 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. COMPUTER: Welcome
to NVDA dialogue. Welcome to NVDA. ROB DODSON: So I’m going
to hit the Caps Lock key to tell it to chill
and stop talking for a sec. Similar to a
VoiceOver on the Mac, NVDA has kind of like
a special NVDA modifier key, which normally is
mapped to the Insert key. But this dialog
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 dialog, like always show the dialog when
it starts, or start NVDA when you open up Windows. But 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 those options. COMPUTER: Well, OK. [COMPUTER GARBLE] ROB DODSON: OK, 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 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 on the screenreader. So I’m on this page here. This page just has a few
headings, some paragraphs of text and an input field with
the sign up button next to it. So a simple button element. So we know that most
screenreader 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. COMPUTER: Second heading. Heading level 2. Third heading. Heading level 3. ROB DODSON: So the H
key moves us forward through the headings. Shift-H is going to
move us backwards. COMPUTER: Second
heading– third heading. Heading level 1. ROB DODSON: We can
also move by line by pressing the Up
and Down arrow keys. So if I hit the Down
arrow key, we’ll just move down in the
next paragraph of text. COMPUTER: The first paragraph
is full of introductory content. This is where– ROB DODSON: Right. We can also move by
individual character, too. And this is useful
for screenreader 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 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. COMPUTER: H-E- space F-I-R. ROB DODSON: Right. Pretty easy. Now what separates NVDA from
a screenreader like VoiceOver, is that NVDA is a
modal screenreader, meaning when you’re in
VoiceOver you’re kind of always in the same mode. You’re sort of always
browsing around and 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 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 screenreader
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. COMPUTER: And it can also
complete the [? low world ?] ROB DODSON: So you can see
that put me in this textfield. I can jump to the sign up
button by hitting it again. COMPUTER: Sign up button. ROB DODSON: And just like
we saw with headings, Shift-F is going to
move us backwards. COMPUTER: And it can also
complete [? the low ?] [? world. ?] ROB DODSON: 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 screenreader to enter forms or
focus mode yet. So to that, we’ll use the
NVDA key, which, remember, is Caps Lock, and the spacebar. [BEEP] And you hear that little tone,
that little sort of typewriter sound? That tells the screenreader
user that, hey, now you’re in forms mode. You can start typing
text kind of freeform. So I could say, hello world. COMPUTER: [STUTTERS LETTERS] ROB DODSON: And because I
have the Caps Lock key on, it’s typing in all caps. But you get the idea, right? You can type into the
textfield whenever you want. Now to exit forms
mode, we basically do the same thing with the
NVDA key and spacebar, or Caps Lock and
spacebar to get out. [BEEP] 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 screenreader to
enter application mode. And in that mode,
it is 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 sort of
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 a complex control. So I’m going to
find a tab panel. COMPUTER: Combo box. Tab handle. Two point– ROB DODSON: With these
complex elements, oftentimes the author
in “Practices Guide” provides an example
implementation. So if I scroll to the
bottom of the tab panel, it will give me an example
I can interact with. COMPUTER: [INAUDIBLE]
interface the direct– opening up the [? mumble ?] ROB DODSON: OK, so here’s
an example tab panel on the open Ajax site. I’ll scroll this a little
bit to make it easier to see. Right, that’s all in the frame. All right, so what
I’m going to do is I’m going to start
interacting with this control. COMPUTER: So
Crust Application. ROB DODSON: I just
click on it once. COMPUTER: Application. Tab control. Crust tab
selected one of four. ROB DODSON: And so it told
us it’s a tab control. It told us that it’s tab
selected one of four. And because we’re now
in application mode, even though it’s not
playing like 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, if we
hit the right arrow key. COMPUTER: Veggies
tab select. Carnivore tab. Delivery tab. ROB DODSON: Right, that’s
going through and selecting different tabs. I could also hit Up
and Down arrow keys. COMPUTER: Crust tab. Carnivore tab selected. ROB DODSON: 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. COMPUTER: Carnivore
property page. Select carnivore– ROB DODSON: And then we
can just tab through these and hit spacebar
to check or uncheck the checkboxes as needed. COMPUTER: Space. Ch– Space. Check. ROB DODSON: And then Shift-Tab
to get back to the tabs. COMPUTER: Tab control. Carnivore tab, Carnivore tab select. ROB DODSON: Right,
so far, so good. Let’s see, the last thing
that I want to show off is a really cool
and useful mode. I think it’s called
elements mode. So you hit Caps Lock and F7. 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 NVDA. So we can see a list
of links if we– COMPUTER: Filter [INAUDIBLE]. Edits Alt [INAUDIBLE]. ROB DODSON: Hit Tab and
get down to a filter field so we can filter down
to one particular link that we’re looking for. We can Shift-Tab to
go back to the top. COMPUTER: Three type
grouping links– ROB DODSON: Use the arrow
keys to move to, for instance, headings. COMPUTER: Headings radio
[? weapon ?] check Alt plus H. ROB DODSON: And then we can
use the Up and Down arrow keys to select one
of these headings. COMPUTER: Link
radio [? weapon ?] check alt. Headings. Radio review level one–
[? at mumble, ?] at mainland get [? mumbles. ?] ROB DODSON: Hit Enter,
and that will 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 NVDA,
that’s totally fine. Just kind of a quirk
of the screenreader, but it’s not something to be
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 NVDA. I’m going to include a couple
of links down at the bottom. One is to a WebM Guide that
has a whole bunch of shortcuts for NVDA. Kind of like a really
useful cheat sheet. The other one is to my friend
Marcy Sutton’s video, which goes a little
bit more in depth on NVDA and actually shows
how to navigate a real page on Wikipedia. So both of those
resources are super useful for getting started
and especially if you’re new to these screenreaders. 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. [MUSIC PLAYING]

Comments 10

Leave a Reply

Your email address will not be published. Required fields are marked *