Quickly check your website for common accessibility problems with tenon.io

Tenon.io is a new tool to test web sites against some of the Web Content Accessibility Guidelines criteria. While this does not guarantee the usability of a web site, it gives you an idea of where you may have some problems. Due to its API, it can be integrated into workflows for test automation and other building steps for web projects.

However, sometimes you’ll just quickly want to check your web site and get an overview if something you did has the desired effect.

The Tenon team released a first version of a Chrome extension in December. But because there was no equivalent for Firefox, my ambition was piqued, and I set out to build my first ever Firefox extension.

And guess what? It does even a bit more than the Chrome one! In addition to a tool bar button, it gives Firefox users a context menu item for every page type so keyboard users and those using screen readers have equal access to the functionality. The extension grabs the URL of the currently open tab and submits that to Tenon. It opens a new tab where the Tenon page will display the results.

For the technically interested: I used the Node.js implementation of the Firefox Add-On SDK, called JPM, to build the extension. I was heavily inspired by this blog post published in December about building Firefox extensions the painless way. As I moved along, I wanted to try out io.js, but ran into issues in two modules, so while working on the extension, I contributed bug reports to both JPM and jszip. Did I ever mention that I love working in open source? 😉

So without further due: Here’s the Firefox extension! And if you like it, a positive review is certainly appreciated!

Oh, and if you’re into WordPres development or have often-changing content on your WordPress site, I highly recommend you check out Access Monitor, a WP plugin that integrates with tenon.io, written by Mr. Joe “WordPress Accessibility” Dolson!

Have fun!

6 thoughts on “Quickly check your website for common accessibility problems with tenon.io”

  1. Thanks for plugging Access Monitor, Marco! I’m not sure about my new nickname there, though… 🙂

  2. Used it today, pointed out some things in legacy code blocks that I copied that needed to be fixed. Thanks!

  3. Hm, on Tenon.io, why are the references to WCAG not links. It just says e.g. “Web Content Accessibility Guidelines (WCAG) 2.0, Level A: 2.4.1 Bypass Blocks” and I have to open the spec and find that chapter myself. Seems like an obvious oversight.

  4. For me it doesn’t work. Yesterday morning it gave me an error of “Could not access Tenon’s API, try again”, then simply “Please try again” and now nothing. I don’t get any results.

  5. OK, now it works. One question though: why with firefox and NVDA the edit box contents appear below it, and the box apears empty?

What are your thoughts?