Section 508 Compliance in Plain English

We debated calling this the “Complete Idiot’s Guide to Section 508 Compliance” and to tell you the truth, we’re still leaning towards changing it. In any case, for anyone tasked with creating a Section 508 Compliant website, you may first want to take a look at the Section 508 official site. Much of our info here is shortened, and simplified from the Access Board’s page.

Also, the rigidity of these standards seems fairly debatable, as the Section 508 website itself does not appear to be compliant: using images as labels for the “Site Layout Controls” without text equivalents??

*PLEASE NOTE: We do not assume any liability for the information presented here, and encourage you to do the research yourself. We are not affiliated with the U.S. Government.

(a). Anything non-text (images, flash, etc) must have a text equivalent

For all images, flash, etc include descriptive ‘alt’ tags, or ‘longdesc’ tags – especially when images are used for direction.

(b). Multimedia (Video, Audio, Presentations, etc) must have text equivalent.

Multimedia presentations must be accompanied with appropriate captioning.

(c). Don’t use to color for anything important.

Don’t use color to delineate direction, functions, navigation, etc. Imagine you are color blind and attempt to navigate your site.

(d). Don’t require a stylesheet.

A bit confusing, but basically allow the document to degrade gracefully if the css stylesheet is not present, and don’t require a particular stylesheet for navigation or viewing. Allow users to change font sizes, etc with the browsers if need be.

(e). Provide text links for Server-side image maps.

Not to be confused with client-side image maps, server-side image maps can not be read by screen readers. Image maps created in the webpage or “client-side” image maps are deemed as better alternatives as the links are freely accessible by screen readers.

If you must use server-side image maps, you must provide redundant text links in addition to the image map. See the next item…

(f). If possible, client-side image maps must be used instead of server-side maps.

The only case where client-side image maps couldn’t be used is when it is physically impossible – or the clickable regions cannot be defined using the available client-side geometric shapes.

(g). Row and column headers must be defined for tables.

(h). Data and header cells must be associated in tables with more than 2 rows or columns.

To accomplish both of these requirements, you need to use the ’scope’ attribute within the <th> tags and within the first <td> element of each row. For example:
<table> <tr> <th> </th> <th scope="col" >Spring</th> <th scope="col" >Summer</th> <th scope="col" >Autumn</th> <th scope="col" >Winter</th> </tr> <tr> <td scope="row" >Betty</td> <td>9-5</td> <td>10-6</td> <td>8-4</td><td>7-3</td> </tr> <tr> <td scope="row" >Wilma</td> <td>10-6</td> <td>10-6</td> <td>9-5</td> <td>9-5</td> </tr> <tr> <td scope="row" >Fred</td> <td>10-6</td> <td>10-6</td> <td>10-6</td> <td>10-6</td> </tr> </table>
Taken from the Access Board specs.

(i). Frames need descriptive useful titles.

Or you could simply not use frames and save yourself a million headaches right out of the gate.

(j). No screen flickering or blinking at ridiculous rates.

Specifically, the screen cannot flicker at a frequency greater than 2 and less than 55 Hz, so get out your flickerometer and then ask yourself where did I get this flickerometer and what store carries a flickerometer?

(k) No soup: Create a text-only page.

If you can’t adhere to everything here, you must create a text-only version of every page you are creating and it must be updated as your original is updated. This might be achieved through the use of stylesheets if need be.

(l). Scripts can only be used to help, not depended on.

Javascript especially should be used to augment functionality – it cannot be used to dynamically display core navigation, buttons, etc. All important links and text must be there on the page when it renders for the screen reader to traverse. This is also important for Search Engine Optimization.

(m). Applets/Plugins must be linked.

Use of anything external must have appropriate download links. (E.g. Flash, Acrobat PDFs, etc)

(n). Forms must have labels.

Make sure all elements on your form have properly assigned label tags (the label’s “for” attribute must be equal to the input’s “id”):

<label for=”first”>First Name:</label> <input type=”text” name=”firstname” id=”first” />

(o). Must have a link to “Skip Navigation”

To allow people with screen readers to jump past all repeated navigation links, you must add a link that jumps to the page body. See the link at the top of the USDA’s site.

(p). Alert user if timed response is required.

If for example, a page will expire for security reasons, it must display a prompt if that is the case.

breakthrough design