Accessibility Debugging: Practice Problems

[00:00:00]
>> Marcy Sutton: So for this exercise, let's test some web pages and focus just on the keyboard. Like any web page, any application, just start tabbing through and see if you get stuck anywhere. Try to not use your track-pad or your mouse and see kind of like what What you encounter, how did your keyboard testing go?

[00:00:23]
It's pretty wild how pervasive keyboard issues are. Like if you could turn your mouse off, like have no mouse Fridays or no mouse Mondays or something and have your whole team do that, I think it would make a big impact. Just because It's amazing to me how few websites and web applications do support the keyboard.

[00:00:45]
And it really is something that benefits all of us. So for our next few exercises. I'm gonna set a few up and then we're gonna do another debugging break. Where you'll go do some testing on your own but you can test multiple things and kind of play around with whatever you wanna focus on.

[00:01:02]
So the first thing is to run a browser extension. So you could have AXE, either in Chrome or Firefox, Accessibility Insights, I think it's Chrome, maybe Firefox, Lighthouse, which is another tool that you could test performance at the same time. Both lighthouse and Accessibility Insights use the AXE core API under the hood, so it's really similar rule set.

[00:01:26]
If you want to change you a completely different accessibility rule set, you could use the WAVE extensions. And then there's a color contrast extension called NoCoffee. You can simulate with someone who has a color deficiency or just sees colors differently. You can simulate, that's pretty common. So browser extensions, you could test with the accessibility developer tools.

[00:01:49]
And I use these together. So the reason I'm telling you about these at the same time is that often I will switch back and forth between an accessibility browser extension and the developer tools. And Chrome, which I'll show you another tool that I like a lot here in a second.

[00:02:05]
They have this color picker and the accessibility pane that we saw earlier. There's also some new tools in Firefox. They have an accessibility inspector and some color contrast stuff. And in the slides are links to more information from the Chrome team and Mozilla about if you need help setting those up.

[00:02:26]
So let's look real quickly at this color picker. So if I inspect in Chrome, and I pull up an element that has a color, if I click on that and open this color picker dialog, it has a contrast ratio indicator right in the color picker. Which is outstanding to me, I'm so excited about this color picker.

[00:02:45]
So it will tell you the contrast ratio. So the ratio refers to the colors in the foreground and the background. So there needs to be enough of a difference in those colors. That's how we can tell how color will stand out on its background. So for these links they're dark gray on white, they have great contrast.

[00:03:03]
The ratio is 12.63 to 1. So it's always a comparison of the ratio of to one. And there's two levels indicated here, double A and triple A. And we're not really getting into the Web Content Accessibility Guidelines really at all today, or the legal space at all. But the double A and triple A levels are thresholds that you can aim for.

[00:03:28]
A double A is less stringent than triple A, if you can hit triple A, amazing. But double A tends to be a standard in the Web Content Accessibility Guidelines. And that just means that your contrast ratio 4.5 to one for small non bold text and 3 to 1 for larger text and bold text.

[00:03:47]
And this contrast ratio, I can go and drag it around and see what colors, like how they change the ratio. So if I had a color that wasn't passing I could do and drag it on this color picker and sometimes it just means tweaking it slightly so that your design team doesn't know.

[00:04:04]
You have to go back to them and be like, you know these colors don't pass if you can kind of squeak it in there, maybe they won't know. But maybe it's a brand color, that's a bigger conversation. But this tool just being able to play with the colors in the dev tools is a game changer.

[00:04:22]
So that's that, I close the dev tools and keyboard shortcut is Option+Command+I on the Mac and on Windows is Control+Shift+I. That's how I toggle it with the keyboard. So also some testing with screen readers. I have the cheat sheets for voiceover, NVDA and jaws. So jaws is another window screen reader.

[00:04:44]
I changed my text color. Refresh it. [LAUGH] JAWS is super common with people who rely on assistive technology. NVDA is really similar, like they both works similarly, and NVDA is free and open source, so I'd probably start there. But I included both cheat sheets just because JAWS is so common.

[00:05:05]
So we'll play with that a little bit and really what I'm looking for with testing with screen readers is just turn it on and start navigating around. Refer to the cheat sheets for just how to navigate through elements, screen readers. You don't need to make everything focusable, because they have other ways of navigating.

[00:05:25]
Like going through headings, going through landmark elements and various things on the page. And the cheat sheets will tell you what the commands are for those. And some combinations for screen reader testing, OS10, voiceover and Safari are really common. Like, I would recommend using Safari before Chrome with voiceover, just because that is what people who use it would be using.

[00:05:49]
NVDA and Firefox on Windows. NVDA works with a lot of different things, you could probably use it with Chrome. I tend to test it with Firefox on Windows. JAWS and IE11 or Edge on Windows. IE11 still kicking around, mainly because of the support with JAWS. If you have an iPhone or an IOS device, voiceover and Safari on mobile is a really good thing to play with.

[00:06:14]
And so that's an interesting interface. You can go into your operating system and turn on the setting to just triple tap the home button. That's how I turned it on. Android accessibility was formerly called talkback, that's the screen reader on Android devices. And then if you're hold out on Linux, there is a screen reader on Linux called Orca.

[00:06:34]
And then the last thing you could play with would be magnification, so zoom in, zoom all the way in. Like if I hit Command plus and I go way in, and I can go all the way to 500%. And actually, I've used relative font sizes here, so mine actually will resize.

[00:06:51]
So if you're using pixel font sizes you might see that it doesn't want a resize. So you might want to change it to relative Ms or M units. There's also the operating operating system level Zoom. There is assistive technology that people use, like Zoom text, so we can play with that.

[00:07:11]
So yeah, we will test with magnification, screen readers, Dev Tools and browser extensions.