tota11y, a nice accessibility toolkit for web pages.

Having good accessibility on your website is important for many reasons. I won't go into them right now, but here is the Web Content Acessibility Guidelines, if you want to get started with it. I did however recently come across a tool for assessing accessibility on websites called tota11y. I found it to be quite useful and so I thought I'd share it here.

How to use tota11y

The usage of the tool is quite simple. It places a small button in the lower left of your screen, and when you click it you get a list of all the assessments that tota11y can do. Click each one to place annotations on the page indicating what is being analysed, and to bring up a summary of any problems and what you can do to fix them.

Let's take a quick look at what you can get help with!

Headings

Identifies if any headings are out of order. A h1 should always be followed by a h2, followed by a h3, etc.

Contrast

Looks at the contrast between text and background colors, and makes recommendations for alterations that are more legible.

Link text

Identifies links that would be confusing when read by a screen reader. For example, a link that just contains the text "here", makes it quite hard to know what it leads to without the surrounding context.

Labels

Warns you if there are any inputs with missing labels.

Image alt-text

Warns you if there are any images without alt-text.

Landmarks

Labels all the landmarks that a screen reader can jump to on a page, like navigation sections, or a main section.

Screen reader wand

This is an experimental functionality. When activated, it lets you hover over elements and attempts to display how a screen reader would interpret and read out that element.

How to get tota11y

The easiest way to get tota11y is to set it as a bookmarklet. You can get the code for that on the tota11y website. It is also available as a browser extention and via script tag or npm, in case you want to permanently include the tool on a site somewhere. If you are interested in the motivation behind the creation of this tool, here is a blog post fron Khan Academy going into detail about tota11y and its creation.

In case you are not familiar with the concept "bookmarklet" it is the same thing a regular bookmark in your browser, except instead of opening a website it runs some JavaScript code. You should of course be a bit careful running someone elses JS just like that, but I feel like this piece of code can be trusted due to its origin and large number of contributors, even though I have not personally gone through each line of code to make sure its all good. I simply don't have the time to do that with all open source code I use.

I used this tool on my own website, tobiasljungstrom.net, and was able to identify and fix a couple of issues that I had overlooked. I still have some ways to go before I can call it properly 100% accessible, but every bit helps, and tota11y is a nice friend to have along the way!