Skip to content

Tools to test accessbility – #a11ymtl

These notes concern practical tools for web content accessibility testing. These tools are a pretty great way to get started with accessibility right in your browser. Do you speak French? We’ve got content for you to look at if you want to learn about accessibility.

All tools I talk about are to be used within a browser. Each has its own way of working within the browser. Some of them use their own accessibility APIs. I won’t be going overboard with screengrabs as the presentation has you covered. I highly recommend checking it out as it is a lot more complete and realistic.

Want to download the presentation? It’s available in PDF format.

There were 4 speakers presenting multiple tools that they use for accessibility testing.

Arthur Rigaud – Opquast Desktop

API accessibility

The benefits of tools using their own accessibility APIs across browsers. You won’t be dependent on whether you use Firefox or Chrome or whatever other type of browser. Depending on the browser’s own accessibility API may give you various results which means your results won’t be the same across browsers.

Free tool: Opquast desktop extension

This tool is Firefox only (45.0 to 50.0 (version 2.0.4) and older versions). We liked this tool in Montréal because it can be used in French and in English.

It provides a bunch of things such as:

  • Automatic testing of more than 450 accessibility, SEO, Quality, UX and performance tests.
  • The ability to choose among the checklists (if you need to consider SGQRI-008 or WCAG 2.0)
  • A detailed result for each failed test. No more guessing.

This tool gives you a grade just like in school, but unlike your teacher in 6th grade, it won’t provide snarky comments on your failures, just honest feedback to help you fix it. So what’s in the feedback? It tells you what’s wrong, where and gives you the opportunity to see what failed which checklist.

First impressions on the tool? I’d use it happily.

Opquast doesn’t make me feel stupid. That’s a very good point for them. It also helps demystify some of the official guidelines like SGQRI-008. Yeah, I get it, we’re all supposed to pretend this stuff is accessible and easy to understand…but trust me, it’s not. People are just afraid to say so.

Next tool: Tenon

Tenon is made an American company. It’s a browser extension and you can launch a test that gives you a visual summary of issues detected. It helps detect 508 and WCAG 2.0 issues.

Here’s what it looks like:

Tenon.io accessibility test screengrab

Things I like right off the bat:

  • Share link available on the website
  • No need to use the browser extension to test it out. Just go to their website, paste your URL and watch it go.
  • The CSV export function. Download it, pass it on to other colleagues.

What I don’t like:

  • The recommendations to fix issues require that you log in.
  • You are limited to 3 websites to test it out.
  • Free use of the tool is allowed for one month. After that, it’s all about pricing plans. I just feel weird about paying for a tool that may or may not cover all that I need to know about accessibility. Granted, they offer special pricing for various cases that encourage accessibility.

For these tests, you should note that both Opquast and Tenon don’t rely on the browser’s accessibility API

Arthur Gouveia: empowering your accessibility skills

Presenting Tota11y by Khan academy

Drag the JS file in your code or get the thing in your bookmark bar and it will take care of injecting ALL the things right where you need it. Tota11y is going to interpret all the results it gets and interpret them. End result? A user-friendly approach to accessibility.

Sidenote: it’s JavaScript injection so if your company is not cool with that (it happens)…it may not be the tool for you.

Pros:

  • easy to install
  • great starter pack
  • quicks wins/low hanging fruit (or any other marketing term to basically say GET SHIT DONE FAST)
  • a UI that makes it easy to find problems
  • a great opportunity to learn about best practices in a practical context (that’s a huge plus)
  • Supported by Google (can be a pro for some, not everyone)

Cons:

  • Simplified results
  • No control over WCAG compliance level
  • The hipster logo 😛

tota11y discreet logo

tota11y rainbow logo

HTML Code Sniffer

Cons

Here’s what I remember of this: a monkey with a pulsating nose and the fact that it’s JavaScript injection which is a big nono for some websites. It means that you can’t really have much fun on some websites.

Picking my brain further, I remember that the “summary” provided is brutal. I mean, unless you are a patient little crawler, I don’t see you enjoying this. The summary I got is the reason why some of us drink. I mean, I get it, it’s helpful….but it feels like a no-carb diet: all pain, and maybe some gain in the distant future (That coincidentally is supposed to happen right when most of us decide to give it up and go enjoy an ice cream cone).

Provided by the speaker: pros

  • easy integration because it’s a bookmarklet
  • Good UI for finding problems (no. nope. nope. Call be me fickle or a slave to great UX but I’m not going through that experience).
  • Links to a solution and the associated WCAG principle
  • Validation with different WCAG levels is available.

Toufic Sbeiti – Colour Contrast

Colour Contrast Analyzer

Pros of the tool:

  • it’s free
  • available for Windows or OSX
  • available in multiple languages
  • it’s from the Paciello Group (they are good people in my book so it’s a pro for me)
  • 2 core functionalities: 
    • it gives an assessment of color contrast based on the WCAG 2.0 the standard
    • it simulates certain visual conditions like dichromatic color-blindness and cataracts. Based on my family history, this is just a tiny pre-course for what’s in my future (cataracts mind you, no sudden onset of color-blindness in my family!)

Web Developer Toolbar by Chris Pederick

Pros of the web dev toolbar:

  • it’s free
  • you already have an expert of this tool in-house if you work with an SEO expert (been using that thing for YEARS).
  • that extension can be installed in Chrome, Firefox and Opera. However, the UI is slightly different in each browser.
  • it’s fairly straightforward and you can always find tutorials for this toolbar on SEO blogs

What does the toolbar actually do?

  • Lets you see ALTs
  • Lets you disable Javascript
  • Lets you disable CSS
  • Lets you see tables
  • Shows content hierarchy
  • Basically, to make it short and sweet, it’s like a #nofilter version of any website.

AInspector

Heads up, the link provided will lead you to a Firefox add-on situation. You’ve been warned. This tool has its own documentation which comes in handy.

So what does it do? Well, it evaluates accessibility compliance for any website page based on WCAG 2.0 Level A and AA requirements. The feedback is provided in 2 sections: rule categories and WCAG guidelines.

Denis Boudreau – back to basics: the keyboard + Axe Tools

Denis is pretty kickass at making accessibility feel…well accessible. Good reminder: the best tool to get started is your keyboard. If you can’t navigate a website with your tab key and your sweet moves…it’s not accessible.

Check out the W3’s perspective on that.

Axe Tools

Full disclosure, Denis’ company is the one behind this Firefox extension.

What I liked about this tool? It doesn’t give false positives.

I know, I know, it sounds like something a TV commercial would say about a pregnancy test. But still, false positives are pretty awful for your confidence. So here are some guiding principles for the Axe Tools team:

Automated accessibility testing rules must…

  1. have 0 false positive rate
  2. be fast, be lightweight
  3. work in all modern browsers (because seriously, fuck Internet Explorer, I’ve spent 3 years being depending on IE 7 for stuff and I think I should be sent to therapy to get over my trauma)
  4. be tested automatically