Transcript
[ Music ]
>> Good morning everyone.
>> Good morning.
>> My name is Jordyn Castor and
I work here at Apple on the
Accessibility Design and Quality
Team.
I'm so excited to be here today.
Accessibility is built into our
hardware and software design
here at Apple.
We believe accessibility is a
human right and it's one of our
core values.
When I download an app, there's
an expectation that it just
works.
And I'm able to access all of
the buttons, controls, and
information using VoiceOver.
To be honest, I give an app a
first 30 second glance and if I
can't access any of the
functionality, I delete it.
Now, I really, really want to
use your applications.
I do. But, one of the most
crucial aspects to our built-in
features like VoiceOver, Speak
Screen, and Voice Control being
able to access the functionality
of your app is by the labeling
of your buttons, and text
fields, controls, and other
elements.
So today, I'm going to talk to
you about what an accessibility
label is, understanding the
context for writing great
labels, and best practices.
So, let's -- so what is an
accessibility label?
Well, the definition is pretty
short.
It's a localized string that
succinctly identifies the
accessibility element.
But let's unpack that a bit.
Identifies the accessibility
element.
What does that mean exactly?
It's a human readable, human
understandable label that gives
context and meaning for the
elements in your app.
And writing the code is pretty
simple too.
It's just getting or setting a
string.
But I get it.
It's actually pretty difficult
to accurately label the elements
in your app.
And as it turns out, that's all
about the context.
So that's what I'm going to help
you understand in the next few
minutes, is the importance of
understanding context.
So, let's dive right in.
What should the label of this
button be in your app?
Well, by default it might be
called plus.
And I might be able to figure
out what you meant.
But, let's look at that with a
bit more context.
What about in a nav bar across
from a back button?
This is pretty common in iOS
apps.
What should the label of this
button be here?
Add? Well, that might be just
dandy.
If I'm in a notes app and I hear
the word add, I'm going to know
that that's going to add a new
note.
But remember, these labels are
supposed to be succinct.
In a shopping context I might
need to clarify that a bit
further to distinguish this app
button from other actions like
Add to Favorites.
So, we might need to call that
Add to Cart.
And, what if there were dozens
of Add to Cart buttons?
In this context I might expect
VoiceOver to say, add peanut
butter to cart.
And hopefully it's not crunchy
peanut butter.
To bring it back to the original
example, what should the label
of this button be in your app?
Well, that all depends on the
context.
So, now let's talk about some
best practices when considering
what a label should be.
First and foremost, always,
always remember to add labels to
your apps.
This is crucial.
If a label's not added,
VoiceOver might speak something
like.
>> Button, button, button.
>> And for all I know guys, that
could be the Delete hard drive
Partition button and I wouldn't
want to press that.
If there is no label added and
if there's an image in the
button or if there's an image
within the button, VoiceOver
might speak something like --
>> Plus underscore icon
underscore outline underscore
hash nine, nine, nine, nine,
nine, nine, dot.
>> What? What does that even
mean?
So please, please guys, add
labels.
VoiceOver knows what the element
in your apps is based on the
element type.
So, it's redundant to add text
to your string like button or
tab.
And if you do, VoiceOver would
read out the label like --
>> Add button button.
>> Hearing this though --
>> Add button.
>> Makes much more sense.
Remember to update the label
when the UI changes.
So, if you have an add button --
>> Add button.
>> That changes to a delete
button --
>> Delete button.
>> Remember to update your UI so
that the label, so that
VoiceOver will speak the correct
state of the button.
When there's multiple buttons
with the same action like adding
an item to the cart, remember to
provide the context.
Here it's not clear what I'm
adding.
>> Add button.
>> Am I adding the peanut
butter, the bananas, or the
cookies?
Oh, I love cookies.
The context is much more clear
here.
>> Add peanut butter button.
>> Oh, we're adding the peanut
butter.
Hopefully it's not crunchy.
Avoid redundant labels.
So, if I'm in a music player the
context is clear that we're
dealing with songs.
So, having VoiceOver speak --
>> Play song button.
>> Or next song, is unnecessary.
I'd much rather hear VoiceOver
speak --
>> Play button.
>> Just the word play.
It's also great to add labels to
your animations, such as your
spinners.
So that VoiceOver will let me
know that the content in your
app is --
>> Loading.
That's really important.
So, this --
>> Delete items from the current
folder and add it to the trash
button.
>> That is too verbose.
Remember, we want these labels
to be as succinct as possible.
And, the context really makes
things in your app clear.
So, this --
>> Delete button.
>> Would be just fine.
But verbosity isn't always a bad
thing though.
Oftentimes verbose descriptions
when in appropriate situations
is really what makes your app
fun and memorable.
The developers of the Cookie
Monster sticker packs have added
verbose but really fun labels to
their stickers.
So now, VoiceOver speaks --
>> Me happy face eat small
cookie, om nom nom button.
>> I love that.
That is so awesome.
These Cookie Monster stickers
are intended to be fun and just
make a person smile.
Whether you can see the sticker
or you hear the label.
So, let's review.
Remember to add labels so that
VoiceOver doesn't speak "button,
button, button."
Don't include the element type
in your label because VoiceOver
gathers that info already.
So, hearing add button button is
unnecessary.
Update the labels when your UI
changes.
So, when you have that add
button that changes to a delete
button, remember to update your
label so VoiceOver reads the
correct state of the button.
Avoid redundancy like play song,
next song, previous song.
In a music player, remember to
provide enough context so I know
whether I'm adding peanut
butter, bananas, or those
awesome cookies to my cart.
Add labels to your meaningful
animations like spinners, so
that VoiceOver will read that
the content in your app is
loading or in progress.
Avoid verbose labels like delete
current item from the trash and
move it.
Unless you have a great reason
like those awesome Cookie
Monster stickers.
I really hope you've enjoyed
learning about best practices
for labeling your apps.
But if you're ever curious what
your app would sound like to a
VoiceOver user, I really
encourage you to turn it on and
swipe around.
It's really a great opportunity
to improve your app for
everyone.
Thank you so much.
[ Applause ]