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
- Deprecated elements
- Deprecated and/ or presentational attributes
- Inline frames without title attributes
- Server-side image maps
- Images without alt attributes
- Image buttons without alt attributes
- Image Map area elements without alt attributes
- Items with an img role without aria labels
- Images without a valid src attribute
- Links without a valid hypertext reference
- Fieldsets without legends
- Label elements without for attributes
- Invalid dir attribute values
- Empty TITLE elements
- Implicit headings
- Meta refresh
- Missing lang attribute on the HTML element
- Use of accesskey attributes
- Empty table header cells
- Possible layout tables
- Invalidly nested lists
How to Use It
There are two primary ways to use it:
- Super-easiest: Drag this link to your browser’s bookmark toolbar – Diagnostic.css. 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.
- 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.
- 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.
- 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.