Ad Council - Website 508 Compliance Specifications

Please note: In addition to the guidelines below if the website is sponsored by SAMHSA/HHS please see SAMHSA’s web policies and guidelines.

Introduction

This document outlines the provisions of the Section 508 accessibility guidelines and provides recommendations for coding and markup to meet the guidelines. The recommendations are intended to serve as a general guide to Section 508 compliance. Additional research, coding, and testing may be required in particular instances to create accessible content that complies with the guidelines. Links to tools and additional information have been provided at the end of this document for this purpose.

Section 508 Guidelines

  1. A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).
  2. Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.
  3. Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.
  4. Documents shall be organized so they are readable without requiring an associated style sheet.
  5. Redundant text links shall be provided for each active region of a server-side image map.
  6. 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.
  7. Row and column headers shall be identified for data tables.
  8. 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.
  9. Frames shall be titled with text that facilitates frame identification and navigation.
  10. Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.
  11. 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.
  12. 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.
  13. 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).
  14. 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.
  15. A method shall be provided that permits users to skip repetitive navigation links.
  16. When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.
  17. Additional Tools & Resources

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

A non-text element is an image, graphic, audio clip, or other feature that conveys meaning through a picture or sound. Examples include buttons, pictures, and embedded or streaming audio and video.

Use the TITLE attribute in conjunction with the ALT attribute. The content of the TITLE attribute will match that of the ALT text. The TITLE attribute provides the tool tip pop-up text to users using browsers other than Internet Explorer, ensuring that these users will have access to the information provided by the ALT Text. The TITLE attribute also provides a secondary means for users employing screen readers to access the alternate text for the image.

Example code:

<img src="image.jpg" alt="This is alternate text" title="This is title text" />

When the image conveys a substantial amount of information or complex information, such as a chart or graph, provide a link to a page that fully describes the image.

Example:

Sales chart: percentage of total sales by regionText description of the Sales Chart

Back to the Section 508 Guidelines list

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

Video - Accessible Alternatives

Include closed captioning within video files. Closed-captioning should be synchronized with the video. Also provide a link to the text transcript file when possible.

Image showing a video with closed captioning

Audio - Accessible Alternatives

The accessible alternative for audio is a text transcription. A text transcription should be stored as a separate HTML file and contain an accurate transcription of the audio content. The transcription should be made available as a hyperlink immediately preceding or following the audio link.

Back to the Section 508 Guidelines list

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

Links in content:

  • Identify links with an underline.
  • Avoid using unnecessary characters in link text. For example, the link Return to home page >> would be verbalized by a screen reader as "Return to home page greater than greater than."

Links in navigation:

  • In vertical navigation:
    • Markup the navigation as a list, using the <li> tag
    • Use indentation to convey the heirarchical structure of the site
    • Use a bold font weight or other visual indicator to indicate the user's current page (do not rely only on color).
  • In horizontal navigation:
    • Markup the navigation as a list, using the <li> tag
    • Use sufficient contrast to indicate the current page.

Example screenshot of different link types:

Image showing various examples of link styling

Avoid using only color to convey information. When using color to convey information, accompany the color with a text description.

Example:

Here, green and red are used to convey information. Accompanying the color is text conveying the same information.

Image showing how to provide an accessible alternative for colors

Back to the Section 508 Guidelines list

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

When stylesheets are disabled, the content of the page is presented in a logical order, and this order is maintained throughout the entire website.

Examples:

Back to the Section 508 Guidelines list

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

  • Use only client-side image maps to avoid this redundancy.
  • Provide ALT and TITLE text for each active region of the image map. The ALT and TITLE text should communicate the purpose of the link and its destination.

Example client-side image map:

<img src="image.jpg" width="500" height="500" border="0" usemap="#imagemap" alt="Image with multiple clickable areas" title="Image with multiple clickable areas" />
<map name="imagemap" id="imagemap">
<area shape="rect" coords="12,16,243,220" href="#" alt="This is area1" title="This is area1" />
<area shape="rect" coords="256,17,480,220" href="#" alt="This is area 2" title="This is area2" />
<area shape="rect" coords="17,278,247,486" href="#" alt="This is area 3" title="This is area3" />
<area shape="rect" coords="261,278,476,484" href="#" alt="This is area 4" title="This is area4" />
</map>

Back to the Section 508 Guidelines list

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.

Image map code:

  • Use only client-side image maps with coordinate sets defining the shape of each clickable region.
  • Recommend using simple geometric shapes such as squares and rectangles to define image map regions.

Placement of the image map in page codebase:

  • Insert the image map in the source code so that it corresponds to the place in the content where the map will appear, especially for image maps used for navigation.
  • Avoid placing image map code at the end of the page source if possible. Screen readers access image map links at the point they appear in the source code and not at the point where the map would be in the visual display in the browser.

Back to the Section 508 Guidelines list

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

Use the <th> tag to identify column and row headers.

Example HTML:

<table cellpadding="5" cellspacing="0" border="1" summary="This is a summary of the table.">
<tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
    <th>Header 4</th>
</tr>
...
</table>

Use the "summary" attribute to provide a description of the table format and the data contained in the table.

Example HTML:

<table cellpadding="5" cellspacing="0" border="1" summary="This table lists the average monthly rainfall for the city of Washington, D.C. Each row includes the average rainfall (measured in inches) for one month.">

Back to the Section 508 Guidelines list

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.

Large tables of data can be difficult to interpret if a person is using a non-visual means of accessing the web. Users of screen readers can easily get "lost" inside a table because it may be impossible to associate a particular cell that a screen reader is reading with the corresponding column headings and row names.

For instance, a table includes the academic level and current program for students. Each row in the table may represent a student. One column lists the student's academic level and another column lists the student's current program. Finding the program corresponding to the third student listed in the table involves finding the cell in the fourth row and the second column. For a table of 15 students, the table will have at least 45 cells. Without a method to associate the headings with each cell, determining the context of the cells can be difficult for user's employing assistive technology.

Here is a table with both row and column headers:

Student Academic Level Current Program
Lori Badia M.A. completed Ph.D. English
Susan Bailey B.S. completed M.B.A.
Alicia Baker B.A., in progress Dept. of Education

Here is the code used to define this table, including headers:

<table border="1" id="datatable" summary="This table contains information on student programs. Each row lists the student name, academic level completed to date, and current program in which the student is enrolled.">
    <tr>
        <th scope="col">Student</th>
        <th scope="col">Academic Level</th>
        <th scope="col">Current Program</th>
    </tr>
    <tr>
        <th scope="row">Lori Badia</th>
        <td>M.A. completed</td>
        <td>Ph.D. English</td>
    </tr>
    <tr>
        <th scope="row">Susan Bailey</th>
        <td>B.S. completed</td>
        <td><p>M.B.A.</p></td>
    </tr>
    <tr>
        <th scope="row"><p>Alicia Baker</p></th>
        <td><p>B.A., in progress</p></td>
        <td><p>Dept. of Education</p></td>
    </tr>
</table>

As a screen-reader, like JAWS, reads this table, each data cell can be identified by either row or column header. For instance, when reading across row two, JAWS reads the row header:

"Student Lori Badia, academic level, M.A. completed; current program, Ph.D. English."

When reading down, JAWS reads the row header for each cell. For instance, when reading column three:

"Lori Badia, Ph.D. English; Susan Bailey, M.B.A., Alicia Baker, Dept. of English."

Row and column headers help ensure that each cell within the table is understood within the correct context.

Back to the Section 508 Guidelines list

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

Frames provide a means of visually dividing the screen into distinct areas that can be separately rewritten. Unfortunately, frames can also present difficulties for users with disabilities when frames are not easily identifiable to assistive technology. For example, frames can be used to create "navigational bars" in a fixed position on the screen. The content is displayed in another frame on the screen.

The solution is to title all frames clearly to communicate their purpose. Provide alternate content within a <noframes> tag for browsers that do not support frames.

Example HTML:

<frameset cols="100,*" frameborder="no" border="0" framespacing="0">
<frame src="nav.html" name="navigation" scrolling="no" title="Site Navigation">
<frame src="content.html" name="content" title="Page Content">
</frameset>
<noframes>
<body><p>This website uses frames. You may <a href="index.html">navigate to the site home page</a>and use the site without frames.</p>
</body>
</noframes>

Back to the Section 508 Guidelines list

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

Avoiding flickering screens and content elements (graphics and text). Instead, use strong writing to convey important information. Do not use the HTML <blink> or <marquee> tags.

Reasons to avoid using screen elements that flicker:

  • Elements that flicker between the rate of 2 Hz and 55 Hz may cause seizures in individuals that have photosensitive epilepsy.
  • Elements that move on screen may be difficult to view for individuals using screen magnifiers.
  • The <blink> and <marquee> tags are deprecated HTML markup.

Back to the Section 508 Guidelines list

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.

If page content cannot be made accessible through the use of the 508 guidelines, a plain HTML page should be provided. Provide a clear link to this plain HTML page.

When the content of the inaccessible page is updated, the content of the alternate accessible page should also be updated.

Back to the Section 508 Guidelines list

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.

When client-side scripting languages, such as JavaScript, are used to provide information or to create interface elements such as navigation, you must employ text equivalents to provide access to the information for assistive technology devices.

For example, if JavaScript is used to display and hide content, use a standard text link to trigger the action and communicate that JavaScript is used to display/hide the content and communicates the action. For example:
View upcoming events (requires JavaScript to display the list of events)

If an image is used as the link, provide ALT and TITLE text to communicate the information and action. For example:

<a href="javascript:myFunction();"><img src="myFunction.gif" width=150" height="50" alt="Launch the asset management form (Requires JavaScript and opens in a new browser window)" title="Launch the asset management form (Requires JavaScript and opens in a new browser window)" /></a>

If JavaScript event handlers are used, use device-independent event handlers when possible to trigger actions (onsubmit, etc.). These types of event handlers do not require a specific input device to function and repsond to the outcome of an action instead of the device that initiated the action. If device-dependent handlers are used, pair mouse-specific handlers with keyboard-specific handlers so that the action can be initiated by more than one type of input device. For example:

  • pair onmousedown with onkeydown
  • pair onmouseup with onkeyup
  • pair onclick with onkeypress

An easy way to implement JavaScript that is both unobtrusive and accessibile is to use any of a multitude of JavaScript frameworks which separate the JavaScript and HTML. One such library is JQuery. It is light, fairly easy to use, and there are hundreds of plugins for it that allow you to manipulate the visual user interface. The unobtrusive nature of the plugins permits the content to be accessible. Since the JavaScript and HTML are separated, the HTML content will be accessible to users employing assistive devices such as screen readers.

Noscript Alternative

When client-side JavaScript is used, alternate content and messaging should be provided using the <noscript> tag. This tag is used to:

  • provide messaging to users that JavaScript is used for functionality and to identify the page features that require it
  • provide an alternate means, or a link to an alternate means, of accessing the content and features provided by the scripting

In this example, an image is loaded in place of the Flash content. The message communicates that JavaScript is required to access the content.
Image showing an example of a Flash backup (HTML Equivalent)

In this example, the <noscript> tag is used to communicate the feature that requires JavaScript and to provide a link to access the content provided by the scripting:

<noscript><p class="noscript">You must have JavaScript enabled to view the recent events. Please enable JavaScript or click the "More Events" link to access the events. <a href="eventspage.php">More events.</a></p></noscript>

In this example, the <noscript> tag is used to provide a non-script version of the link that uses JavaScript. Note that JavaScript is used to write out the link. This ensures that when scripting is disabled, only one link will be displayed on the page:

<script language="JavaScript" type="text/javascript">
document.write(' <a href="javascript:myFunction();"><img src="myFunction.gif" width=150" height="50" alt="Launch the asset management form (Requires JavaScript and opens in a new browser window)" title="Launch the asset management form (Requires JavaScript and opens in a new browser window)" /></a>' );
</script>
<noscript><a href="myFunctionpage.php" target="_new"><img src="myFunction.gif" width=150" height="50" alt="Launch the asset management form (opens in a new browser window)" title="Launch the asset management form (opens in a new browser window)" /></a></noscript>

For more information on accessibility issues when using Javascript, see:

Back to the Section 508 Guidelines list

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

Communicate that the plug-in is required to view the content and provide a link to download the plug-in. In the screenshot below, the “Community of Scholars – Shaping the Future” content is the non-Flash version of the Flash piece. The Flash piece includes a number of stories, and the content for these additional stories can be accessed by the “More Stories” link. The content that appears in the Flash is presented as a series of standard website pages. Also, this non-Flash version includes a link to download the Adobe Flash plug-in.

Image showing an example of a Flash backup (HTML Equivalent)

Here is another example:

Image showing an example of a Flash backup (HTML Equivalent)

Back to the Section 508 Guidelines list

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.

  • Use the <label> tag and id attribute to associate form labels with their controls.

    Example:

    <form name="form1" method="post" action="submitform.php">
        <label for="firstelement">Form Label 1</label><input type="text" id="firstelement">
        <label for="secondelement">Form Label 2</label><input type="checkbox" id="secondelement">
        <label for="thirdelement">Form Label 3</label><input type="radio" name="s" id="thirdelement">
        <label for="fourthelement">Form Label 4</label><input type="radio" name="s" id="fourthelement">
        <label for="fifthelement">Form Label 5</label>
        <select name="selmenu" id="fifthelement">
            <option>Select an option</option>
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
        </select>
    </form>

  • If the form control does not include labeling text, include placeholder text in the control.

    Example:

    Image showing a form with placeholder text instead of labels
  • Form elements should be able to be accessed in the correct order (the order in which they appear in the browser's visual display) when using the keyboard's tab key to move through them. For complex forms, use the "tabindex" attribute to establish the correct tabbing order.

  • Provide a clear indication of which fields are required. If color is used, also indicate required fields in a manner other than color.

    Example:

    Image showing a form with required fields denoted by both color and text
  • Place all instructional text prior to the first form element. Assistive technologies such as screen readers will enter a special "forms mode" when encountering a form on a web page, in which the tab key will allow the user to move the cursor from form element to form element, which will bypass text between these elements.

  • Provide an alternate method for users to submit form information. For example, in the instructional text preceding the form, provide an email address to which users can send the information collected by the form.

Back to the Section 508 Guidelines list

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

Recommend providing a set of links enabling users employing screen readers and text-only browsers to jump to a particular set of navigation links (for sites that employ multiple sets of navigation links) and to skip over the navigation altogether and jump directly to the main content areas on the page.

Example HTML:

<div class="access">
    <h2>Accessibility Navigation:</h2>
    <ul>
        <li><a href="#resource_head" title="Skip to resource navigation">Skip to resource navigation</a></li>
        <li><a href="#section" title="Skip to section navigation">Skip to section navigation</a></li>
        <li><a href="#topic" title="Skip to topic navigation">Skip to topic navigation</a></li>
        <li><a href="#foot" title="Skip to services navigation">Skip to services navigation</a></li>
        <li><a href="#copy" title="Skip to main content">Skip to main content</a></li>
    </ul>
</div>

In the above example, the "access" class is used to hide the set of navigation links from the browser's visual display, but not from screen readers and other assistive software.

Example CSS:

.access {
height:0;
width:0;
overflow:hidden;
position:absolute;
left:-9999px;
}

Back to the Section 508 Guidelines list

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

  • Place the indicator in a conspicuous location at the beginning of the main content of the page and provide an explanation of how the timing functions.
  • Plan on the widest possible audience when determining the duration of time allotted to the user to complete the activity.
  • Provide a link or other functional item that will enable the user to increase the time allotment.
  • Use a platform and browser independent server-side timing mechanism.
  • Test to ensure that the timing mechanism is accessible to screen readers, and text-only browsers.

Back to the Section 508 Guidelines list

q. Tools & Resources

Captioning Resources

Accessibility Testing Software

Data Table Markup

Section 508 Guidelines:

Back to the Section 508 Guidelines list