Accessibility · Web Design

Section 508

What is Section 508?

The legislation referred to as “Section 508” is actually an amendment to the Workforce Rehabilitation Act of 1973. The amendment was signed into law by President Clinton on August 7, 1998. Section 508 requires that electronic and information technology that is developed by or purchased by the Federal Agencies be accessible by people with disabilities.

Note that this law DOES NOT pertain to private web sites or softwares.

What Does it Mean to be “Accessible?”

Basically, technology is accessible if it can be used as effectively by people with disabilities as by those without.

Section 508 guidelines.

1) Text Alternatives for Images (alt-text)

Use alt attribute for short description of images or image maps.
Use longdesc for longer description. It is a URL to a page with detailed description of img.
Title attr is just for some adivosry information about the image.

<img src=”picnic.gif” … alt=”picnic photo” longdesc=”picnic.htm” />

2) Accessible Navigation

Make In-page Navigation Accessible.
A method shall be provided that permits users to skip repetitive navigation links.


<a href="#maincontent">Skip navigation</a> 

<!-- Main content . Either h1 or a must have the hasLayout property set to 1 -->
<h1><a name="maincontent" id="maincontent"></a>Heading</h1>
<p>This is the first paragraph</p>

IE6/7 have a bug where clickin/keyboarding on the skip nav link will take it to the main content but when the user presses tab again, the control jumps back to where it was left off. To solve this issue make sure to use css to set the hasLayout property of the jump point.

Headings Navigation.
Use proper headers (h1,h2,h3…), to get the allow the screen readers to just skip from one heading to another.

3) Image Maps

There are two kinds of image maps: client-side and server-side. Client-side image maps are by far the most common type of image map to be found on the Web today. In fact, as we shall see, server-side image maps should be avoided.

Client-Side Image Maps.

It is made of two tags:
a) IMG tag
b) Map tag

If you want to use an image map, make it a client-side image map.
Include meaningful alt-text for every <area> of the <map>, alt-text that conveys the function of that hotspot.
Use an appropriate text alternative on the image itself. If there is no information beyond the hotspots then alt=”” is appropriate.
If you must use a server-side map, also include equivalent text links on the page for all hotspots of your server-side map (and please write to me explaining why you need to use a server-side map, because I would like to know).

Ex of client side image map,

<img src="flower-diagram.gif" alt="Flower Diagram" usemap="#flwr-diagram" />

<map name="flwr-diagram">
  <area shape="rect" coords="4,33,76,72" href="..."
    alt="Committee Hearing Schedule">
  <area shape="rect" coords="5,78,88,117" href="..."
    alt="Yesterday's Senate Floor Activity">
  <area shape="rect" coords="5,121,75,140" href=" ... "
    alt="Senate Art">
  <area shape="rect" coords="5,143,59,172" href=" ... "
    alt="Senate History">

4) Audio and Multimedia

Provide a text transcript for the videos or audio files.
A closed caption is a transcript that has been synchronized with the audio or video file.

Youtube allows you to upload text transcripts/captions for you video files. allows you to create closed captions.

5) Special Cases

Never Depend on Color Alone.

Color Contrast.
Presentation of text (and images of text) in electronic documents must have a default contrast ratio of at least 5:1, except if the text is pure decoration. Large-scale text (or images of large-scale text) can allow a contrast ratio of at least 3:1.

Avoid Flicker.

Timed Responses.
When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.
Notify the user if a process is about to time-out.
Provide a prompt asking whether additional time is needed.

Provide Text-Only Page as a Last Resort

6) Accessible Forms

Always make sure that the prompting text is physically close to the associated form control, either immediately above, or immediately to the left or immediately to the right (depending on the input or interaction element).
Always use the label element to specifically (programmatically) associate the prompting text with the input element when on-screen prompting text is adequate and contiguous.
Use the title attribute on the input element to specify the purpose of the control if the on-screen text is not adequate or is dispersed.

Buttons, provide both type and value.
<input type="button" value="click" />

Image Buttons. Provide alt text also for button.
<input type="image" name="Go" src="go.gif" alt="Go" />

7) Accessible Tables

Use tables for data only not for layout.

Use caption element as a title for the data table and and/or use the summary attribute to give a brief overview of the structure of the table.
And markup all table header cells
Use the table header element, th, for all header cells and add the scope attribute when that scope is ambiguous (corners).
Or use td together with the scope to specify header cells
Or use id attributes on the header cells and the headers attribute on the data cells to explicitly associate header information with data cells. This is essential if there are data cells whose header information is not in the same row and the same column as that cell.
And do not use any of the accessible data table markup (th, scope, headers, caption or summary) on a table used for layout. In particular, avoid gratuitous announcements resulting from summary=”This table used for layout”

8) JavaScript

Ensure that essential information is available to users with assistive technology. One way to do this is to ensure that no information is lost when the scripting is turned off.
Be careful of the JavaScript events you use and make sure to test them without the mouse.
Test your JavaScript content with a screen reader or talking browser.

==Review of Section 508 Standards for Web Accessibility==

Material taken from:


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s