DC web design news

First of all, What is Section 508?

Section 508 is a requirement for government websites, and in general, for Federal agencies’ electronic and information technology to be accessible to people with disabilities.

Normally, we build websites for general public, we don’t keep in mind features that allow the website to be accessible by Seniors, people with sight disabilities and even blind people. Actually, some minimalistic design trends are way apart of the 508 compliance, designers don’t care so much about the level of contrast, access keys, tabs order, font sizes, etc, they mostly care about the look and feel.

Well, I can say that to make a website 508 compliant is a tedious work. The rules are actually simple, but the execution of those rules take time. In addition, keeping the website free of 508 errors takes time and money too, specially where there are more than one contributor. That’s probably why a .gov site is more expensive than other websites.

Section 508 rules for websites:

508 is not only for websites, it applies to other technologies, like operative systems, software applications, telecommunications, etc; but those rules also apply for information formats, like videos and documents.

This set of rules are specifically for Websites: § 1194.22 Web-based intranet and internet information and applications.

I invite you to read the full list of items on the link above, but to put you in context, some of the rules are:

• Use “meaningful” alt attributes on all the images of your website, even if it’s a graphical element, or a transparent gif to fill in real state.
• Level of contrast between the elements of design should be high.
• You cannot use iframes or javascript code that contains information of the website
• Use label tags for form elements
• The code needs to be valid according to the w3c.
• Videos on your site should have transcript.
• Documents on your site need to have metadata with a summary of the content of the document
• And so on…

How to test 508 compliance on a website:

We know for a fact that part of this process is manual (and quite subjective), and part can be automated.

Manual testing:

Ideally, this should be done on the design and development phases of your website:

1. Be sure that the level of contrast of the elements of your site, specially information vs. its background, is high enough for people with some sight disabilities and Seniors. This tool is very helpful: Color Contrast Analyzer
2. An additional test is to turn your design in grayscale, and measure again the level of contrast
3. Be sure that the alt attributes of the images are “meaningful”. This is very subjective, you may not pass this testing if your website is audited, so please try to be as meaningful or specific as possible. I.e. Instead of “Spacer”, use “blank image to fill in space”.

Automated testing:

There are several tools online to help you detect 508 compliance issues. I normally follow the procedure below. And notice that this procedure has to be done for every single page of your website:

1. Check the web page with the W3C Markup Validation Service: http://validator.w3.org/
2. Check every CSS associated with the web page with the W3C CSS Validation Service: http://jigsaw.w3.org/css-validator/
3. Check again the web page with the WAVE – Web Accessibility Evaluation Tool: http://wave.webaim.org/report.php
4. Finally, check your web page with the HiSoftware® (similar to the one above, but ugly): http://www.cynthiasays.com/

Ironically, websites like whitehouse.gov or GSA.gov don’t pass all the tests, but that is not going to save you from a strict scrutiny by a section 508 consultant.

So, good luck with your section 508 compliance testing!