a11y.css

Introduction

Pronounced "Alix".

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.

How to use?

WebExtension

Either you're using Firefox or Chrome , you're invited to install and use a11y.css's webextension.

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

As a WebExtension, it also enables to:

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

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