MARIKO KOSAKA: Hello, I'm Mariko
from Chrome's web developer
ecosystem team.
I'm part of a small
team that build
a web application like Squoosh
and a web game like Proxx.
So whenever we were
starting these project,
we started with design and
think about responsive design.
Think about desktop, and how it
looks like on the smartphone,
and you think about the
click interaction and touch
interaction.
And this is all great.
This is a common practice,
and it's so great
that you are thinking
about responsive design.
But many other users might be
interacting with your website
using something other
than mouse and tap.
For example, other users might
be accessing your website
only using keyboard or
other assistive technology,
or other users might be
accessing your website
using screen readers
and listening
to what's on the screen.
Other case, user may be
accessing your website
using feature phone
with tiny screen
or on the smart TV
using giant screen
and using a remote
controller as a mouse.
So whenever we build
a web application,
we need to think about
those different devices
and all of the users
using those device
and making sure that
nobody gets left behind.
Let's think about this small
web application that has a menu.
You click on it.
Some new content load in, and
then you need to click Next.
This seems very simple.
It's only two click.
But for users using keyboard,
this might be different,
so for the same
website, user might
have to tap the key many
times to select a menu.
And then once the
page is loaded,
they have to click many,
many, many, many, many more
times on the keyboard to
get to the Next button,
and this is not great.
So in this case, we,
as a web developer,
needs to do a little
bit of focus management.
See the browser, if they found a
focusable element, like button,
then it focus on it.
But as a web developer, we
can add an attribute called
tabindex and set
the value to minus 1
to tell the browser that this
element is not focusable.
Using this attribute,
we can do a technique
called [INAUDIBLE] tabindex.
So let's say the website
have a collection of items
that is selectable.
You put tabindex of
0 to only one item
and set everything
else to minus 1.
In this way, there's
only one item
that is selectable in the
collection, and if the user--
keyboard user wants to move
away from the collection,
they just need to tap Tab key
and then go to the Next button
easily.
If they want to interact
with the collection,
then they can use Up
and Down arrow keys
to navigate those collection.
In this case, we add a
little bit of JavaScript
to listen to those key bits
and move the tabindex of 0
to where the focus should
be and move the focus.
And speaking of focus, focus
ring or focus highlight
is really important.
In many case, this
is the only way user
know which element has a focus
and which one get clicked
when they hit Enter.
And this one comes
in handy, too,
when user is accessing your
website using tiny screen,
like feature phone.
Of course, if you prefer the
mouse and touch user to not see
those highlight, you can look
into Focus Visible attribute
on the CSS to control those.
And speaking of
focus, we sometimes
need to proactively
manage the focus, too.
Here's a common user interaction
we see on the internet today.
You click on the hamburger icon,
and then the menu slide up.
But where did the highlight go?
Well, highlight is still
trapped in the background,
so even though user opened the
menu to interact with the menu,
they cannot get
to the menu item.
In this case, you need to
move the focus to the menu,
so click on the hamburger icon.
Menu shows up.
You need to move the focus into
the button inside of the menu.
And don't forget, if user
click on it and close the menu,
then focus should go back
to the previous element that
had a focus.
If you want to know how
we use these techniques
in the [INAUDIBLE] web
application called Proxx,
you should check out
my talk from Google I/O
called "Building Fast
and Smooth Web Apps."
Thanks for watching.
[MUSIC PLAYING]
