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.
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"> </map>
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.
http://www.ccmaker.com/ allows you to create closed captions.
5) Special Cases
Never Depend on Color Alone.
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.
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”
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.
==Review of Section 508 Standards for Web Accessibility==
Material taken from: