Section 508 requirements for Federal Website Design

Jon Brundage

Jonwind@windcompany.com

MDCFUG www.cfug-md.org 4/10/01

What is it?

accessibility standards for electronic and information technology as applied to Internet and Intranet websites

16 standardsUnder the law, all Federal websites

must comply by June 21, 2001.

The first 8 paragraphs:

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

Paragraph (b) "Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation."

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

Paragraph (d) "Documents shall be organized so they are readable without requiring an associated style sheet."

Paragraph (e) "Redundant text links shall be provided for each active region of a server-side image map."

Paragraph (f) "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."

Paragraph (g) "Row and column headers shall be identified for data tables."

Paragraph (h) "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."

The 2nd 8 paragraphs:

Paragraph (i) "Frames shall be titledwith text that facilitatesframe identification and navigation."

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

Paragraph (k) "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."

Paragraph (l) "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."

Paragraph (m) "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-inor applet that complieswith § 1194.21(a) through(l)."

Paragraph (n) "When electronic forms are designed to be completed on-line, 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."

Paragraph (o) "A method shall be provided that permits users to skip repetitive navigation links."

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

Dealing with Paragraph a

• For existing sites, Studio “extend find” will help you locate image tags.

• In Dreamweaver/UltraDev 4, create a site map. Open the Site window, click “Reports…(Site menu) and check “missing ALT text” under the HTML reports folder.

• For stored images drawn from your data source, store alt text with the image:

<img src=“#image_path#”alt=“#image_description#”>

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

Dealing with paragraph b

Provide a text transcript of any audio presentation and a link to the text file

RealAudio and other streaming media are coming out with captioning.

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

Dealing with paragraph c

Design your pages so that navigation does not depend on identifying specific colors

There are websites that check your page’s use of colors:

http://www.vischeck.com http://labs.bt.com/people/rigdense/colours/

Keep in mind that many visitors are color blind!

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

Dealing with paragraph d

Instead of using a style sheet, set the page attributes in an application.cfm page.

Style sheets can still be used, but the page must still be able to be viewed clearly if the style sheet is missing.

"Documents shall be organized so they are readable

without requiring an associated style sheet."

Dealing with paragraph e

Use client-side image maps (see paragraph f)

server side image maps were used before the advent of newer browsers, and if you must use one provide an alternate text link.

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

Dealing with paragraph f

Similar to paragraph a, provide “alt” text description with areas of 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."

Dealing with paragraph g

Use the CAPTION element and the SUMMARY attribute <TABLE summary=“This table displays the model type and count of each auto in stock.”>

Use the THEAD and HEADER CELL ID attributes

This link gives an explanation of table design for non-visual rendering: http://www.w3.org/TR/html4/struct/tables.html#non-visual-rendering

"Row and column headers shall be identified for data tables."

Dealing with paragraph h

(same solutions as paragraph g)

"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."

Dealing with paragraph i

EXAMPLE:<FRAMESET COLS="20%,*"><FRAME NAME="Menu area, this frame does not change throughout this site." SRC="menu.htm"><FRAME NAME="Main page, the requested content appears in this frame." RC="mainpage.htm"> </FRAMESET>

Note that the long description will make your links to the the target frame lengthy ; <A href=“form.cfm” target=“Main page, the requested content appears in this frame.”>

The Board that set the Section 508 requirements doesn’t like frames!

Use of tables can create a page layout that looks like a framed page when it is in fact a non-frame page. Use <CFINCLUDE> as a tool to aid you.

"Frames shall be titled with text that facilitates frame

identification and navigation."

Dealing with paragraph j

NO BLINKING TEXTUse caution with FLASH moviesMarquee text areas cannot be

interpreted by screen readers.

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

Dealing with paragraph k

The main point is that text alternatives must be kept current with your regular pages.

"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."

Dealing with paragraph L

Use a <NOSCRIPT> tag after the script code:

<NOSCRIPT>"This element requires that javascript is enabled in order to function correctly. It displays the date this page was last updated. No further information is provided."</NOSCRIPT>

"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."

Dealing with paragraph m

Provide a full explanation of the type of plug-in, and a link to the download page where the user may obtain the plug-in:

“Download the registration form here in Adobe Acrobat (.pdf) format. If you need the free Acrobat reader, go here to download.”

"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) through (l)."

Dealing with paragraph n

If you look at the detailed description of this requirement in the VBA site pages, you will notice that the standard is a bit “fuzzy”! What the board wants is to ensure that any form layout can be interpreted by assistive technologies.

"When electronic forms are designed to be completed on-line, 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."

Dealing with paragraph 0

Add a tag just after the <BODY> tag that jumps to an anchor at the beginning of your page’s content:

<a href="#content">Skip to content</a>

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

Dealing with paragraph p

This is another requirement that the Board is “fuzzy” on. Their website does not have an example. Possible solutions include coding form pages with a <CFLOCATION> tag to direct visitors to a warning page if they are about to time out, or a javascript to display an alert message.

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

Conclusion

The Federal Government has recognized the need for greater access to websites by people with disabilities. As web developers it is our responsibility to reach the widest audience possible by designing pages that can be used by visitors with disabilities. This is not only the “right thing to do” but is in our own interests because we are in the business of communicating with as many people as possible.

Links

http://www.advancedperipheral.com/ http://www.tni.be/english/e_products.html http://www.resna.org/ http://www.4access.com/ http://www.section508.gov/index.html http://www.w3.org/TR/html4/struct/tables.html#non-visual-

rendering