a11y.css

Pronounced Alix. Because it’s simpler.

Introduction

This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet.

When activating the stylesheet, a tip should appear beside each incriminated elements, displaying what’s going on.

This file is not a replacement to a complete tool such as aXe, Tanaguru or Tenon. It only intends to show possible weaknesses. You should obviously do some manual check by hand to know whether the code should or should not be fixed.

How to use?

WebExtension

Either you're using Firefox or Chrome, you're invited to install and use a11y.css's webextension — which has its own repository.

It provides some nice features not included in the main CSS file (for now), such as:

• force focus visibility;
• show lang attributes;
• check images' alternatives by displaying them;
• increase text spacings.

As a WebExtension, it also enables to:

• toggle CSS and change level on the fly,
• remember settings for each tab,
• automatically update in the background.

Bookmarklet

You can also use the form on the left sidebar to define the minimum level and language, in order to generate a custom bookmarklet. Then simply drag the green button to your bookmarks, and you're done! You're now able to use a11y.css on every page you visit by simply clicking on this bookmark.

Bookmarklet's caveats

The main caveat consists of CSP HTTP headers blocking unsafe / external script — mostly due to browsers bugs and inconsistencies. But many CORS policies might prevent a bookmarklet from working…

But also note that the bookmarklet might take a couple of seconds to load since it basically injects the a11y.css stylesheet within the DOM of the page you're browsing. It might be a bit slow at first because it is being downloaded from GitHub, but it's the price to pay to keep it up-to-date.

Contribution & customisation

If you want to get involved in this project, be sure to take a look at its wiki (also available in French). I'll be pleased to read your issues or pull requests!