facebook google plus twitter
Webucator's Free Web Accessibility and Section 508 Tutorial

Lesson: Review of Section 508 Standards for Web Accessibility

Welcome to our free Web Accessibility and Section 508 tutorial. This tutorial is based on Webucator's Web Accessibility and Section 508 Training for Experienced Web Designers course.

This summary is focused on the sixteen standards for web accessibility written by the Access Board for Section 508 of the Workforce Reinvestment Act of 1998.

Beginning in June of 2001, all government web sites were required to conform to these standards. Any contractor doing web development for the Federal government must build web sites that conform to these standards. Any company doing business with the Federal government or with states receiving technical assistance funds (Tech Act states) would do best to put forth an accessible web presence.

For these and the numerous other reasons stated in Section 1, you'll want to follow these standards for your business.

The full set of Section 508 final standards is available on the Access Board web site. The specific standards for the web are in 1194.22 of that document entitled "Web-based Intranet and Internet Information and Applications."

As of this writing (October 2007), the Section 508 Standards are being revised, but they probably will not be formalized and in effect for perhaps a year. There is an Access Board site that addresses the revision and a Wiki that is used by the Advisory Committee (TEITAC) drafting the revision.

Here is the summary of the standards:

Lesson Goals

  • The sixteen standards for web accessibility

1194.22 (a) Offer Text Equivalents

A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).

Every image on your web site must have alternative text including alt="" for images that do not carry important information or that are redundant. Audio content must have captions and/or transcripts. Use the longdesc attribute and/or in-line text to describe images like charts or graphs where the alt-text does not carry equivalent information.

1194.22 (b) Present Synchronized Multimedia

Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.

Text equivalents for multimedia content must be synchronized with the presentation, i.e., captions must be included. Web authors are encouraged to include transcripts of audio content as well as synchronized alternatives because those transcripts permit searching and extracting.

1194.22 (c) Remain Independent of Color

Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.

Do not convey important information with color alone. Use font, special characters, images with alt-text or other context in addition to using color.

1194.22 (d) Stay Independent of Style Sheets

Documents shall be organized so they are readable without requiring an associated style sheet.

Style sheets are effective in adding font variations and colors to your web pages. But don't substitute style changes for the structural elements of HTML like headings, paragraphs, and lists.

If you use CSS for positioning or page-wide color controls, check out your pages with style sheets disabled to be sure that information is not lost.

1194.22 (e) Provide Redundant Links for Server-Side Maps

Redundant text links shall be provided for each active region of a server-side image map.

If you must use a server-side map, make sure there are equivalent text links for every active region on the map.

1194.22 (f) Use Client-Side Image Maps

Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.

Because polygons can be used to describe any area to as much detail as desired, it makes sense to use only client-side image maps instead of server-side maps. Be sure to include the alternative text for each area of the map and the main map image itself. The later may will be alt="" since the important information and function is in the regions of the map.

1194.22 (g) Label Row and Column Headers

Row and column headers shall be identified for data tables.

Use the table header markup (th) for header cells of your data table and for corner cells where the scope in ambiguous add the scope attribute, with the value row or col. Instead, you may use a td element for header cells when you add the scope attribute, scope="row" or scope="col", to specify header cells.

1194.22 (h) Use the Headers Attribute in Complex Tables

Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.

It is probably not a good idea to use tables that have more than one logical level of row or column headers. If you do use such complex data tables, include the id attribute on every header cell and the headers attribute on every data cell. The value of the headers attribute is a (space separated) list the id's of all header cells for that data cell.

1194.22 (i) Supply Frame Titles (attributes and elements)

Frames shall be titled with text that facilitates frame identification and navigation.

In order to facilitate reasonable navigation of a frame site each frame element in the frameset needs a meaningful title attribute. Each frame page needs to have a title element.

1194.22 (j) Reduce Flicker

Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.

Don't use animated gifs, Flash, or other features that cause a portion of the screen to flicker. This condition can cause seizures in people with photosensitive epilepsy.

1194.22 (k) Offer a Text-only Alternative (LAST RESORT)

A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.

If you cannot meet some aspect of the 508 Standards, as a last resort, you can create a "text-only" site. The text-only site must have all the information of the main site, must be updated with the same frequency as the main site, and must be immediately and obviously accessible from the main page.

1194.22 (l) Write Accessible Scripts

When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.

One way to check your site for Section 508 compliance on this standard is to be sure essential information is not lost when JavaScript functions are turned off. If you use mouse-over highlighting or if there are alternatives for the links in your mouse-over menus, essential information will not be lost.

If you use scripting to write essential information in visible form when your document is loading, then that information will be available to assistive technology.

If you are using hidden content exposed with JavaScript event handlers, make sure that either equivalents are available without JavaScript or that you can trigger the event handlers with the keyboard.

1194.22 (m) Specify Accessible Applets and Plug-ins

When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with 1194.21 (a)(1-11).

Applets and plug-ins must satisfy the Section 508 software standards. In particular, they must be completely usable without a mouse. As focus moves from object to object, assistive technology must be able to determine the role and default action of each focused object. Test your use of applets or plug-ins using only the keyboard.

1194.22 (n) Design Accessible Forms

When electronic forms are designed to be completed online, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.

Make certain you label form elements carefully, placing the text labels close to the controls. Use the label element to programmatically associate prompts with input elements when the on-screen prompting text is adequate. Use the title attribute on the input control when the prompting text is inadequate or dispersed.

1194.22 (o) Offer Skip Navigation

A method shall be provided that permits users to skip repetitive navigation links.

Provide a method for users to skip over navigation links. This can be done with a "skip navigation" link at the top of each page. Also, mark up heading text with HTML headings (h1, h2, etc.) to facilitate simple headings navigation to the main sections of your page.

1194.22 (p) Alert Users to Timed Responses

When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.

If you expect a response from a user in a certain prescribed time, alert the user to that fact and allow for additional time.