WWDC2019 Session 257

Transcript

>> 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 [Inaudible].
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.
[ Applause ]
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 [Inaudible] 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.
[ Applause ]
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.
[ Applause ]
Thank you.