- Good afternoon, everybody.
Chris McMeeking here from Deque Systems.
I'm here to talk to you today
about UI adjustable trait.
This is based off of a presentation
I recently gave at Jennison Asuncion's Accessibility Camp
in San Francisco put on by LinkedIn and Microsoft.
It was a really great experience
and I got to demo what I think
is a really cool design pattern,
but I didn't really get to talk about
precisely how it's implemented.
So that's what I'm gonna dig through today,
and I'm also gonna show you that design pattern.
So let's start here with the accessibility inspector.
You'll notice I have this UIStepper Magic demo up,
and we have kind of two different approaches
to marking up what is
a basic segmenta ted accessibility step
where you have these increment and decrement buttons.
You're gonna buy tomatoes,
we have some tomatoes queued up.
You're gonna buy bananas,
we have one banana queued up.
And they're gonna be marked up differently.
And so, before I get into that,
I wanna show you a cool byproduct
of a way you can use the accessibility inspector.
So we go in here, and notice with this target icon.
And we're connected to our simulator.
We're dragging around and we are touching things,
and the accessibility inspector thing
is updated.
And we can click and we can lock it there, right.
So we're locked on this increment button, right.
And then we click here and we can do the touch
to explore thing again.
And so that's gonna simulate in voice over.
We have our phone in our hand
and we're just dragging our finger
around the screen.
That's what we're doing.
But a voice over user,
which could be a blind voice over user,
is probably not gonna use voice over like that.
Maybe occasionally they will to put focus
back on the screen
or put focus in the middle of the screen,
but, more often than not,
they're gonna use these swipe right,
swipe left gestures, right?
And we can actually simulate those too
with our arrow icons.
So I hit the right arrow
and we're gonna start tagging.
Notice we go from UIStepper Magic
to buy tomatoes to decrement
to increment to four tomatoes.
And I'm just touching those buttons
to emulate what a voice over user would do
by swiping right on their screen.
And so now what we're gonna do
is we're cheating.
We can see where this focus is going,
and we're not really forced
to rely on this information.
So what I'm gonna do
is I am going to put the simulator
in the background and force myself to rely
on this accessibility inspector information
and talk about what that information is
as we come across it.
Right, so buy tomatoes.
We're in that adjustable segmented control box,
and right now we're on buy tomatoes.
And so we swipe right, we click the right arrow,
we're on the decrement button.
So we have a label of decrement
and a trade up button.
Let's go forward one more increment button.
But we still don't know how many tomatoes we have.
How many tomatoes have we queued up at this point?
Do you remember from looking at the screen?
I don't even remember.
And so four tomatoes.
I was gonna say five actually.
So we have four tomatoes queued up right now.
How do we use this current interface
to go in and change the number of tomatoes
that we have?
So let's go back.
So we have the increment in decrement button,
and let's say that we want 10 tomatoes.
So I'm gonna use increment.
And then I have these actions down here.
I can scroll right and scroll left,
which in this case is actually
kind of a global action.
You could scroll right
and scroll left on anything.
But really, the action particular to this button
is just the activate,
which is gonna increment things, right?
So we want 10 so we wanna click this six times.
One, two, three, four, five, six.
And now remember, as a voice over user
I had to double tap that.
So if I'm incrementing these things,
the action for me is double tap.
So I had to double tap
and do this kind of.
I had to tap a total of 12 times.
That's frustrating, but not overly frustrating.
And look, they didn't even all go through.
I missed some of em.
Right, I only had eight tomatoes.
And to get that information,
I had to scroll forward and then scroll back.
And now I have to increment again.
I'm already getting frustrated by this process,
and imagine, if I want to do something
like 100 tomatoes or something,
how long and ridiculously frustrating
this process would be.
And this is a really simple layout here.
We're talking about incrementing
the number of tomatoes.
In practice, these layouts are gonna be
much, much more complicated than this.
So this is, it's accessible.
It meets WCAG accessibility criteria
in a hypothetical world
where WCAG applies to native mobile,
but it's a frustrating user experience, right?
So now, let's show you another way
to think of this,
because when we're looking at what's going on here,
basically we have two pieces of information
within this control.
We have the number of tomatoes that we have,
and then we have the fact that they can be incremented.
And right now we're storing those separately.
We're storing one in the decrement
and increment buttons and associating those
with tomatoes, and then we have
the number of tomatoes.
So what we could do
is we can wrap all this information together.
So let's go down and see.
Now notice here, remember that other segmented control
we had down at the bottom
where we set five bananas.
Look how much information we have here.
One bananas, five bananas.
We're wrapping those two labels together.
And it's adjustable.
The trade is adjustable.
We've lost the trade up button.
We don't have that anymore,
and we also don't focus those increment
and decrement controls separately anymore,
but what we do instead is we say,
hey, we have one banana, five bananas,
and it's adjustable.
And we've gained a couple of actions here.
We can increment and we can decrement.
And that information is gonna be a trait
to a voice over user.
They're gonna know that
and they're gonna know how to do that.
And so for them what adjustable means
is they gain access to these actions
where you can swipe up and swipe down
on a control instead of going
to those second increment and decrement controls.
And so what we could do is now to adjust those
we just hit increment,
and notice, look at this label's updating
every time.
So when I click increment,
I know how many bananas I have.
When I click decrement,
I know how many bananas I have
right away cause it's packed into the label
of the control I'm actually currently interacting with.
And so if I want 10 bananas,
I just go here,
and this is what this looks like.
So let's open up the simulator
and I'll bring it back up.
This is what it looks like.
Notice I'm wrapping all of this information together.
So let's look at the pieces of information
that we've associated.
Five bananas, we have some number of bananas
and we can increment and decrement them.
All of that information is portrayed to me
in one control, whereas, when we had that up here,
we had those all in separate pieces of information.
And actually look here.
When we're saying increment,
what are we incrementing?
We don't actually know the thing
that we are incrementing, which is confusing.
We don't know that we're incrementing bananas,
or maybe we're incrementing tomatoes.
If we get rid of this explanation in here,
this connecting paragraph,
we go right from one stepper to another.
And so is this number of tomatoes
to the left side of this stepper?
And then so this stepper.
Which one is it?
Is this tomatoes or is this bananas?
We don't know.
By wrapping all of this information together,
we have a really concise, collective piece of information.
So now, let's show you how to increment that.
So I go here.
I'm gonna minimize my inspector.
So look here.
This is my view.
I have it wrapped in this special
accessibility stepper class.
That's the important part here
is we have this layout
and it's wrapped in this special
accessibility stepper class.
And let's talk about the properties of that class.
My accessibility stepper class
has three different things that it's looking for.
It's looking for kind of like a primary label,
a secondary label, and then the tag of the stepper.
And so that's what we did
was we just assigned those tags
to those individual views.
And now we're fetching those individual views.
These are the nameLabel
and the hintLabel are UI labels.
And then the stepper is obviously a UIStepper.
The accessibility label is gonna be
the combination of the nameLabel
and the hintLabel.
Now I named those nameLabel and hintLabel for reasons.
The nameLabel is gonna be the thing
that requires absolutely the essential information,
and the hintLabel, we can either group it
in with the accessibility label,
or we can just let it be portrayed
by the hint itself.
It depends on how crucial that information is.
In this case,
notice that this is nine bananas, five bananas.
We have this association happening
where we know that we're buying bananas,
so I would argue that buy bananas
in this case could actually be just a hint,
but you could also append that
to the accessibility label.
Make sure all of the text within that view
is shared with somebody.
Our overarching layout is going to be
an accessibility element.
So this whole thing
is gonna be an accessibility element,
which is gonna keep the individual elements
in there from being focused.
And we're gonna focus that layout.
We're going to apply the trait of adjustable.
And then, that's gonna give us access
to these two functions, accessibility increment
and accessibility decrement,
and that's where
the important part of this is happening.
So anything that is adjustable
is gonna allow those swipe up
and swipe down gestures.
And these are the functions
that are gonna be called when that happens.
And that's it.
That's all you gotta do.
That's how you use
the UI accessibility adjustable trait,
and that's how you create movements.
Am I saying this is the way
you should do this every time?
No.
I'm saying that when you have
these simple things and when you have these ideas,
when you have these sensible groupings
of information, it's one of the design idioms
that you can work on.
And that is all I had for you today.
Thank you for listening,
and see you later.