[MUSIC PLAYING]
ROB DODSON: Hey, everybody!
What's up?
It's Rob Dodson.
Welcome back to the
"A11y Casts" show.
Today we're going
to be continuing
our series on
assistive technology
by looking at Switch devices.
So a Switch device
is for anybody
who's got limited dexterity
or limited range of motion.
Probably one of the most
famous Switch device
users in the world
is Stephen Hawking.
And what we're going
to be doing today
is showing you how you
can use a Switch device
to interact with a mobile
device-- in particular,
Android.
So the device I've
got with me today--
this is the Blue2 by AbleNet.
This is a
Bluetooth-enabled Switch.
It's got two switches
that are available on it.
And if we go into our
Accessibility Settings
on our phone, you can go down
to where it says Switch Access.
Make sure our
device is turned on.
Go into Settings, and
we can assign actions
to these switches.
So I'm going to go
over to where it says
Assign Switches for Scanning.
And for Select-- which is,
I want to do a mouse click,
essentially--
I can click on that.
And in this case, I've actually
already mapped that action
to this yellow
button right here.
But if you don't
have a Switch device,
you can still test this on your
phone by using the volume keys.
So for instance, I can use the
volume-down key on my phone
and assign that as
a Switch, as well.
Then you've got Next
and Previous actions.
Since I only have one
or two volume keys,
I'm going to use
only the Next action,
and I'll assign that to
this other volume key.
All right, and then
we can actually
skip using the Previous action.
We don't need to worry
about that for now.
We'll just use Next to
jump around the page,
and use Select to
click on things.
So next let's switch
over to Chrome.
And what I've got here
is a little website
that I've created
called Lifestyle.
This is sort of a
little Pinterest clone.
And what I want
to demonstrate is
how we can do some basic
navigation on this page.
So I'm going to use the
Switch in this case,
or you can use the volume keys.
And the first thing
we're going to do
is we're going to
start scanning.
There's a few different
kinds of scanning modes
that Switch devices
make available to folks.
There's auto-scanning--
so in that case,
the device itself will actually
do some scanning for you,
and then you just
click the switch
to interact with something.
And then there's different
kinds of row versus column
versus group scanning.
What we're going
to do here is just
a really simple manual scan.
So we'll just go item
by item through all
the interactive controls.
So I start by
hitting the switch.
The first thing
it does, actually,
is it shows this menu option.
And we'll come back
to this in just a sec.
Then it lets us go through the
Chrome of the browser itself,
and then it jumps into the page.
And then we can
actually go through
and look at the different
interactive elements.
So in this case, Lifestyle
itself-- this text here
is an anchor.
If we go to the
shopping bag, that
takes us to our check-out page.
So that's also interactive,
so that's an anchor as well.
And then the image and the
heading for our article--
that is an anchor as well.
So if you've watched
this series for a while,
you know we often talk about
using the keyboard to navigate
through interactive controls.
And what you're seeing
here is basically
the same thing when you're
working with a Switch device,
right?
We're landing on all the
interactive elements,
and when we want,
we can go ahead
and click this other button here
to interact with one of them.
So in this case, I
can click that button
to click on this article.
Now, there's not a real
article on the end of here.
I've just put a little
placeholder page here,
but that's basically
the gist of it.
You can navigate using
some linear scanning,
and then click on a control.
Now, the next thing
you might wonder
is, well, if I've only got these
two buttons, how exactly am
I supposed to scroll the page?
So what we can do here
is we can go through
and we can start scanning.
And you'll see that
there is a point where
the entire page is highlighted.
And if we click on our
switch at this point,
it'll actually give
us some options
to either scroll forward
or scroll backward, right?
So pretty straightforward,
though keep in mind,
it's a fair bit of
work to scroll--
to navigate through all
the different controls,
and then to finally hit a
button to interact with it.
And so this is why we
often encourage folks--
if you're building a
shopping cart or anything
like that where you've got some
primary action buttons, to put
those high up on the page.
To make those early
in the tab order,
so that way it's really
efficient for everybody
who's using a keyboard-- or in
this case, a Switch device--
to access that content.
OK, so if you remember
in some of our episodes
on screen readers, I was
showing off some common pitfalls
and gotchas that
we see when using
assistive technology-- in
particular, on responsive
websites.
So let's look at
an example of that.
So this is the same page
that we've looked at before
with screen readers.
This is our little
responsive website.
You can see, here, we've
got this hamburger menu.
We open it up.
We've got a bunch of
anchors here, and things
that are off-screen usually.
And in this case, those
anchors and everything,
they're not displayed, and
they're not visibly hidden.
They don't have to have
index negative 1 on anything.
So they are entirely in the DOM.
They are entirely interactive.
And you'll see that, as I'm
navigating using my Switch,
there comes a point where even
though it's not on screen,
we're actually focusing the
content of that side nav.
And I'll go through,
and you can see
it's trying to select the
different regions in the side
nav.
And I'll go item
by item and look
for those different anchors.
So again, the trick
here is-- if you
have stuff that's
off-screen, you really
want to make sure that you're
making it display none,
or setting it to
visibility hidden,
so it's no longer
in the tab order.
It's no longer focusable.
Because for someone who
is using a Switch device,
it might be time-consuming or
tedious or challenging for them
to have to hit it over and over
and over again, so you want
to remove those
impediments and make sure
that they're having a really
good, efficient experience.
Now, the last thing
I want to show you
is how someone interacts
with unique controls,
like the slider down
here, because I think this
is actually just super cool.
So Switch devices on
Android and on iOS
have the ability to do
a virtual mouse click.
And so what we're
going to do is we're
going to go back to this menu
button, we'll click on that.
We'll go down to where
it says Point Scan.
And then watch what is
going to happen here,
because it's going to try and
do this cool, animated crosshair
thing.
We're going to interact with it.
So as soon as I hit
the button, it'll go.
We have this vertical
scanning line.
So we wait till we get
down to our slider control.
We click.
And we have a horizontal line.
We click, and that actually
moves the control over.
So that's kind of cool, right?
If someone's using
a Switch device--
though it might be a little
time-consuming-- they are still
able to do, essentially,
a simulated mouse click,
which I just think is
pretty fascinating.
Now, today we've covered how
Switch devices work, basically,
on Android and how Switch
Access works there.
If you're interested in learning
how Switch controls work
on iOS, I'm going to
include some links down
in the show note to a YouTuber
named Christopher Hills'
videos.
He is a Switch device
user who predominantly
uses macOS and iOS, so you
can go check out his channel.
He's got a ton of
videos that show
how he uses his Switch with
his laptop, with his iPad.
How he makes music
and plays games,
and there's all this
other cool stuff.
So definitely go check
out those videos.
Otherwise, that about
covers it for today.
So if you have any
questions, as always,
you can leave them down
below in the comments,
or hit me up on a social
network of your choosing.
As always, thank you
so much for watching,
and I'll see you next time.
[MUSIC PLAYING]
