Hello and welcome. I'm James Vest, and I'm here to teach you today how learning VoiceOver can help make your app more usable for everyone. And here's how I'm going to do that. I'll tell you what VoiceOver is and why you should support VoiceOver and also how to use VoiceOver if you have never done it before and also how VoiceOver benefits your app.

So what is VoiceOver? I get some common answers like well VoiceOver is a screen reader. That's true, but VoiceOver doesn't just read the screen, or VoiceOver is for the visually impaired. It's true, but it's not just for the visually impaired. So if VoiceOver is not just for the visually impaired, and it's not just a screen reader, what is it? VoiceOver is an alternative way of using you app, and it uses gestures, a keyboard, or a Braille display to give a variety of users equal access to your experience, and it's built in to every Apple device.

Now think about that last point. It's kind of awesome. I mean that means that every person who uses your app has access to VoiceOver. But not every VoiceOver user has access to every app. And that's why you're here. That's why you are such an important role in this story because you must update your app for us to take advantage of VoiceOver. Now when I say updating your app or supporting VoiceOver, I'm not talking about creating or maintaining a alternative or simplified layout or tailored to a subsection of users. It's about allowing all users to access the experience that you created.

So why support VoiceOver? Well, supporting VoiceOver makes your app more inclusive. VoiceOver users are more likely to choose you app over other apps that don't support VoiceOver. And this is a great community, so they are more likely to in turn recommend your app to other VoiceOver users. But sadly, for many developers, those reasons are not enough, and I get it.

There's only so much time. There's only so many resources, and you want to make the best decisions to create the best experience for the most of your users. So that's why it's so important today that you realize that learning VoiceOver can help make your app more usable for everyone, not just VoiceOver users, for all users.

So I bet you're asking yourself, right? Can a screen reader do that? Yeah, absolutely. I mean look at some of the latest apps coming out, those larger texts. Those cleaner layouts. They're not just benefiting low vision users or users with cognitive needs. They benefit us all, and the same is true with VoiceOver.

So here's how VoiceOver could help you with your app. Well, testing with VoiceOver can give you a new perspective. Now it's easy to take for granted your app because it's your app. You know exactly what it does, what it's supposed to do, how it's supposed to do it. But we take a lot of those things for granted, and when I say testing with VoiceOver gives you a new perspective, it's getting a chance to experience your app in a new way.

That's because VoiceOver goes beyond the way your app location looks. I mean an app might look good, but that doesn't make it usable. So side-scrolling states, hover states, they can all give the allusion of straightforward, clean, easy-to-use interface. But testing with VoiceOver goes beyond that, and so it allows you to discover new challenges and insights, and finally, I believe VoiceOver gets really at the heart of what we do. As iOS developers, we pride ourselves on creating easy-to-use, easy-to-understand apps. Well those values are especially apparent when using VoiceOver.

So my question to you today is your app so easy to use you could use it with your eyes closed? And that's not a question just for testers. That's a question for designers, for developers. Anyone responsible for creating the best experience possible for our users. And the only way to answer that question is to start testing with VoiceOver, and that's what I'm here for today.

I'm going to give you some ways of being able to turn on VoiceOver and start using it. Figure out where you're at, where you could improve, and then I'll give you some things else to watch out for that might not only improve your VoiceOver experience but possibly the experience that all users get.

And here's where we're going to start. We need to know how to use VoiceOver. Now in the next slide, I'm going to show you how to enable VoiceOver in settings. What I don't cover in the next slide is how to navigate with VoiceOver, activate with VoiceOver, heck even turn VoiceOver off using VoiceOver. So if you're following along out there on your iOS device, you may want to wait. But I promise you, everyone in this room is going to have a chance to turn on VoiceOver before my presentation is done.

So how do we turn on VoiceOver? Well, it starts in settings, and we go to general. In general, I can open up the accessibility menu. It's a great list of all the features that we include on our iOS devices so that we can have equal access to our users.

And VoiceOver is right at the top of that list, but I discourage you from opening it there. I discourage you from going in and enabling VoiceOver because, again, we might not know enough about VoiceOver to turn it back off. So when I teach people how to use VoiceOver for the first time, I encourage you to go to the bottom of this list to the accessibility shortcut.

It's here inside of a list of options. If I just check VoiceOver, that means I can easily turn VoiceOver on when I want to test it and also turn VoiceOver back off when I'm not ready to test it or my phone goes to sleep or I get a phone. So just checking VoiceOver in this box I can turn it on by triple clicking the home button. Click, click, click. And if you have a brand new device that doesn't have a home button, well then you'd use the side button, click, click, click.

When VoiceOver is enabled, we see the VoiceOver cursor. It's a visual reinforcement of what VoiceOver is trying to describe, and that's the first objective when testing VoiceOver, is to make sure that these descriptions are accurate and complete. And the only way you're going to test every single element inside of your app is to navigate with VoiceOver, and here's how to do it. Navigating can be as easy as just reaching out and touching the screen. Dragging your finger across the screen, VoiceOver will just read whatever is under your finger.

But that's actually not really how a lot of people review their apps. I start at the top. I work through everything in read order to the very end. VoiceOver users accomplish using flick navigation, and that's taking my finger and putting it on the screen and then flicking to the right, flicking to the right.

Now if I went slow enough, it would just read under my finger, so you have to really give it a quick flick until your finger flies off the screen. And conversely, I could go back to the left, and I could go to the previous item or the next item.

And it's important that you also want to keep in mind the starting position of your VoiceOver cursor, because if will start in the middle of your page. Well, that would assume as a user that there isn't anything before it, and so you might be leaving your users without all the story. So, we have two ways to navigate, and we have no way to control how a user navigates. So you want to test both these ways to make sure they work as expected in your app.

Now while you're navigating your app, you may need to pause that output. So, if you ever need to have so stop speaking, just take two fingers and tap the screen. And if you make that peace sign again and tap the screen, VoiceOver will just pick up right where you left off.

Now, if you accidentally enabled VoiceOver earlier in settings when I said not to, don't worry. You're halfway to turning it back off. But there's one piece that's still missing, and that's activating. You know, we take for granted that if I see a button on the screen I just tap it and it opens, but with VoiceOver when I tap an element, it describes it to me, and it gives me the choice to decide.

Do I want to open this element or do I want to move to another? So, when I reach out and I hear a description of what I want to open, then I follow that up with a single finger, double tap, tap, tap. And the selected item will open. So to illustrate how navigating and activating with VoiceOver, well, I'd like to welcome to my stage my colleague, Ryan Dour, to the stage.

Thanks James. So you guys have all heard about how VoiceOver is used, but in order to really see this thing in action, we got to turn it on. So I'm going to go ahead here, and on this phone, I have an iPhone X, I'm going to triple click the side button. There we go.

Facetime.

Thanks Ryan. Now I just want to stop here and point out that using these steps alone you can actually start testing your app with VoiceOver. You can turn it on. You can navigate your app, and you can see how well it works but just with VoiceOver on. So now the other side of testing VoiceOver is about getting familiar with the expected result, and that means getting outside your app and starting to experience areas that already have a good VoiceOver experience. So here's how we do that.

Now if I needed to go home, well, I could press the home button. But on a new device, like iPhone X, we need to go home by taking our finger from the very bottom edge of your device and starting to slide it up. The first vibration I feel will go home, and if I keep dragging up, the second vibration I feel will open the app switcher. I can also repeat this gesture from the very top edge of my display and open things like the Navigation Center and the Control Center.

And when you're not testing your app, you can three-finger flick. It's basically the same as a one-finger flick to allow me to scroll or move between my home screens. But in this case, I'm using three fingers. So using three fingers back and forth, up and down, will allow me to get to those areas. So whether or not you're exploring other apps or going into Control Center or Notification Center, these areas are full of complex UI that's waiting to teach you the expected results when we focus the VoiceOver cursor on them.

Now another gesture you may need is called the two-finger scrub, and that's where I take that same two-finger tap from before, but instead of letting go, I scrub back and forth very quickly, almost like in a fast Z pattern, and that will allow me to get out of a window without having to navigate back to cancel buttons or back buttons. Or in the case of UI, where they don't even have close buttons, to quickly scrub back and forth and dismiss the window. So while we're busy navigating and exploring and learning about this great expected behavior, we also kind of need to know what we're listening for.

So when you open a newspaper, you receive a lot more visual information than just words on a page. Here's that same newspaper. If we fail to infer all of that additional information, like headings or images, so we need to explore and listen to headings and images, tabs and buttons, and make sure we're honoring that experience.

Now to demonstrate these initial gestures, here's Ryan Dour. Cool. Thanks James. So we're still here in our weather app, and I would actually like to go back to the home screen. This is an iPhone X, so in order to do that, I need to use our new home gesture, and that is going to be again, touching my finger at the bottom in the home [inaudible], and then sliding my finger up until I feel that first vibration to go home. VoiceOver will also tell me, if I haven't let go of the screen yet, that this is exactly what I'm going to do if I let go. Let's go ahead and check that out.

Thanks, Ryan. So when faced with a lot of information, a sided user may choose not to go through every single object in read order to the very end. No, instead we choose to pay attention to maybe a select group of elements, like these headings on this newspaper. VoiceOver's users can also navigate this way using the Rotor. And the Rotor is a VoiceOver feature that dynamically presents options that the user can adjust or navigate by.

A VoiceOver user can set the Rotor by making two fingers on the screen and turning it around a center point, almost like you're turning an invisible knob on screen. And as we adjust the rotor, it'll speak all the options that are supported within the view that we're focused in.

So in this case, we could turn that rotor and switch it to headings, and once it's set to headings, I'd be able to go to the next heading by taking a single finger and flicking down. Or, conversely, I could flick up with one finger, and that would go to the previous heading.

And here's why the Rotor matters to you as a developer. Because a Rotor only works if we as developers remember to include headings in our apps. So when your app doesn't support one of these rotor options, well then we're kind of taking a tool out of that user's toolbox to have a great experience in their app.

So I invite you to go back into settings, general, accessibility. Inside of the VoiceOver menu is a lot of great settings that VoiceOver users customize, and one of them is the Rotor settings. So review what we can support and make sure that we are honoring those in our apps. So here's Ryan Dour to demonstrate how the Rotor works.

I'm going to find out, but for me that is my experience. I don't get to see your app. I cants see your app. So for me I really need that question to actually be the most serious one you ask yourself. Now, keeping your eyes closed is a challenge. It's very difficult to keep it up, and also you might want to be looking at your computer, taking notes, and doing other things. So in order to do this, the most effective way I know possible, I encourage you to use the screen curtain.

The screen curtain blacks out your entire screen and puts you in my shoes. You have a chance to use your app the way I use it entirely, and there's no cheating here. That is the only interface you're going to get. Let's turn it on. So three-finger triple tap. Again, three fingers, three times.

Thanks Ryan. So now it's time to talk about how VoiceOver can benefit your app. Because you're ready. Today you can leave this area and go and test your app, and I would encourage you to test it like you normally would just with VoiceOver on. But I want you to pay attention to these additional insights that could make your app better for all users. So one, if something doesn't sound right, it may not read right either.

It's like when a writer reads something aloud that they wrote. It's just another way to check that your message is coming through, and it doesn't just look right, it actually sounds right as well. Two, if navigating with VoiceOver takes effort, it probably takes a lot of effort visually as well. So maybe it's time to add section headings or break up your content to allow users of your app to benefit from a cleaner, more straightforward visual and spoken experience.

Three, if your app sounds out of order, your content may be too. VoiceOver navigates your app in read order. So if you're navigating your app wondering where's the login? Well, likely is a lot of your audience asking the same question. There it is. So these issues can't hide from VoiceOver and neither should you. So let's turn it on. Are you guys ready? Come on, do you remember how? All right, let's review then, all right. So inside of settings, we're going to go to general. If you have an iOS device, feel free to take it out. Inside of general is accessibility.

Accessibility, we're going to ignore the very top of the screen, and we're going to go all the way to the bottom. If we can enable today the accessibility shortcut, not only are we going to have a chance to turn on VoiceOver, potentially for the very first time, but it's also a quick way to go back and turn it on again, back to show your colleagues. Turn it on again when you go back to your office or maybe when you're trying to make a case for trying to give more resource time to focus on VoiceOver.

So, if we've gone into settings, general, accessibility, and gone into the accessibility shortcut and checked VoiceOver, now we'll be able to turn on VoiceOver quickly with the home button. Click, click, click. Three clicks of the home button or on iPhone X, three clicks of the side button, click, click, click. Ready to activate VoiceOver. Let's do that now.

Yeah. And how does it feel, right? For a lot of us, it's brand new, and so we could have mixed feelings or uncertain feelings. This could be challenging, but I've never done anything worthwhile in my life that wasn't challenging. All right. So our next challenge will be turn VoiceOver back off. [laughter] Let's see if we can do that now. So with the home button, give it a triple click, click, click, click. Or with the side button on an iPhone X, click, click, click.

So, yes, I'm going to call you out individually now, and, but no, in review. VoiceOver is an alternative way of using your app. And you can navigate and activate elements based on just how they're labeled. And you can explore other apps to learn expected behavior. And then rediscover your app by hearing it to help identify other issues.

So here's some steps I want you to do as soon as you leave today. Just like Ryan suggested, I want you to close your eyes and test your app. So really experience this. Start identify issues that prevent users from getting the most out of your app. And then open your eyes and confirm that experience, because if you've ever wondered what a VoiceOver experience should be, just remember, the goal is just to match the experience everyone else gets. So compare the two and improve both based on what you learn.

And then make VoiceOver a part of your regular testing. Talk to your team. Make VoiceOver a part of your practice, not just so that you can continue to improve your experience with every release, but also to avoid losing the lessons that we gained here today. And lastly, go out there and teach others what you know because that's why I'm here today, because teaching is the best way I know how to master any subject.

Now helping you become a master, I also want to share these resources. Apple.com/accessibility is a great resource to get to know VoiceOver and other accessibility features and also have access to resources such as the guides, not only to reinforce what we learned today but build on it. And the same is true for developer.apple.com/ accessibility/ios.

And for more information, feel free to rewatch this video. Anytime we do something for the first time, it's hard to master, so watch it again. Practice with me until it feels comfortable and you're ready to share. And also, take advantage of these other opportunities. For instance, tomorrow starting at 7:00 in the morning until 7:30, you can sign up for accessibility design by appointment lab, and that will allow you to talk to an engineer like me, who can also help you go through your app, identify issues, and then you can take those issues to the accessibility lab and technology lab nine tomorrow at 11 a.m. so you can meet with other engineers and say, how do I start fixing some of these issues? How do I start improving that experience? And then, also go to deliver an exceptional accessibility experience. That's the book and presentation to the presentation that you watch today. We showed you how to start using VoiceOvers to identify issues, and tomorrow we'll take the stage again, and we'll start showing you how to resolve some of those issues. Thank you everyone.