Diagnostic.css – Super quick web accessibility testing

In my quest to make accessibility accessible, I’ve created a super-easy-to-use tool that people can use to do accessibility testing. If you can view the page in the browser, you can use this tool. Diagnostic.css is a CSS (Cascading Stylesheets) file which, when applied to a web page, will highlight accessibility errors in the page.

What it Tests For

1. Deprecated elements
2. Deprecated and/ or presentational attributes
3. Inline frames without title attributes
4. Server-side image maps
5. Images without alt attributes
6. Image buttons without alt attributes
7. Image Map area elements without alt attributes
8. Items with an img role without aria labels
9. Images without a valid src attribute
10. Links without a valid hypertext reference
11. Fieldsets without legends
12. Label elements without for attributes
13. Invalid dir attribute values
14. Empty TITLE elements
15. Implicit headings
16. Meta refresh
17. Missing lang attribute on the HTML element
18. Use of accesskey attributes
19. Empty table header cells
20. Possible layout tables
21. Invalidly nested lists

How to Use It

There are two primary ways to use it:

1. Super-easiest: Drag this link to your browser’s bookmark toolbar – Diagnostic.css;%20if%20(l)%20{%20l.parentNode.removeChild(l);%20return;%20}%20l%20=%20d.createElement(‘link’);%20l.id%20=%20i;%20l.rel%20=%20’stylesheet’;%20l.type%20=%20’text/css’;%20l.href%20=%20’//rawgithub.com/karlgroves/diagnostic.css/master/diagnostic.css’;%20d.getElementsByTagName(‘head’)[0].appendChild(l);%20}(document,%20’diagnosticCSS’));). Once it is in your toolbar, all you have to do is go to a page you want to test, and then click the bookmarklet. This will test that page against the latest-and-greatest version of the stylesheet.
2. Pretty Easy: Download the code from GitHub and do as you wish. Install it on your page as you develop, as a quick sanity check during your own testing.

Caveats

1. CSS Generated content is not content. Consequently this means that this testing method may not be accessible for people with certain assistive technologies. According to a brief conversation on Twitter with Ted Drake and Marco Zehe, generated text content is available to JAWS and NVDA. I highly doubt that Window-Eyes or VoiceOver users will be able to access the error messages.
2. This is not comprehensive. There are scores of other tests that could be performed with a dedicated automatic testing tool. As a result, this shouldn’t be the only thing you use in your testing. The intention of the diagnostic style sheet is to do a “smoke test”, if you will, to find some of the more egregious issues quickly and easily.

Diagnostic.css is among the easiest ways one can test for accessibility. That being said, it still does less than two-dozen tests. For more easy ways to test, check out The 6 Simplest Web Accessibility Tests Anyone Can Do.