Accessibility Inspector

Good morning everyone. My name is Gary and I am an engineer on the Accessibility Team. Today, I'm excited to talk about a tool called Accessibility Inspector.

The Accessibility Inspector provides an easy way to find, diagnose, and fix accessibility issues within your app. In this presentation, we will be doing exactly that, using a sample app. Let's jump right into it.

So here this is my Peanut Butter Tracking App. It helps my fellow peanut butter lovers. Tracks their favor brand, rate, them and record details about them. Tapping on the particular cell will bring me to the Detail View for that particular brand. And in here, I can take photos of my favorite peanut butter. I could favorite it or I could buy it again and share with my friends.

Now I want to test for accessibility issues from my Detailed View but I'm not quite sure where to start. The Accessibility Inspector makes this daunting task easy. Let's start by opening the Accessibility Inspector. So first, I'll go over to Xcode and under the Xcode Menu you'll see Open Developer Tools.

And in here, you can find the Accessibility Inspector.

You might notice what seems to be a large tooltip. This is actually a new feature that we added for low vision user on the Mac. It is called Hover Text and it makes anything under the mouse cursor larger and sharper to see. And we'll be using it throughout our demo today. So now with Inspector open, I'm going to use the Target Selection Drop Down to select my iOS device. The Inspector has three main parts. First, the Inspector tab. Then the Audit tab. And the Settings tab. Let's focus on the Audit tab for now.

This is one of the easiest ways to help me find accessibility issues in my app. By pressing on the Run Audit button, you'll get a list of potential accessibility issues. So let's try that for our view. Immediately, you see that it found a bunch of issues. And clicking on the issue will highlight the problematic element in yellow. Let's start in the middle with Image name used in description. This issue seems to affect all three of our custom buttons. Assistive technologies like VoiceOver uses accessibility information such as a Label to help users interact and navigate with the UI in your view.

But how exactly do we provide such information to the assisting technologies? You can click on the Help button on the right to get a suggestion for what to do. So here it states that consider setting a human readable, localized accessibilityLabel. Now let's head back to our Inspector tab. Now I want to inspect for my custom buttons. And to do that, you'll press the Point Inspection button on the top. Now with my fingers down on the screen, I can move around and focus on any accessible element. Let's start with the Custom button.

Here under the Basic section, you'll see the Label property is set to the Image File Name.

This creates a poor experience for our users. And to help you get an idea of this experience, we added a new feature that will simulate a VoiceOver would say by pressing on the speaker button.

Camera.on.rectangle button. And I can use the Next button to jump to the next element. Sue.heart button. Cart.badge.plus button. So as we navigated over the buttons, we heard unhelpful descriptions. These descriptions didn't really tell us what the buttons do.

So let's jump into Code and add some meaningful Labels for Custom buttons.

To add a Label, we'll simply set the accessibility Label attribute under View. So for my Favorite button, I'll set it equal to the state of favorite. And for my Camera button, I'll simply set it to take a photo. And for my Buy button, I'll set it as Buy. And remember to properly localize your string.

So now let's head back to the Inspector to see our remaining issues.

Here it looks like there's a potentially inaccessible text.

If you're using sender UIKit or app key controls, then accessibility comes for free. However, in this case, we're drawing the brand name using CATextLayer, which means we're responsible for handling our own accessibility. Let's jump into Code to see how we can make this Custom text accessible.

So the first thing that I'll have to do is to let the assistive technologies know that this is an accessibility element and to do that, I'll simply set the isAccessibilityElement to true. Next, I'll have to give it a meaningful Label.

And in our case, we'll set it equal to the brandName and that's it. So let's jump back to the Inspector to see our final issue.

Here it looks like there's a contrast problem for our brandName. We can click on the Disclosure triangle to get a more detailed explanation. Here it shows a contrast ratio and the color we used to calculate it.

Displaying information in a clear and legible manner is crucial. But it looks like the contrast for our brand name is too poor for the users to pick out text. Let's click on the Help button. Here it says that the recommended contrast ratio should be above 3.0. But how do we achieve this ratio? The Accessibility Inspector has a helpful tool called the Color Contrast Calculator. This tool insures that the text and it's background meets the recommended contrast ratio. And we can find that tool by going to Menus, Windows, Show Color Contrast Calculator. And now I'll click on the Color Picker to select the light gray color that I used for the brand name. Here you see that the contrast ratio is 2.3 which is below the recommended 3.0 ratio. So now I'm going to use a slider to pick a color to satisfy the contrast ratio without compromising my original design. And this dark gray color looks just about right. Let's use that in our color.

So the first thing now I have to do is to add the darkGrayColor, then I'll set the foregroundColor for my textLayer to be the color that we just added.

Now for the moment of truth, let's run the app again to see how it works. While the app is running, I'm going to open the Inspector.

To verify that all of our changes works, I'm going to run the Audit test once more.

Great. It looks like all of the warnings are gone. Let's head over to the Inspector tab to see how VoiceOver would work on this view by pressing on the Auto Navigate button. Nutter Buddy button. Patty's creamy header. Patty's peanut butter jar image. Take a photo button. Favorite button. Buy button. Creamy bullet no-stir. This tastes great. And that's a much better experience.

These are just some of the ways of how the Accessibility Inspector can help you create a fantastic app experience. It is a powerful tool to help you find and fix accessibility issues and an easy way to get started with accessibility. I encourage you to spend a few minutes to audit for your own apps and to make sure that your app is accessible for everyone. Thank you.