TIMOTHY JORDAN: It's the morning of day two at Google I/O 2017.
Hi, I'm Timothy Jordan.
I'm your friendly developer advocate on the ground
here at Shoreline, and I'm going to be taking you
around all the sandbox areas, just like I was yesterday
so that you can have some of the experiences
as if you were here with me.
So let's go play around in the accessibility tent, which
is, of course, all about giving all of your users
a great experience with your service.
Let's check it out.
Hi, Rob, how you doing?
ROB: Good, how are you?
TIMOTHY JORDAN: I'm doing great.
So can you help me with the accessibility of my website?
ROB: Absolutely.
So what we're showing here is the new Audits 2.0
panel in DevTools.
So Audits 2.0 is basically taking the very popular
Lighthouse Chrome extension and integrating it directly
into DevTools.
So this will run a number of checks
on your site for various web app stuff, performance, best
practices, and, especially, accessibility.
So--
TIMOTHY JORDAN: All right, well, let's see what's wrong with it.
ROB: So here we've got a page that
has some form elements, which are missing
their associated labels.
And so if you want, you can actually go and, like,
click on these nodes right here, and that will actually take you
into the elements panel.
So here we're showing the new accessibility tab as well.
So you can inspect all sorts of information
about this node, this little input field right here.
TIMOTHY JORDAN: That's really cool.
ROB: Yeah.
TIMOTHY JORDAN: But it looks like it's not
going to read anything.
ROB: Right.
So right now, we don't have a label for this control,
so a screen reader is not going to know what to announce.
So we actually do have a label element right down here.
If you want, you can Control click on that.
Yep, and add an attribute.
You can type in 4 equals sub dash name.
Yep.
Hit Enter, and what that does, now
if you click on this input field again.
There you go.
Now you can see that you've associated
the label with the control.
It's got a nice name and a screen reader
will announce it and tell the user what
they're about to interact with.
TIMOTHY JORDAN: That's awesome!
ROB: Yeah!
TIMOTHY JORDAN: That was easy, Rob.
Thanks!
ROB: Absolutely.
TIMOTHY JORDAN: All right.
Well, we're going to go look at some more stuff.
ROB: Yeah.
TIMOTHY JORDAN: Thank you so much.
ROB: Absolutely.
Happy to help.
TIMOTHY JORDAN: All right, let's go check out this selfie stick
with my friend, Austin.
How you doing, Austin?
AUSTIN: Good.
TIMOTHY JORDAN: So you've got a selfie stick, which
is designed for people that selfie sticks usually
aren't well designed for.
AUSTIN: Exactly, yeah.
So we have a pixel here running TalkBack,
which is a native screen unit to Android,
and we have a feature that will give feedback
when it's in the camera mode to what's on the screen.
TIMOTHY JORDAN: Let me see what it says.
SELFIE VOICE: Camera two faces.
Shutter button two faces.
Double tap to activate.
Two-- Shutter Button is now enabled.
Photo taken.
Two faces.
AUSTIN: Yeah, it just took a selfie.
So it's giving audible feedback to what's
on the screen, if the face is centered,
and if it's good for selfie.
TIMOTHY JORDAN: All right, there's one more thing
that I want to check out.
It's really cool, and it's right over here.
Hi, Jessica.
So this is a spoon for people who have,
say, limited hand movement.
Right?
And I'm just going to go and try and use it,
if that's all right.
[CHUCKLES]
The trick is to try and dump the beans out.
I can't do it.
That's really cool!
Thank you so much.
I'll put that down.
[MUSIC PLAYING]