Section 508: 16 Web Requirements

Holly Valero

Holly@HollyWorks.com

Press the enter key or click the slide to begin.

What is Section 508?

Section 508 is the 1998 amendment to the Rehabilitation Act, requiring Federal agencies to ensure that information technology is accessible to persons with disabilities.

Section 508 applies to software applications and operating systems, Internet websites, telecommunication products, video, multimedia, laptops, desktops - everywhere you find technology.

The focus of this presentation is: Web-based Intranet and Internet Information and Applications (1194.22)

Who has to comply?

Federal agencies are required to comply. They are also required to purchase accessible technology, so contractors, vendors and anyone receiving federal money should provide products and services in an accessible format. The "Buy Accessible" partnership exists to ensure that Federal dollars spent in the private sector are earmarked for the most accessible IT products and services.

Section 508 guidelines vary with the unique demands of each kind of technology. And like anything, it's easier when you know how.

Rule 1: Text equivalents - Empty ALT

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

Decorative images used for design only should be coded with a blank "ALT" or "alternative" tag:

< img src="pixel.gif" width="1" height="1" alt="" >

Why: They contain no information and it keeps document readers from repeating words like: "spacer, spacer, spacer..."

Rule 1: Text equivalents - Basic ALT

Images that may be described easily should include a descriptive alt tag:

< img src="smilingaligators.jpg" alt="Smiling baby aligators" width="600" height="315" / >

Rule 1: Text equivalents - Longdesc

If your image description is over 150 characters, provide a longdesc link in the image tag itself and create a separate page with the image description. If the information is already conveyed on the same page? The longdesc tag may be omitted.

< img src="classof2001.jpg" alt="Class of 2001" longdesc="classmembers.html" width="600" height="400" / >

Rule 2: Equivalents for Multimedia

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

Rich media experiences are most accessible when they include sight and sound. Video may be augmented with an audio track, or synchronized captions. Audio and video files may include text transcripts.

The goal is to present the information equally.

Keep in mind that multimedia files can be huge and take forever to download. Waiting 45 minutes to download a video when all you want is the audio is no fun either. Offer shorter, smaller files and get creative with your presentation.

Rule 3: Color

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

Even though there are eight different kinds of colorblindness, not that many people are colorblind. However, bright red text on a green background hurts everyone's eyes.

Color-coding used in design is fine as long as it isn't critical to navigation. Run any questionable pages through the Colorblind Web Page Filter to double-check.

Rule 3: Stylesheets

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

Stylesheets control about 95% of the look and feel of today's websites. To make sure they degrade gracefully, define your styles utilizing existing styles recognized by web browsers. Without the stylesheet, the hierarchy and layout will be preserved.

Examples:

• Poor: .topheadline {font-size: 16px; font-family: helvetica, arial, sans-serif; color:#000 }
• Better: h1 {font-size: 16px; font-family: helvetica, arial, sans-serif; color:#000 }

Rule 5: Image Maps

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

Server side image maps require a program on the web server in order for the embedded links in a single, complex image to be clicked.

Client-side image maps rely upon code within the page. Server side image maps are old technology and only the oldest web browsers don't support client side image maps.

Rule 6: Image Maps II

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

In other words, if you're still using server side image maps? Don't. If you can avoid using image maps at all? Do.

Why? Because image maps are, by default, richer images that may require a longdesc tag.

Clickable image maps of the United States should include those states spelled out as hypertext links if they are mouse-dependent. On the plus side, as hypertext links, they make your website more searchable and improve search engine results.

Rule 7: Tables: Data

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

Tables create a spreadsheet-like grid of rows and columns for your content. With the latest evolution of web browsers and XHTML and CSS, using HTML table tags to define and control layout is no longer necessary.

Rule 7: Tables: Sample

The top row describes the column content. That row should include table header tags in the top row of your table:

<tr><th>Fruit</th> <th>Cost</th></tr>

Rule 8: More complex tables

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

Tables can be just as complex as spreadsheets, with nested sub categories, sub totals, etc. Making a very complex spreadsheet accessible is possible, but it can take forever. Other options include:

• Keep tables simple
• Break complex tables down into smaller tables
• If you created the table using Excel, provide the actual spreadsheet as a download

Rule 9: Frames

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

Framed websites are the VCRs of the Internet. They confuse and befuddle about 40% of your visitors. No one can ever figure out how to print the page they want in a framed site. Link coding is treacherous and a single mistake can result in your entire website loading repeatedly within a frame that keeps shrinking with each click.

Best advice? Don't use them. If you have to? Assign a meaningful title to each frame so the screen reader can orient the user to "content frame," "navigation frame," or "search frame."

Rule 10: Flicker rate

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

It's almost impossible for the average designer or developer to know whether an image is strobing or flickering. Some government agencies have simply banned all animated images to prevent the kind of screen flickering that can cause an epileptic seizure.

Obvious strobing or flashing of images should be avoided.

WebAccessibile.org has an online test for flickering and photosensitivity

Rule 11: Text Only Versions

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

In other words, if your content can't be made accessible, create a text version that is accessible and remember to update both versions faithfully.

Rule 12: Accessible Scripts

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

If you use a Javascript to display information? provide <noscript></noscript> tags directly after that provide an alternative.

If you use dynamic HTML (DHTML) to create drop down menus or layers, make sure any navigational items are accessible by both mouse and keyboard.

Rule 13: Plugins

(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-in or applet that complies with §1194.21(a) through (l).

Always provide a link to plug-ins: QuickTime, Adobe Acrobat, Real, Windows Media Player. For Flash, include a link to the plug-in, a detection script up front to test for the right version of Flash, plus a link to bypass detection and launch the Flash version.

Why? Because a page created with Flash 3 will always detect anything up to Flash 3. Without a "bypass link" most people will be locked out of your website once they update to Flash 4, 5 or 6.

Content displayed by plug-ins should also be accessible.

Rule 14: Forms

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

Forms require additional coding in the page in the form of LABEL, OPTGROUP, LEGEND and ID to describe the form field into which you are entering data, so you enter the proper information in the proper field. A "tabindex" is also helpful to assist in moving from field to field in a specific order:

<input id="email" type="text" tabindex="1">

Accessify offers a nifty accessible form builder as well as a form element generator online.

Rule 15: Skip Links

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

Most websites "batch" links into logical collections: global navigation, sectional navigation, or contact links. It's become more common to provide either a visible or invisible link before each batch, or at the top of the page to facilitate navigation for document readers:

Rule 16: Skip Links

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

Timed responses are usually found in Java, applets, Flash or Shockwave though they are sometimes found in javascript. If you have any element on your page that is timed to either (1.) disable some function, (2.) jump to a new page, or (3.) log-off your visitor after "x" amount of time, alter the code so that it's empowered by the user or include an option to continue.

Testing for Accessibility

UITest.com has a comprehensive set of testing options for analysis and testing including a Site Check Bookmarklet.

To use the bookmarklet, you simply click down on the link and drag it into the toolbar of your web browser. When you are on a page you wish to test, click the bookmarket link.

End

Thanks to Eric Meyers for developing this standards-compliant, self-contained slide show technology - a mix of CSS, XHTML and Javascript.

The printed version of this guide includes all URLs to references cited.

Return to HollyWorks Home Page