Accessibility Dev Tools Walkthrough

[00:00:00]
>> Before we keep going too far, let's run some of these tools so you could see what I'm talking about. So, I'll just run it right here in our workshop materials. So I'm going to open up the dev tools on my Mac with command option I, that'll open up the console.

[00:00:15]
I can get into the elements inspector. I happen to have axe DevTools already installed It's over here on the right. You can install it through Chrome extensions, there is a Firefox version and maybe an Edge version, but Chrome is the one I tend to use the most. So some of these upsells I was mentioning, they have the little lock icon because you have to pay for them.

[00:00:42]
But the scan all of my page free setting is enough to be super helpful and wallah, we have zero automatic issues. I put in a little work to make sure that this was as accessible as it could be, as you might imagine, but just because this says zero doesn't mean my job is done.

[00:01:03]
I mean, we were tabbing through the sidebar and kind of experientially wasn't, like it was forcing me through links that I didn't want to go through. Axe isn't gonna know about that, it's gonna just look at if things are coded right, in ways that it can automate. So, we want to make sure that things, are still, the flows are following best practices and that we're thinking about the experience.

[00:01:28]
While we're in here, though, I could show you Lighthouse. So Lighthouse is built into Chrome, I know for some organizations getting approval on third party extensions can be a chore [LAUGH] or even impossible, if you're really locked down. So, Lighthouse potentially could be your saving grace there, where if you can't get an extension approved, or maybe it takes time, Lighthouse is just built into the browser and it runs the same axe core API.

[00:01:58]
So I'm gonna uncheck performance, best practices, SEO, and progressive web apps just for, focus purposes. So it's gonna analyze page load. It will load up and audit the web page and report back what's going on. Checking at a smaller viewport size, we have some contrast issues that axe extension did not find, which is interesting.

[00:02:30]
And it's actually says error, So this would be one, two for me to look into. It has all the audits that it passed. I guess sort of my first guess as to why this would be any different is that the underlying axe core engines could be different versions.

[00:02:49]
It also could be checking at a different viewport size. When I ran axe, it was at the desktop size. When I ran Lighthouse, it was checking primarily for a mobile size. So those are two things right off the bat that could cause a difference in results. It also just could be an anomaly with the way the tool reports.

[00:03:10]
So sometimes you get different results. It is helpful to run a variety of tools because maybe a different tool will catch an issue. So, I usually check in multiple things. Another tool that I mentioned was accessibility insights. I have that installed, it's this really cute little blue heart with a magnifying glass.

[00:03:29]
So I can click that and let me go back to the launch screen has what's called the fast pass. That is basically axe core that Microsoft has also used, so you can run that. They have this assessment that`s more of a guided accessibility process, you could do that, maybe kind of towards the end of the development cycle of a feature.

[00:03:53]
That could be a more thorough way to have it guide you through some accessibility testing, without having to pay for a tool that you don't know whether you're gonna really like that or not, you could try this guided assessment. The ad hoc tools are really great. I could look at things like headings.

[00:04:13]
This will show me the heading level. I have two H1s on this page I guess, so that's something I should probably fix. I'm a little surprised that that didn't come up in any of the other tooling. So, that would be something for me to look into is why do I have multiple H1s?

[00:04:31]
Landmarks, I can pull up landmarks and it will show me all of these section regions that I have like a complimentary sidebar, the main, the navigation landmark up in the header. There's a table of contents navigation landmark that I have labeled. So that's these two purple landmarks for navigation.

[00:04:56]
I made one of them more unique by giving it an ARIA label of table of contents and so that gets picked up here by accessibility insights. It's pretty handy. This one's kind of interesting, the tab stops so I turn that one on and then if I start tabbing it will show me a line between where my focus goes.

[00:05:20]
And interesting that it is, yeah, you can kind of see like what a nightmare this sidebar is when you tab through [LAUGH] using the tab stops tool. It's not drawing the repeated lines for some reason, like we're just seeing the current one. Usually when I use this tool, you'll have lines all over the place.

[00:05:37]
It will mark a line for every single tab stop which if you're really trying to work with your design team to change the way your tab order works for some reason, you could use this tab stops tool. Like if it's jumping back and forth a lot because for some reason this can be an effective screenshot tool to share with your team and say, hey, this is madness, we're jumping back and forth across the screen at desktop sizes.

[00:06:06]
Can we reorder the markup on mobile somehow so that this is more reasonable? So it can be a tool to just understand the tab order overall on a page. So I'm gonna turn that one off. Color, I could turn on, make things more grayscale. There's all kinds of cool stuff in here.

[00:06:28]
So, accessibility insights is a really, really great tool to have. Cool, okay, so we've kind of dipped our toes in the water a little bit with some accessibility tools. We're gonna look a whole lot more when we get to our next exercise. Any questions right now before we keep going?

[00:06:50]
>> [INAUDIBLE] I can suggest headings map extension for heading structure.
>> Cool, let's check it out. Headings map extension. Cool yeah, I'll check this out because the one I use is a little bit dated, that looks nice, cool. I'll leave that open and add it to our tooling list, thank you.