Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:23Length:2.5 hours
  • Overview
  • Transcript

2.5 aXe for Chrome/Firefox

In-browser analysis of your site and all the accessibility violations it may have is simple with aXe from Deque. It can be used in either Firefox or Chrome. We’ll take a closer look at it later in this course, in Lesson 4.1.

Related Links

2.5 aXe for Chrome/Firefox

Hey, John Hartley here with Tuts+ and in this lesson we'll be taking a look at aXe, the accessibility engine. And we'll be taking a look at the Chrome version of this, which is one of their browser extensions. They have one for Firefox as well. And this is actually an extension that you can integrate if you're a developer with your tests. So, as you're building out your site or your app, you can actually test it with aXe. We won't get into that portion of it, but did wanna show you the Chrome extension. So, I've gone to open NASA. This is NASA's open source site. And we'll open our Developer Tools in Chrome. Hop over to aXe. And once you've actually installed this as Chrome extension, you won't see it up here like you did with the wave extension. It always sits in the Developer Tools. So we open aXe, click Analyze, and it gives you a run down of all the issues that the site has. So 29 violations found, lets click on the first one. So we can take a look in here. Buttons must have discernible text. Well what part of the WCAG does that deal with? Nicely enough, aXe shows you right here, wcag412. Now if you're still curious about what that is, you can click on More Info and it takes you to Deque University. And Deque's done a very good job of actually explaining this without being too dense. Sometimes with WCAG documentation can a bit dry, so Deque has done a nice job of really just boiling it down. And here you can see the disabilities that are affected. So we'll hope back over to the site, scroll back up to the top, and here we see, Elements must have sufficient color contrast. And one thing to note here is that it seems like this should be okay contrast wise. It's a dark background, it's light text. It should be okay. And that's where tools like this will fall a little bit short, is they can't really look at that background image and look at the foreground text and make a judgement on it. If there's a hexidecimal color in the background, or RGBA, then you can check the color contrast. So that's where these tools fall a little short, but it takes you most of the way there. So element does not have a valid language attribute, and this is a very common issue when you're going through sites. We'll check a few more of these. Links must have discernible text. And again, we see an icon is used inside of a link. And doesn't actually have any text inside. So this is one of those that you don't think about it at first because there's an icon in there. But really you would wanna show some sort of text, whether it's visually hidden or an image replacement. Having some sort of text there will help screen readers be able to discern what's in there. And in turn, help users of screen readers know what they're actually going to click on. The last thing I'll point out here for aXe is that they have a summary down on the bottom. They show you the HTML of the issue. And if you scroll up, you can inspect it and see exactly here in the elements what the issue is. And if you go back, you can see down here that they have summary to fix any of the following. So any of these five items here, you could use that as a fix and it would then pass the criteria in the WCAG. So that was a quick look at the aXe extension for Chrome. Again, it's available on Firefox, as well as a continuous integration tool that you can use in your app build process.

Back to the top