Switch Device Assistive Tech
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 cross-hair 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.