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

2.4 tota11y

Tota11y is a great tool for visualizing accessibility issues on your page. It was created by Khan Academy, and you can add the script into your site or add their bookmarklet and use it on any site.

Related Links

2.4 tota11y

The next tool we'll take a look at is tota11y from Khan Academy, and it is an accessibility visualization toolkit. Probably the most stylish out of the tools that I'll be showing you, but still fairly powerful. So, you can see that once tota11y is on your site, and you can use this via a bookmarklet, which is at the bottom of their page right here, Or you can take it and inject the script into your page and test it. Once you've done so, you'll see a little set of sunglasses come up or just regular glasses. Can't really tell whether those have lens or not, but you click that and now you have a bunch of different options. So you can hit Headings, and it'll show you the different places on the page that have a heading. Now you can see, here's an h2, here's an h1, but tota11y has told us there is an error. Nonconsecutive heading level used. So, this goes along with writing semantic markup making sure that your heading order makes sense, and is used in a semantic sense instead of used as a design tool. So, here an h2 is followed directly by an h4, and we can see the summary. And we'd see right here, okay, here's where it gets out of order. Go back to the error. Take a look at that, and it shows us exactly where it is on the page. Take a look at Contrast, and here on this button we can see that this doesn't quite meet the standards. To be AA compliant, it has to be 4.5 to 1 ratio and it tota11y tells you that over here. So we have a 3.17 and a 3.16. This is where, as a designer, it helps to be working accessibility into the entire process, so not just handing it off to a developer and saying okay here you go. By having some of these ideas in mind as your designing the website, so just something to keep in mind as we move forward. Now in Link text, we have one that says link text is unclear. We'll take a look here, and that's exactly what it says is here. So when the screen reader sees this it'll say link here as it's reading through. So, without more context it's a little difficult to tell exactly what's going on. Sometimes users who are using the keyboard are just gonna tap through a site to get to all the links, Aand if they come across here they're probably not gonna have much of an idea of what the link actually is tied to. So we'll take a look at Labels. Right there we see that doesn't actually have a label. Alt-text, Landmarks, and then a new feature that they have is the Screen Reader Wand. So this kind of simulates what a screen reader may read when it's going through a site. So, because this image does not have any alt text you can see on the bottom right that there is no text visible to the screen reader, so not a good situation there. So that is tota11y, the plugin from Khan Academy. And again you can get it as a bookmarklet, or you can just toss it directly into your site as a script. And while it isn't quite as detailed as some of the other tools we've looked at it does look pretty cool. And it again does give you kind of a high level overview of things on your site that may not be fully accessible.

Back to the top