Screen Reader Exercise

[00:00:00]
>> Well, now that I've told you all this information, let's apply it, let's do some testing. So we have our first exercise, our first exercise is to try and navigate a screen reader. So here in class, I'll do this so that we can do it together, and I'm gonna turn on the screen reader, so you'll get to hear VoiceOver.

[00:00:23]
We have this Book A Trip form, mimicked after one on an airline website. And so this is built with React, I can change it from one-way to two-way, [LAUGH] a return trip. Pretty simple form, it has the default browser date pickers, so we can see how accessible the default date pickers are.

[00:00:47]
There's also this little children widget that has buttons to, if you were gonna fly with 12 kids. [LAUGH] I was figuring out what my maximum should be or, yeah, 12 children, you could really choose chaos and fly with 12 children. But this adult strapped down is a native HTML select element, so we can play with that.

[00:01:10]
And there's a couple images down here just to get us inspired for adventure travel of the North Cascades a couple of months ago and Hawaii, [SOUND] that just sound so nice, warmer weather. So let's open this up with VoiceOver. So I'm on a Mac to Mac computer, so to open up VoiceOver I will hold my Function key first.

[00:01:34]
If you have a desktop keyboard, you won't have a Function key, but on a Mac laptop, it would be function command F5.
>> Navigation, visited, link, heading level 1, Web Accessibility, V3, current item, visited, link, All Topics. Search documentation, search text field, blank, Cmd+K, link.
>> So at any time, a little bit of a navigation tip when you're running VoiceOver is that to get it to stop reading, you can press the Control key.

[00:02:02]
So especially when you're talking, [LAUGH] at the same time, it can be pretty helpful. You can also click on the page to kind of get to an area that you wanna test so you don't have to navigate through the whole thing. Cuz I want us to focus on this book of trip form, whereas there are a ton of other elements on the page for the slide materials.

[00:02:22]
So I'm gonna click closer to this form, I could even click on-
>> Level 1, link, Permalink for this section, main, you are currently on a link.
>> So my first key that I often use is the Tab key, let's hit Tab, see what happens.
>> One-Way, unchecked, checkbox, Book a Flight, group, checked, One-Way, check files.

[00:02:40]
>> If I hit the space bar, I can toggle that element, depending on what element it is, what type of role and keyboard accessibility it has.
>> Use miles, unchecked, checkbox.
>> And I can through these.
>> [INAUDIBLE] checked, Use miles, checkbox.
>> And so the Tab key, however, is not the only way to navigate.

[00:02:58]
So from that cheat sheet, I referenced myself this morning to remember, there are the VoiceOver keys which are Control and Option. And if I do Control-Option-Right Arrow, I can go to the next item, whatever that item happens to be.
>> From, you are currently on a text element, From edit text, You are to, you are currently on a text element, edit text, blank.

[00:03:22]
Departure Date, you are currently on a Departure Date, edit text. You are currently on an edit text, to enter the state field, press Control-Option-Shift-Down Arrow. 03, you are currently on a stepper, inside minus 2024, end of text-
>> So I can use Arrow keys, I can type, I can do all kinds of things in here.

[00:03:43]
So depending on what type of element it is, so if it's a text field, if it's an image, if it's a heading, it will announce that type of element, so that's relevant. If things are labeled or not, that will also be part of it, so this form field.

[00:03:59]
>> From, you are currently on a text element.
>> Is labeled. If I go down further to images.
>> Edit text, 01-
>> Then I'm gonna hit Tab to get there quickly.
>> Submit, level 1, link, visited, link, Other Assistive Technologies, Character Pallette, close button, Chrome, Screen, make your escape, a dirt path next to a small lake, with Fall colors of red, yellow, and green.

[00:04:21]
The sky is blue with wispy high clouds image, you are currently on the image.
>> So there's small text. So it's fun to navigate around, you can play with the screen reader, and then we'll come back. We were testing with VoiceOver on the Mac, there was one more part of it that I wanted to show you just before we get going.

[00:04:48]
So i'm gonna fire VoiceOver back up with function command F5.
>> Navigation, visited, link, heading level 1.
>> There is a feature in VoiceOver called the rotor that you should know about. It is a tool that I use quite often, so VoiceOver, I'd say I test it, maybe a couple times a week if I'm actively developing a user interface.

[00:05:12]
Maybe not every single time I go to test it, but I do test it regularly to checkout specific things if I'm working on a form or something that I want to know what's going on. So with the rotor, I can open it with the VoiceOver keys which are Control option and U.

[00:05:32]
>> Links menu on item All Topics, current-
>> So the the rotor is configurable in your VoiceOver utility, and it will list out everything that's on the page. So we're looking at links right now, this is showing everything on this whole workshop resources site or what's on the current page.

[00:05:51]
If I use the left or right arrow keys, I can go through different types of groups.
>> Landmarks menu, on item complimentary.
>> So the landmarks and I can arrow up or down to have it highlight those things. And then if I hit the enter key it would take me to that element.

[00:06:05]
>> Table of contents navigation, Form Controls menu on item search documentation, search text field, blank.
>> All the form controls.
>> Headings menu on item 1.
>> All the headings, so this one's pretty useful, which headings are on the page, what number do they have, so that one, two, those are the heading levels, so an h1 or an h2.

[00:06:26]
And it can be pretty useful to see what is VoiceOver picking up on our page. And so as developers, there's a bit of a learning curve, I would say. You could see I'm not super proficient with VoiceOver, but I do test it to become more familiar. I referenced those cheat sheets and I use the rotor.

[00:06:46]
It is super helpful to be able to look at things at a glance.
>> Buttons menu on item-
>> On your button.
>> Introduction, button, group.
>> So to get out of the rotor, I'll hit Escape.
>> Visited, link, heading level 1.
>> And then I can turn VoiceOver off.

[00:06:59]
>> You are currently on the link, VoiceOver off.
>> That little x, it's often the quickest way to turn it off. You can also use the same command of the function command F5 to turn it off. So the rotor, I wanted to show to you before we move on just because of what a helpful tool it is.

[00:07:15]
Sometimes it can be effective at communicating with your colleagues like, no, we really do need to make these changes. And if you can show them what's happening in the screen reader somehow that can be useful.