10 seconds to test the accessibility of your web app

While the vast majority of us who make the web understand that accessibility is important, taking charge involves one more step: knowing exactly what we’re doing so that what we do makes sense (and doesn’t end up making everything worse).

A11y.css is a small but powerful tool that allows us to test the accessibility of our web apps by just installing a browser extension or a bookmarklet. But its great contribution is that it allows us to learn a lot about markup and styling to improve how we serve our users in terms of accessibility.

What makes this interesting?

In the official site, besides the extensions and the generation of the bookmarlet, you can find the great amount of Errors, Warnings, Obsolete and Advices that the tool itself will look for and highlight when we use it. There you can learn about many issues related to good HTML markup.

This tool can be used in several ways:

1. Bookmarklet

As a bookmark in the bookmarks bar, which when clicked on will detail what should be improved. As they make clear on the site, it has the disadvantage that it can be blocked as an external script, and “many CORS policies might prevent a bookmarklet from working…“.

2. Browser extension (recommended)

It can also be installed as an extension in Firefox and Chrome, which integrates it into each browser’s environment. In this case, we will be able to see the results when we hover the mouse over the highlighted element. At that moment, a banner will appear at the top of the browser window.

To improve

When working as a bookmarklet, as the tool shows the errors below the element in question, sometimes the messages are outside the viewport, so they are not seen. This forces us to open the DevTools and look for the message contained within the ‘content’ property. Perhaps another way of presenting the results will help with this detail.

Conclusion

Improving our services or products on the web is sometimes a matter of taking a few minutes to check out central accessibility issues. A11y.css can help us in the blink of an eye.