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?
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.
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.
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.
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!