aXe is a free accessibility testing tool developed by Deque Systems.
Learn more at http://www.deque.com/products/aXe
Learn how to start testing your website for accessibility with aXe.
Full transcript:
Hi! My name is Caitlin Cashin, and I'm the marketing manager here at Deque Systems. Today, I'm going to take you through a quick demonstration of our aXe browser extension. In this case, I'm using the Firefox browser extension but the Chrome extension is almost identical. So I have my page that I would like to test opened in the browser and I'm just going to go ahead right click on this page and select Inspect Element. That opens up the developer tools in the Firefox. And you'll see there are a number of tabs here at the top. I want the accessibility tab. In the Chrome extension, it'll say aXe rather than accessibility. So I'm going to select that tab and now I have a big Analyze button that I am going to select. And it'll take just a minute for aXe to run the test. There we go. And now I have a bunch of results. I can see that I have 51 accessibility violations on this page. Those violations include that buttons must have discernable text, elements must have sufficient color contrast. And immediately to the right of each issue there's a number and that number indicates how many times the issue occurs on the page. I'm going to take a look at this "frames must have unique title attribute" issue and there are 2 of those on the page. So when I select the issue, it opens up a detailed description of the accessibility issue. It includes the actual description of what's wrong, [inaudible] elements contain a unique and non-empty title attribute. And if I want to know more about that issue or what's going on, I can click on this More Info link. And that opens up a page from Deque University that contains an even more detailed description of the rule that's in violation, why it's important that you fix this issue and other information like that. So let's go back to our aXe extension. So under the actual issue description, there's also an excerpt of the code that's causing the issue. There's information about how the issue could be fixed. And over in the top right corner, I can see that it's a critical issue. It violates [inaudible] guidelines. It also violates Section 508 guidelines. And there's a little arrow that allows me to navigate between the different "frames must have unique title attribute" issues. And there are also 2 buttons labeled Inspect and Highlight. Highlight will highlight the offending component on the page. In this case, it's this YouTube NASA Life on Mars video. If I click Inspect, that opens up the code inspector and highlights the piece of code that's causing the issue within the broader webpage code. And you'll see when I hover over it; it'll again highlight that YouTube NASA video. And that's aXe, it's super easy to use and we hope you'll start using it test your pages. Enjoy!
