 Hey, buddy, what's up? It's Rob Dodson. Welcome back to the Alicast show. Today we're going to be continuing our series on assistive technology by looking at the screen reader that comes with the iPhone, which is called VoiceOver. So follow me right here to my device, and the first thing I'm going to do is go into the Settings menu and go down to General Settings. I'll find the Accessibility section. And inside of here, there's a bunch of options that we can turn on or off. We've got VoiceOver up there at the top. But before I go ahead and turn that on, I'm actually going to go down here to the bottom and find the Accessibility shortcut option. I'll turn that on, and we want to enable Switch Control and VoiceOver. We'll use Switch Control in a later episode, but VoiceOver, we'll use that one today. And what this Accessibility shortcut lets us do is triple tap the home button and then a little menu will pop up and allow us to turn VoiceOver on or off really quickly that way. So we don't have to keep going back into the Settings menu to toggle the state of it. So let's see. From there, we can switch over to our browser. And I've got a little dummy test page here that we can interact with to kind of like, you know, get our feet wet with VoiceOver. So the first thing we'll do is we'll triple tap the home button to bring up the Accessibility shortcut. And then we can enable VoiceOver, and as soon as I do that, this thing is going to start talking, so get ready. VoiceOver on. Safari. Reader. Button. Shows our hide Safari reader. Okay, so since we're using a touchscreen device, the way we're going to navigate in VoiceOver is entirely through gestures. Similar to the TalkBack screen reader on Android, if you're not familiar with all the gestures that come with the screen reader, you can just kind of explore by touch. So move your finger around the screen. Any sort of like important element that it lands on, it'll try to announce that. Now, anytime I'm using a screen reader, one of the first things I want to figure out is how to tell it to actually stop talking. So in the case of VoiceOver, you do a two-finger tap to tell it to chill out. So for instance, I've got a paragraph here, I can start reading it, and I can use two fingers to silence the screen reader. Over the last year, I've had a number of discussions with mid to large size... Right. Very useful, especially if you land on a whole bunch of content. Now again, it's a gesture-based screen reader, so the primary way that we're going to move around the page is by swiping. So we can swipe to the right or to the left to move from major container element to the next. So we'll do that. And if we want to scroll the entire page, we can do a three-finger swipe up or down. Now, unlike something like TalkBack, which is kind of doing like an animated scroll, as if you were like pulling on the scroll bar itself, in VoiceOver, it's going to do almost like a page-up, page-down action. So it'll move like the entire page at once without animating it. Page 1 of 24. Page 1 of 24. Page 2 of 24. Page 3 of 24. The last thing I want to do just in terms of like basics is show you how to click on something. So we'll find a link on the page, and then to click on it in VoiceOver, similar to TalkBack, we just do a double tap. Cool. So double tap to activate for links and things like that, buttons, whatever you interact with. All right, now one of the useful things that we've shown before on the desktop version of VoiceOver is this thing called the rotor. So the rotor lets you kind of like do some power user commands with the screen reader, if you will. And in the case of iOS VoiceOver, what it'll let us do is change the way that we navigate the page. So for instance, we can navigate by heading or by link. The way we do that is with a little twisting gesture, as if you're sort of like turning a knob. So we can see that here. Characters, actions, form controls, links, headings, 23 headings. So now it's in headings mode, and if we want to navigate by headings, we can just swipe up or down, and it'll move through the page exclusively using H1 through H6 tags. How to use Polymer with Webpack. Introduction, heading level, who is this for? Heading level 2. Now one of the things I showed off when we were looking at VoiceOver in the last episode were some of the quirks and limitations and gotchas that appear on mobile websites when you're using a screen reader. And we see a lot of those similar issues when we're working with VoiceOver. So I've got a little test page here. It's kind of your classic responsive web page, and we've got a hamburger menu. And if we open that, we'll see that there's some off-screen content. Right, so we've got this heading here. This is menu, and we've got some interactive elements. We've got anchor tags that are inside of this menu, and normally this is off-screen. So if I close this, let's see what happens when I try and just navigate the page using the screen reader. Right, so even though that content is off-screen, VoiceOver isn't quite sure what to do with it because it is still technically in the DOM. We haven't hidden it using CSS or anything like that, so we'll definitely still navigate through those elements. So in cases like that, you want to make sure that you're setting those elements to display none. That'll remove them from the accessibility tree and make sure that VoiceOver or TalkBack, whatever screen reader you're working with, doesn't announce them. And let's also look at some unique interactive controls. So I've got a slider down here, which I can focus. 65%, I've got one finger to adjust the value. Right, so you can hear the screen reader told me there to swipe up or down to adjust the value of this slider. So, up. 70%, 70%, 65%. Cool, so for the built-in control, it works really well with a screen reader. But as we saw with TalkBack, you know, if we're using sort of a custom ARIA control, we're trying to build our own range slider using roll-equal slider or something like that, then we're going to run into some issues. So I've got this div down here. And when I focus it, you'll hear it sort of announces the same behavior as the built-in slider. 50%, I just swipe up or down with one finger to adjust the value. Right, so it told me to swipe up or down to adjust the value. But the problem here is those accessibility events, that sort of increment and decrement slider event, those will not be passed through to my control. And there really isn't like a good way to handle those currently, not without something like the accessibility object model, which is the new standard that we're working on. So if you're building like a custom ARIA slider, you might want to include something like plus or minus buttons so you can increment or decrement those fields. That's a tip from the developer Patrick Lauk. He kind of sent my way on the Twitter. So thank you for that, Patrick. So yeah, that about covers it for today. If you have any questions, you can always leave them for me below down in the comments or 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.