Gaël Poupard edited this page Feb 19, 2018 · 9 revisions

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.

Note: a11y.css encourages HTML5 usage. If you're using older syntax, some messages might show up despite the fact that your markup is valid with your <doctype>. You can open an issue, we'll see if we can improve selectors to allow older usages.

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

Note: CSS best practices do not belong to this CSS file. Some selectors are ugly as hell, but we need them in order to select what we need to select.


CSS counters are incremented on each error/advice/warning and results are displayed with body::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 developer to see what’s going on. It will appear on the bottom left side of your page. :)