Lessons:23Length:2.5 hours
Access 1
  • Overview
  • Transcript

2.6 pa11y and pa11y-dashboard

The first look at a command-line accessibility tool, pa11y has a lot of flexibility. Reporting at different levels and outputting the data in several different ways makes this piece of software extremely helpful.

Related Links

2.6 pa11y and pa11y-dashboard

Hey, John Hartley here for Tuts+. And in this lesson, we'll be taking a look at pa11y or pa11y. This is an automated accessibility testing tool. And another one that you can actually include in your projects and use in continuous integration. One of the reasons that I like this tool is that you can actually set it up locally on your machine. And you can actually check several sites through a dashboard. So we'll take a look at the dashboard, and it's on GitHub. And this one's a little more developer-heavy, but it's still a pretty cool tool. So hopefully you'll stick with me here. So scroll down you can see how to install it, I've already installed it on my system. So I'll bring up the command line. So I'll go ahead and say grunt start. And it looks like I already have it running. So I'll hop over to my port 4000 and here it is. So I've already got the website on here. And so I can go ahead and click on there and see how things are doing. There are 42 errors, 41 warnings, and 247 notices. So I can look through here. It tells me exactly what it's breaking. Here are the errors, and the warnings are down here. And open that up, and the notices are here as well. So I get a detailed look, and it tells you exactly what part of the WCAG is broken. And we'll scroll back up to the top. And it has a chart here, if I go ahead and run this again. And it looks like there's the same amount of errors as last time I ran it. So we'll hop back to the dashboard and we can add a new URL. So in the last lesson we checked out the open source NASA page. Type in NASA and the URL. And let's go ahead and set the standard to, we'll be lenient here and say WCAG level A. Timeout, you can set that to whatever you want. Username and password are a bit trivial because this is gonna be local. I'll just type in John John. The nice thing here is that you can ignore rules. So if there is something in particular, like say you don't wanna look at the color or contrast. And you don't want pa11y to look at the color contrast. You can find that in here and you can actually check that box and it will ignore it whenever it runs. We'll add URL and the URL has been added. So we'll go ahead and click to generate results and here we go. You can see that there are 6 errors, 1 warning and 67 notices. If you watched the lesson on the aXe accessibility engine, you'll see that this number is a bit down. And, again, that's because we set it to just A, instead of having it at AA. The other cool thing is you can download a CSV or download a JSON file of this data. And after that you can really use it for whatever you want. If it's CSV you could use it to kinda make it as a checklist to go through and make the updates. Or if you're handing it off to developers, you can give them a JSON file and they could sort through it with that. The other part of pa11y that is nice, and you can call it pa11y or pa11y, is the command line integration. So we just saw on the dashboard, I'll go ahead and open this up again. And here you can that see it was running a few things, PhantomJS opens the page. That's just a headless browser that you can use for testing. Go ahead and hit Ctrl+C to stop it, clear my console and go pa11y. It does it's thing, runs through Phantom, and here we go. 17 errors, 36 warnings and 69 notices. So I can scroll up and you can check out the different things, the different errors and we see the link text issue again. Shows you exactly where, and it drills all the way down and then gives you the HTML for it. You may be saying well, there's actual text here so what's the problem? And it looks like pa11y has something set up where it takes that and checks to see if there's more context that's needed. And note that this is a notice and not a warning. So it's saying there may be more contacts that you could add, but for now it passes. If you look at the GitHub page, you can actually see there are more options. So when you report this, you can determine what standard you want, so Section 508, A, AA, AAA, and it defaults to that AA. You can also determine how you want to output the information, CSV, HTML, or JSON. So let's go ahead and try that. Pop back over to our command line, clear that out. And let's try the same thing again, but this time we'll say reporter json. Standard, section508, hit Enter. And there you go. Now everything is in a nice, neat JSON output, making it easy to do whatever you would like to do with your information. So that is the pa11y accessibility tool, and it's another one that you can add into your build system. After every build you could output this information. If you're using Gulp or Grunt, you could do that. Or you could just add it as a task. And if the command line isn't quite your thing, you can still use pa11y online. You can try out their demo and you can set it up for your sites.

Back to the top