Screen Reader Commands & Interaction Modes

[00:00:00]
>> The screen reader modes are significant, like if you're testing, creating interactive widgets and you're not testing on Windows, you could be missing stuff that is just straight up broken. I've done it. I've been like, whoa, this works awesome on VoiceOver. And then I go over to Windows, wah, wah, it doesn't work.

[00:00:17]
So it's something to watch out for. So let's fire this up. We're actually going to navigate a page, and then our next example, we're gonna build in something that works with these modes. So kind of a brief overview is that Windows screen readers have interaction modes. Instead of just one mode all the time, like VoiceOver, they do things with key commands that are very hard to remember.

[00:00:48]
NVDA and JAWS have simpler key commands that function because they know what mode you're in. Like in this example, if I was on Windows, I could hit the H key to go from the heading to heading through headings when I'm in document mode or browse mode. That's kind of the default of, I'm reading.

[00:01:09]
But what happens if you want to type an H into an input, or a content editable region? You want that H to go through to the browser so it'll type it. So, in this field, if I type H on Windows and NVDA, the mode will actually change when I focus in that field, it'll do it automatically.

[00:01:29]
I don't have to do anything. Just know that the mode is changing. So let's actually go over to NVDA. So how I launch it, I'm on a Mac, I have it installed. I'm just gonna do command space, NVDA, hit Enter. There it is [SOUND]
>> Unknown.
>> Okay, hello, NVDA.

[00:01:53]
So I'm gonna go back to the page we were just on.
>> Screen slideshow exercise, web accessibility, V2 profile one. Here are some tips and commands for using various screen readers. A form example.
>> Okay, so at any time in either VoiceOver or NVDA, I can hit the control key on a Mac to get it to stop reading.

[00:02:14]
Kind of helpful. So I'm gonna hit the H key to go through the headings.
>> Main landmark screen reader commands and interaction modes heading level one. Windows screen reader interaction modes permalink for this section heading level two. A form example heading level three. Use role equals application with extreme caution permalink for this section heading level two.

[00:02:35]
>> So you see, you just keep hanging H in browse mode, it will just keep going through those headings. When we go back to a form input.
>> Document, main landmark. First name added Rainier McCheddarton blank.
>> That's my dog's name by the way, Rainier McCheddarton. I always try to put his name into every code base I work on.

[00:02:55]
But did you hear that sound, like if I go out of this again?
>> Interaction modes. Open first name edit Rainier McCheddarton blank.
>> So it kind of made a beep when it went into browse mode. And then when I went into forms mode or focus mode, it makes that kind of like cash register sound, I call it.

[00:03:13]
Those sound effects, it's kind of a beep when you go into document mode and a cash register sound as I like to call it when you go into forms mode or also called focus mode. Those sounds tell a user that they're going in and out of these modes.

[00:03:27]
You can also manually change the mode. If I accidentally get into the wrong thing or a widget isn't working the way I expected, as a user I could go NVDA plus space, which this is where you might want to map your keys to have caps lock, do the thing, I actually don't think I have it even mapped on here, so.

[00:03:51]
Yeah, I might not be able to manually do that right now. So, when I'm at home and I have my hardware keyboard, I have an insert key and I can easily do that. So those modes are irrelevant. And we can change what mode it's going into by what role things are.

[00:04:08]
So like input, did it automatically. If I'm on a paragraph or a div or something, it's just automatically going to browse. It'll be in document mode.
>> In a field screen reader.
>> So let's pause that for a second. So, there is a way to have the browser go automatically into focus mode, which I have found a necessary on occasion, but I can't give you like a big enough caution, [LAUGH] be very careful with this, it does exist.

[00:04:43]
So there's a role called application, and it will automatically put anything inside of that element with that role on it into focus mode. So if you're doing like a custom widget that's like it just won't work without this role. Maybe you could add it. I would recommend putting it behind like an edit mode or something so it's not there all the time because what happens, if everything's in application mode, I can't navigate by headings anymore automatically.

[00:05:12]
I mean, I could manually go back to document mode with that key as a user, but we wanna make this as seamless as possible. And anytime we take that functionality away, we have to replace it. So we don't really wanna have to write keyboard shortcuts for every feature in the screen reader, just so that we could have this widget work the way we want.

[00:05:30]
That would be misguided, I think. There's an article in here by Marco Zija about how to use the application role. What you definitely don't want to do is just slap it on the document. I like up on the HTML or body tag, I guess, body tag. You don't want to make whole pages, roles of applications.

[00:05:50]
I mean, maybe Google Drive does that, something that's really long lived web application where they really do backfill everything, all of those features that they took away. That's ambitious and maybe Google can do that. But they're probably testing a lot with users too. So, you know, it exists.

[00:06:10]
Just be careful with it.