Join Natalie Garza and accessibility expert Natalie MacLees on the 18th episode of the AAArdvark Accessibility Podcast as they discuss various browser extensions that aid in digital accessibility testing. They provide a comprehensive overview of popular tools like the Web Developer extension, aXe by Deque, WAVE by WebAIM, and IBM’s Equal Access Accessibility Checker. The episode also introduces AAArdvark’s tool for automated and manual accessibility audits and highlights the importance of combining automated testing with manual audits for effective accessibility compliance.
Natalie Garza: Hello, everybody, and welcome to the AAArdvark Accessibility Podcast. This is episode 18. I’m Natalie Garza, and with us today is,
Natalie MacLees: Natalie MacLees
Natalie Garza: and she’s an accessibility expert here to teach us new things about digital accessibility. So, in this episode, we wanted to start the conversation. Not fully go through the whole topic because it’s just so expansive; we wanted to start talking about tools to help with accessibility testing, starting with browser extensions.
Natalie MacLees: Yes, browser extensions, which I think is where a lot of people get started. I think a lot of people, a browser extension is their first experience with scanning a webpage for issues and finding out about accessibility testing.
Natalie Garza: Yeah. And again, disclaimer: there’s a lot of ways, a lot of methods, a lot of tools to help you with accessibility testing. We’re just gonna start cracking the surface here. Natalie, what should we expect from a browser extension, and what’s out there right now?
Natalie MacLees: Yeah, so browser extension, you’ll install it in your browser and they, they have accessibility extensions for Chrome, for Firefox, for Edge. So it doesn’t matter which browser you’re using; you install it, and then usually there’s a little button that you click somewhere in the extension to say, scan this page.
And it’ll go through the page and find any of the issues that can be identified by an automated checker, which is, it depends on who you talk to, but somewhere between 20 and 30% of the different types of accessibility issues that can be found on a page can be found by a checker. And then, it will show you some kind of interface to show you what those errors are so that you can figure out what’s going on in your site and have an idea of how to get it fixed.
Natalie Garza: Yeah, and I also feel like there’s another category of browser extensions where it helps you flag stuff down.
Natalie MacLees: Yeah. That’ll help you turn on different things make information that’s normally invisible on the website visible, so it makes testing easier because you can see something that you wouldn’t normally be able to see.
Natalie Garza: Right. It’s kind of like an x-ray.
Natalie MacLees: Like an X-ray. Sure. An MRI. It’s a CAT scan.
Natalie Garza: Yeah. But without the dangers of radiation poisoning.
Natalie MacLees: No radiation involved. Well, no, that’s not probably not true. I’m sure that all of our devices are emitting radiation at us all the time.
Natalie Garza: True, true, true. EMF. Anyway, do you wanna go over some popular browser extensions and what they do?
Natalie MacLees: Sure. Yeah, so if you’ve watched any of our live streams where I go through accessibility testing live, you’ve probably seen me use the Web Developer extension. It has a very generic name, just Web Developer, and it’s icon is a little purple cog, and it provides, I would say, probably about 50 different tools for doing different things on a website.
And it is not specifically an accessibility focused plugin it’s a web development focused plugin. But it does do some things that are really handy for accessibility testing. So, for example, you can have it make an outline of your document where it will pull out all of the headings and then it will show you the levels.
So you have a heading level one that says this, and then a heading level two that says this, et cetera. And it makes it really easy to check, “Did I remember to have an H1 on the page?” ’cause that’s the best practice. And then, “Did I use all of my headings in the right order, and is everything that should be a heading actually marked up as a heading?” Et cetera. So it makes that kind of thing really easy. It’ll let you identify images that don’t have any alt text on them. And it has a few other really handy features as well.
Natalie Garza: Yeah, and that’s an example of an x-ray extension.
Natalie MacLees: Yeah. It just gives you a lot of insight into your page that it’s hard to get otherwise.
Natalie Garza: All right, so that’s an example of an x-ray one. Web Developer. And again, we’re gonna leave links to all of these in the show notes or in the transcript. Or if you check out our blog, you can find the entire transcript to this whole episode, where you can find links too. So next category is what we first talked about: the scanning browser extensions.
You wanna go into those?
Natalie MacLees: Yeah, so probably the one that I think most people have probably heard of or dealt with is the aXe, which is A X E, and usually it’s small letter A, capital X, small letter E for some reason. And that is made by Deque, the company, like a pretty well known accessibility company. It does have a kind of unusual for a browser extension.
It has a free and a paid version. So you can access the free version and use that just, you know like you would any other browser extension. And if you want the more robust features, you do have to pay for that plugin. But it’s really well-researched. Deque does a lot of work in the accessibility space, and they flag not just actual WCAG failures, but can also find best practices, which is something that’s really helpful and not all plugins do.
One of the strengths of the aXe browser add-on is that Deque is very proud that they have very few false positives with the aXe testing kit basically. The downside of that is that I think they miss some issues because they’re so determined to not have false positives that I think some things get missed.
Because of them being very determined to not have false positives.
Natalie Garza: Right, but it’s better to flag something right.
Natalie MacLees: Yeah, it depends. Everybody’s gonna have their own preference. Some people are gonna prefer that and not have a bunch of extra stuff that they need to look at. And other people are gonna want a more comprehensive list. So it, it depends.
And then another popular tool is WAVE. A lot of people will have come across this one. It’s available both as a browser extension and as just a webpage. So for free you can go to wave.WebAIM.org. Plug in a URL and run a scan on a page right directly there. Or you can do it as a browser add-on.
And WebAIM is a nonprofit organization and they have also done a lot of extensive research around accessibility. They do a lot of audits and accessibility testing, so they have a lot of knowledge in their organization and their tool will flag all of the potential accessibility issues and some actual accessibility issues that are on your page and give you a little bit more information about them.
It also has a little bit of that x-ray, aspect to it. Where it will highlight your document structure, it will highlight your landmarks and things like that, that are otherwise kind of hard to see.
Natalie Garza: Okay, and aXe going back to aXe, they don’t have a webpage or a web app, or it’s just a pure browser extension.
Natalie MacLees: Well, that’s, that’s where things get a little bit interesting with aXe because they have the browser extension, and then they have their aXe library that they package up and make available in a bunch of different ways. So it is actually available if you are doing development work and you want to run an accessibility scan, every time developers make a commit or merge a PR in, you can actually take that aXe package and put it into your CI/CD process, and have scans just run as part of your development process.
And there’s some other ways that they make that library available as well. But as far as like a non-developer user coming to it, it’s just the browser extension.
Natalie Garza: Okay. Whereas WAVE the browser extension, is kind of a shortcut to their webpage.
Natalie MacLees: Yeah. Yeah. It really is.
Natalie Garza: Okay. Do you wanna go into the next and last one we’re gonna talk about for today?
Natalie MacLees: Yeah, the last, last but not least, we’ll talk about IBM actually has a web browser extension called the Equal Access Accessibility Checker. And similar to Deque with aXe, that’s actually a little library that they make available. And the most accessible way to get it is through the browser add-on. But if you’re a developer, you can incorporate it into different things that you might be building as well.
And it’s, a checker that will go through flag accessibility issues, very similar to aXe. It is less focused on avoiding false positives. So it is a little bit more comprehensive in what it finds, but still, we have to keep in mind that even the very, very best automated checker is not gonna be able to find more than 20 to 30% of accessibility issues.
So, you still have to do manual testing even when you’re using a really robust automated tool.
Natalie Garza: Yeah. These should just kind of be accessories for an audit.
Natalie MacLees: They are a great way to actually get started if you’re gonna do an audit. It’s really nice to just run an automated scan first. Because it’ll give you a little bit of the lay of the land, and you can see, “Oh, this page has a lot of issues on it. So I might wanna save a lot of time for doing a manual audit on that page ’cause it looks pretty problematic.”
So even though it’s not gonna find all of the issues, they are actually like a pretty good indicator of this overall state of accessibility on a site. You know, it’s not exact. Like I can’t say, if I go to a site and I run one of these checkers and it finds zero issues, I can’t say, “Oh, when I do manual testing, I’m probably not gonna find anything.”
But I am gonna think, “Hmm, probably this site is in pretty good shape, right?” Obviously, somebody was paying attention and being careful when they built it, and I’m not likely to find. I’m not likely to go into that and find a whole bunch of really severe barriers happening on this site. It’s probably in pretty good shape, and that’s generally a pretty good indicator.
Whereas if I look at another page and I see 500 issues on just the homepage alone, then I know, “wow, that audit is gonna be a lot of work because there’s likely gonna be a lot more issues found manually.” So the automated testing is still, it’s a really helpful first step. In an audit, it helps you figure out which pages do I wanna prioritize, where do I wanna maybe focus my time, how well do I think somebody did at building this site?
And it gives you that kind of insight at first and saves you a bunch of time logging a bunch of issues that you would otherwise have to do manually as well.
Natalie Garza: Right. Do you think any of the browser extensions we talked about help with manual auditing?
Natalie MacLees: The paid version of the aXe plugin does. Yes. It will actually walk you step-by-step by step through running a variety of manual tasks.
Natalie Garza: Oh, very neat. Okay.
Natalie MacLees: Yeah.
Natalie Garza: And then the Web Developer one, does that one help with the audits? Technically.
Natalie MacLees: It has tools that you would definitely use while doing a manual audit. Yes, you know, that’s not what the tool was built for. It’s not what the developer had in mind when they were making it, but just kind of as a coincidence, there are some tools in there that are super helpful for when you’re doing a manual audit.
Natalie Garza: Gotcha. So all in all, these are all free, with the exception of the aXe one who has also a paid version
Natalie MacLees: Yes.
Natalie Garza: And it helps you get started with automated scanning, but you still have to do manual auditing.
Natalie MacLees: You, yeah, you don’t get out of the manual testing, but it does give you a little jumpstart and it is helpful to use it as an indicator of where you might wanna focus most of your manual testing time.
Natalie Garza: Gotcha. We will leave links to all of these browser extensions that we’ve discussed today. And with that, I think we wanna talk about one last tool.
Natalie MacLees: That also has a browser extension; that would be AAArdvark. So you can go to AAArdvarkaccessibility.com and check it out. Our browser extension lets our tool talk to your website so that you can load it up in Visual Mode, which is very nice because you can see little markers on your website exactly where you have accessibility issues and get more information about them and how to resolve them.
Natalie Garza: And AAArdvark has both support for automated scanning and features for manual auditing.
Natalie MacLees: Yes, that’s true. You could do both all in one tool.
Natalie Garza: So go check out AAArdvark. You can get your homepage scanned for free to, just to get a feel for your website.
and we’ll leave a link to that too in the notes and go check out our blog for a full transcript and links to all these as well. So with that, we are gonna end the 18th episode of the AAArdvark Accessibility Podcast. And thank you guys for watching, and we’ll catch you guys next time.
Resources
- Web Developer by Chris Pederick
- axe DevTools by Deque
- WAVE Evaluation Tool by WebAIM
- IBM Equal Access Accessibility Checker by IBM
- AAArdvark by AAArdvark
