[MUSIC PLAYING] ROB DODSON: 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 the
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. I'm going to go to the
Accessibility setting right here. And then there's a tab--
I can zoom in a little bit so you see it. So it'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 check box, and our laptop
would start talking. And we would be like, whoa, ah,
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-- 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. COMPUTER: "Welcome back. Welcome back to the
VoiceOver Quick Start." ROB DODSON: OK. So I'm going to talk over
this dude a little bit. Here, 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 then 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'll 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 they'll just jump
through the major headings in your document. And you can also use
Control-Alt, space bar, 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 the volume on. COMPUTER: "VoiceOver on
VoiceOver Quick Start, Move Around the
Screen, window, Show all Comments, selected,
radio button, 1 of 2 has keyboard, focus." ROB DODSON: OK. So it started saying
a bunch of things. I'm actually going to
hit the Control key. And anytime you hit the Control
key, that basically tells VoiceOver, just stop talking. Sometimes what it
likes to do if it's sitting idling on the screen,
it'll just 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. COMPUTER: "Hide all Comments,
radio button, 2 of 2." ROB DODSON: And we
can keep hitting Control-Alt, Right
Arrow, to move down to the section of Settings. COMPUTER: "Settings: Announce
alert messages Settings:, uncheck-- Speak
selected text Settings:, unchecked, checkbox." ROB DODSON: I'm
just going to hit Control to tell it to be quiet. Now if I want to click
on this checkbox, I can use the VO and space bar. COMPUTER: "Check Speak selected
text Settings:, checkbox." ROB DODSON: 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-- COMPUTER: "Pitch 55%, 60%, 65%." ROB DODSON: --or Down. COMPUTER: "60%, 55-- 50%." ROB DODSON: You can also hit
Control-Alt, Left and Right, to move through various
other options, so-- COMPUTER: "Volume 100%." ROB DODSON: --volume-- COMPUTER: "Intonation 50%" ROB DODSON: --intonation. COMPUTER: "Voice Alex." ROB DODSON: You can
change the speaker, right. So you can have-- COMPUTER: "Bruce." ROB DODSON: --Bruce, or-- COMPUTER: "Fred." ROB DODSON: --Fred-- COMPUTER: "Kathy." ROB DODSON: --Kathy. COMPUTER: "Vicky. Victoria." ROB DODSON: OK. I usually stick with-- [INTERPOSING VOICES] COMPUTER: "Alex." ROB DODSON: --with Alex. He's my man. So I think we've covered
all the fundamentals of just 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-- COMPUTER: "VoiceOver off." ROB DODSON: --to
turn VoiceOver off. Command-F5 is also
how you turn it on. COMPUTER: "Move
Around the Screen." ROB DODSON: Oh wait, sorry. I gotta get out of this
tutorial. [FRUSTRATED SOUND] Command-F5. COMPUTER: "VoiceOver
on, System Preferences, Accessi-- VoiceOver off." ROB DODSON: 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, make it 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. OK. 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. OK. 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. COMPUTER: "VoiceOver
on-- Google - Wikipedia, the free encyclopedia,
HTML content." ROB DODSON: I'm
gonna hit Control to tell it to stop talking. Oftentimes when you open
a website, you need to hit Control-Alt, Shift-Down COMPUTER: "Interact
with Google - Wikipedia, the free encycloped--" ROB DODSON: That
will tell 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. COMPUTER: "Internal,
link, Image Hide, link, slash 60px underline. Link-- Wiki Loves Monuments:
the worl-- link, image, Page semi-protected-- heading
level one, Google." ROB DODSON: OK. 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 is 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 responses--
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. COMPUTER: "Heading
level 2, Contents. Heading level 2, History. Heading level 3, Financing,
19-- heading level 3, Growth." ROB DODSON: OK, cool. So I feel like that was
a more productive way to move through the document. One thing you might
notice is sometimes as we're moving
through a web page, VoiceOver will not
scroll the screen for us all the time if we're just
jumping around by heading. And so if you just hit
Control-Alt, Right Arrow-- COMPUTER: "In March
199-- link, Palo Alto--" ROB DODSON: --it'll start to
jump down to the text content itself. And 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-- this is sort of like
the uber shortcut-- is we can hit
Control-Alt, U. And that's going to 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-- COMPUTER: "No items
in, Web Spots menu." ROB DODSON: --and I'll
hit the right arrow, and we can just flip through
a bunch of different options for the page. COMPUTER: "Tables menu." ROB DODSON: All the tables. COMPUTER: "Landmarks menu." ROB DODSON: All the landmarks. So HTML5 landmark elements--
things like main, article, aside-- the reason why those
elements are important is for things like this, that
actually let someone just jump directly to your navigation-- COMPUTER: "Window Spots menu. Links menu. Headings menu." ROB DODSON: --all the
links, all the headings etc. So this is a really,
really useful tool-- the rotor-- If you jump
around, kind of like a power user. Now the last thing
that I want to show off related to the screen reader
is when the screen reader 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've just got a <p> tag here
with the word "Udacity" in it. OK? 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. COMPUTER: "VoiceOver on
Chrome, https-- Interact with HTML content,
Udacity, group. VoiceOver off." ROB DODSON: So you see
instead of saying udacity, it said "uda-city," or some
other weird amalgamation of that word. You'll oftentimes see this
with the screen reader with sort of 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 "you-dahss-iht-tee." I might use something
like an aria-label. Aria-label basically tells
the screen reader what to say. And I might give it
some phonetic text, like "you dahss iht tee." So let's see, let's see what
that pronounces. COMPUTER: "VoiceOver on
Chrome, https-- Interact with HTML content, you
dahss iht tee, group." ROB DODSON: OK. So it was a bit closer. But by the way, did you notice
the on-screen text there inside the-- COMPUTER: "VoiceOver on
Chrome, htt-- Interact with HTML content, you
dahss iht tee, group. VoiceOver off." ROB DODSON: Right? It actually printed the
words, "you dahss iht tee," 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 going to be
"you-dahss-iht-tee," or whatever. It's going to 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 are 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. OK. So we've covered a lot today. That about covers the basics of
getting rolling with VoiceOver. In the next episode, I want
to talk about some free screen readers for Windows. And then I actually
want to move on to talking about
mobile screen readers, because accessibility
on mobile is super, super, super
important, and one of those areas that I definitely
feel like is 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. [MUSIC PLAYING]
Controls:
Dos:
altattrs on images (empty if unneccecary)Don'ts:
aria-labeloraria-labelledbyattrs unless it's a control or similar type (inline SVG image)