Website Accessibility Tools for Accessibility Testing

Transcript from the "Tools for Accessibility Testing" Lesson

[00:00:00]
>> Jon Kuperman: I always like to finish off with a combination of showing a bunch of really cool tools to make all this stuff easier. Now that you've gone through all the hard work of learning it all, there's some really great auditing tools. And then at the end go through anybody that wants to either online in person pitch a site.

[00:00:14] And we can kinda use the tools on the site and kinda do it together and identify some issues. Okay cool, so starting off one of my big recommendations is the Accessibility Developer Tools. So this is different than the experiment that we just turned on, this is an actual additional panel under the audits tab of Chrome DevTools.

[00:00:33] So let's go do a quick example. I'll go to Twitter.com, cuz that's what I always use. I won't go to Twitter we go. All right, and then so what you can do basically is you can go over after you install them. So it's like Chrome Accessibility Developer Tools and they have a Google Store link.

[00:00:55] So after they're installed you can go to the Audits tab and you'll notice this new type of audit which is an accessibility audit. So you can go ahead and reload the page and audit it on load and it'll do a refresh for you. And then it will come back with a bunch of stuff, most of which will relate to what we've just been talking about all day.

[00:01:13] So as it's kinda loading 53 to 56 make it a little bit bigger and any second now.
>> Jon Kuperman: Lots of stuff, lots of goodies. All right here we go. So you can do with these audits you can either audit the present state which will always go faster. I always do a reload, just I don't know why maybe out of habit I just wanna see everything as it comes down the pipe.

[00:01:38] This is taking quite some time, I might just move on and come back to this Chrome DevTool audit. Come on I wonder if I stop it I'll get anything. Yes, okay I'll come back to the DevTool on it. They're really good. I'm a little bit wondering if I have, no network throttling on.

[00:01:58] Okay, jeez jeez. Let's look. Okay, I'll come back to the Chrome Extension but it's the one that I use probably the most, I'm not sure. It's buckling a little bit right now. But we'll move on from it for now. So but basically the Chrome Extension will give you some stuff like this after an audit's run.

[00:02:14] So it'll give you like red, yellow, green. Green for passing tests, yellow for warnings, and then red for severe issues. So this is like a WordPress site that I have, a blog and I ran it. And there's a severe warning for media elements missing labels. And it shows me two different text areas in my code that I'm missing labels.

[00:02:34] You'll get into this a lot. If anybody's a WordPress developer or manages a WordPress or Drupal site. And you start running these audits sometimes stuff's just out of your control. So for example I use a plug in called Crayon to handle my syntax highlighting for code. And the accessibility issue is in that plug in not in my website necessarily.

[00:02:52] So really I could switch plug ins or I could try to find them and ping them. And be like hey, I'm getting this error but, so it is not always stuff you can fix but it is at least good to know. And then I see some warnings about stuff like how my contrast ratio is not great.

[00:03:08] I got some link text that the audit is saying it is not really clear what they do. There's focusable elements that are obscured by another element. It is a cool thing that Chrome AppTools can do since they control the rendering engine is that if you have two focusable elements.

[00:03:23] And it detects them overlapping each other in any way. You'll get a warning about that and then I've got meaningful images should not be used in imaging backgrounds. So the excessbilitals will always kinda push you for using proper image tags over CSS background images. The exception being like Jackment Jumbo for just presentational is fine to be in the background image.

[00:03:43] But if you have like a logo or a Facebook logo something like that it should be done in an actual image tag. Just gonna pop back over in see if this survived. It did not. I'm like killed the whole tab. Go to Google and try one more here.

[00:04:01] Okay, that went really fast. So, I mean Google's a really simple site site but severe elements with ARIA roles must ensure required owned elements are present. So looks like we've got some input that has some kind of ARIA attribute like an ARIA label maybe then, and the label isn't there.

[00:04:18] So again if you're gonna specify right like labeled by, that thing needs to be in the dom otherwise it's a problem. And then some other thinks like images that don't have text alter. We'll talked about alt text. The purpose of each link should be clear. You'll start seeing a lot of the same kinda repeat ones but I think this is nice to have in your arsenal.

[00:04:36] A lot of the tools that we're about to cover require your site to be online and then you put in the URL. But the DevTools are nice cuz even if you're just building your site locally you can run the tests on them, cool. Tenon.io is an amazing resource.

[00:04:51] We'll go to tenon.io now. So it kinda works in a few different ways. The first way is that you can just put in either some code or a domain and it will analyze that for accessibility. It also has services where you can kind of rig it up like an API.

[00:05:07] So it can be really nice if you want it to be part of your CI testing or something like that. Where you deploy your site to a staging server and then you send it to Tenon and Tenon looks over it. So if I put in another mycodeplanet.io site for example, and then hit analyze.

[00:05:22] It'll go through and and do its thing and it provides this really great UI. So it's 31 issues found. And then it starts here's a form element with no label. Here's a link with no text in side of it. Here's a link with a title attribute that's the same as the text in side the link.

[00:05:38] So this is just awesome, a ton of really good information. It links to recommended fixes. It's got a bunch of great documentation on here. Yeah, I pretty much can't say enough good things about Tenon. You know it's a private service so if you want to get it set up with API it does cost money.

[00:05:54] I guess that's the only bummer but I think it's a really, really great service, all right. And then for those that are not Chrome users they have some really good ones too. So their Firefox has accessibility evaluation toolbar which just has this model. It does basically the same thing as the DevTool.

[00:06:11] So it gives you this little model box with a bunch of accessibility issues in it. And then it also has the Wave toolbar which is kind of a weird one, I kind of like it. It does this kind of thing, I'm not sure if people can see that.

[00:06:23] So basically it starts grabbing out, finding different elements that are focusable. And then it puts these icons kinda over your site, like a green way ARIA one wherever you have ARIA attributes and like hetero types. So it kinda like messes up your whole page view while you're using the wave tool bar.

[00:06:41] But it's kinda cool where it breaks your site into a more accessibility focused state of like, here are your focusible elements. Yeah, we already saw and destroyed the accessible color palette. I think they actually just have something going wrong because it is supposed to, I don't know. It suppose to have a little bit more CSS on it than it was showing.

[00:07:04] But as another cool resource where you can just put in color codes. The accessibility auditor for Chrome and Firefox will do all the color stuff too. I would mainly reach out to this one if I was doing some non web stuff. Making business cards or a flyer or something like that where you maybe in Photoshop, so you can't run a web audit on it.

[00:07:22] But you can still put in hex codes or RGB or whatever and see how it's doing. So we kinda saw this, you can pick your conformance level. So we've been covering, kind of double a and triple a conformance as we've been going through the course but triple a is going to be more strict.

[00:07:39] And then, yeah, you can go ahead and look at them and see where they failed and where the passed. This one's really cool and it's really new. It's from the people at Khan Academy, and it's open source. And it's called tota11y, but it's A-1-1-Y. So yeah, this one's pretty neat, so basically what you do is you install it.

[00:07:57] And then it'll give you these little glasses here. And so what these little glasses will kinda help you do is you can pick your different things, like, what you're looking for here. So you can be like, let me see my headings, and it'll do two different things. One, it'll, let me find some headings, it'll go through and it'll start identifying each of the headings the little nice square.

[00:08:18] But also it will pop this other little area often it will show you, a summary which is like we saw on the screen reader. And it also show you errors like non consecutive heading level you use. So there's an h2 and then right under it an h4 which should be a logical structure.

[00:08:34] So you can kinda go through and click on a bunch of different stuff. You can click on contrast and again it shows you some errors. This grey on that grey is not a good enough contrast ratio. I really like this one because it's just so pretty. The UI for totally is just so nice, I feel like it makes fixing things a lot more pleasant, I guess.

[00:08:53] So you can do images with alt text, and it's like an image is missing alt text. And then you can see like right down here specifically which images there are that I'm missing or text. So yeah, so it's pretty cool like they're all kinda getting you to the same point which is like identifying all the stuff that we've been talking about.

[00:09:11] But they're just some really nice tools we're doing. So, let's see another really great one. So Adi Asman made a command line tool which does the same thing as that Chrome extension does. So it uses the same API except you can do it from your command line. So it's at AddieAsmati/a11y.

[00:09:31] And I think he has the a11y node package. So you can do npm install-g a11y. And then you can just run a11y Twitter.com and it'll give you all that good stuff. It'll look like this in the command line, the same kind of information. These elements are focusable, blah, blah, blah.

[00:09:49] But again, if you're so inclined and I really recommend it. This is another great tool for incorporating accessibility stuff into your automated testing, right. So you have your Jenkins job, it can go out and it can install Node, install Ally, run it, and then come back with the results.

[00:10:03] So you can be sure that you're not shipping suddenly inaccessible software. Yep, it's got a bunch of cool stuff. So you can kinda see here this is the exact same site, my code planet one with the crayon one. So it's just like a different way that it looks but it's the same information.

[00:10:17] It's like controls that don't have labels and then it lists some. Cool, and then I going even furthers with it for anybody that works on any kinda JavaScript framework. There's some really great tools that are probably incorporated into your framework of choice. So for example, Angular has Angiaria and React has React Ally.

[00:10:35] And what both of these do they are really cool, they are able to do static analysis. So I guess you're writing your code, if you are in Reach and you render and return an image with no alt. It'll actually catch that and when it compiles through Babel or whatever it'll be like you made an image here with no alt tag.

[00:10:51] So again now you can have some ci stuff going, you can also have some kinda more like static analysis linking going to make sure you don't introduce problems later on. Cool, and then just getting around some of the terms like, so we've got WAI, which is the full name WAI ARIA, which is the Web Accessibility Initiative.

[00:11:10] So that's the group, I don't know how familiar people are but, so there's the W3 and they're the main web standards group. And then they have different groups for each task. You have your HTML5 group and you have your CSS group and things like that. So WAI is the group within W3 that's responsible for accessibility.

[00:11:29] And then WCAG, the Web Content Accessibility Guidelines, that's their book [LAUGH]. That's their giant amount of documentation on accessibility on the web, how everything should work, everything like that. So we've been doing is a private party, WebAIM has kind of like extracted the big takeaways out of the WCAG specification and made those checklist items.

[00:11:49] But if you're really getting into understanding accessibility or your legal responsibilities, things like that. WCAG is the place to check out. And there's a bunch of good conversations, places you can ask questions, things like that. So the WAI publishes WCAG, that's like their relationship to each other. You'll probably see those acronyms a lot doing any accessibility research.