Pronounced « Alix ». Because it's fun.

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 hovering marked elements, a little banner should appear on top of your browser displaying what's going on.

This file is not a replacement to a complete tool such as OpQuast Reporting. 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.

You can use a11y.css in multiple ways.

You can easily use the latest version of this stylesheet by adding this bookmarklet to your bookmarks:

javascript:(function(){a11ycss=document.createElement('LINK');a11ycss.href='https://rawgit.com/ffoodd/a11y.css/master/css/a11y-en.css';a11ycss.rel='stylesheet';a11ycss.media='all';document.body.appendChild(a11ycss);})();

You can also generate your own bookmarklet (choosing language and minimum level) on the dedicated page then directly drag it to your bookmarks. Isn't it handy?

CSS counters are incremented on each error/advice/warning and results are displayed with html::after. Since it is added through CSS, it is basically fake-content which is good since it is no more than visual indication for the developper to see what's going on. It will appear on the bottom left side of your page :).

You will find static CSS files in the /CSS folder. CSS files are available in french and english, and leveled or full. You can simply download it and add it to your usual stack, just like any CSS.

You can play with sources and easily build your own version of a11y.css.

If you're brave enough, the gulpfile.js allows you to work with every brick of this project:

• Sass linting and compilation;
• CSS linting and optimization (for readability);
• Hologram and SassDoc generation.

I guess you will find your way out of this configuration file, but if not: ask me! Notice: you'll need a few Ruby gem, Ì suggest Bundler and bundle install.

You can get this project by running npm install a11y.css or bower install a11y.css.

Many references helped me in the making of this stylesheet:

• https://github.com/redroot/holmes/blob/master/holmes.css
• https://github.com/karlgroves/diagnostic.css
• http://www.w3.org/TR/html5/obsolete.html#obsolete
• https://github.com/nternetinspired/debug-css
• https://yahoo.github.io/debugCSS/
• http://meyerweb.com/eric/tools/css/diagnostics/
• http://accessites.org/site/2006/07/big-red-angry-text/
• http://www.accessiweb.org/index.php/accessiweb-html5aria-liste-deployee.html
• https://github.com/Heydon/REVENGE.CSS
• https://code.google.com/p/qa-style-sheet/
• Mémento « Sites web — Les bonnes pratiques »
• « Intégration Web, les bonnes pratiques », pages 335/336

Although let's keep in mind the idea has nothing new (there is an article from Marco Battilana from 2006, and a proposal by Eric Meyer himself from 2007). I only tried to push things further. I suggest you read my article (in French) to learn more about the project.

They helped a lot:

• @HugoGiraudel
• @7studio
• @Heydon
• @kloh-fr
• @GaetanBt
• @a5e

And they took time to open a few issues:

• @goetsu
• @Twikito
• @olamedia
• @bartveneman

Thank you all!

This project is distributed under MIT license and CC BY 3.0 FR. Copyright (c) 2013 Gaël Poupard