Three years ago I wrote about 508 compliance and tools I used to perform testing. Nowadays I use different tools do this work, depending on the environment I need to test, which can be public or private (password protected, or accessed through VPN).
508 compliance testing on open environments
My preferred tool to do 508 compliance testing is Total Validator Pro: http://www.totalvalidator.com/downloads/protool.html
You can run this tool over the entire website, and it’ll give you a detailed report of all the issues of 508 compliance, HTML, CSS, spelling and broken links. It also shows you the piece of code with the issue, which is very helpful for identifying the problem in the source code.
508 compliance testing on password protected environments, or those who are accessed through VPN
For those cases, I use WAVE Toolbar for Firefox: https://addons.mozilla.org/en-US/firefox/addon/wave-toolbar/
This tool is not perfect, it doesn’t give you a textual report of the problems, but visual indicators over the website, which sometimes are hidden under hidden or small objects. The only way to make sure to see all these visual indicators is by disabling the CSS styles of the website.
An alternate solution is the Total Validator Pro extension for Chrome or Firefox: http://www.totalvalidator.com/downloads/extension.html
This extension allows you to grab the cookies of your browser that has the user session of the website you are testing, but it can be really tricky to configure.
Non-automated 508 compliance assessment with a screen reader
A non automated 508 compliance testing with a screen reader is recommended, because you will be able to experience what a visually impaired does when using that type of tools, and check if the content is meaningful, if the sequence of the read actually makes sense (using float:right totally reverses the reading of an interface). For this test, I use JAWS: http://www.freedomscientific.com/downloads/jaws/jaws-downloads.asp
Please notice that this tool reads better the screen on Internet Explorer, but you can do it on other browsers too.
When you perform this test, make sure that:
- Images have the right alt text.
- Forms are read properly.
- Icons have the proper labels.
- The order of the reading makes sense.
- Headings (H1, H2, H3, etc) are used properly.
- Meaningless or confusing elements are avoided (i.e.: The “»” character used sometimes for “Read More »” adds confusion to the reading).
Color contrast verification of websites and mockups
For color contrast validation I use the tool Colour Contrast Analyser: http://www.paciellogroup.com/resources/contrastAnalyser
This tool allows you to compare the level of contrast between text and background, over anything you have in your screen (browser, JPEGs, etc). If you use two screens, it’s better you do the testing on your primary screen, for some reason it doesn’t work for me on my secondary screen. The results you’ll get with that tool are based on the WCAG 2.0 standard (http://www.w3.org/TR/WCAG20/).
