University drive road sign

Web Services

Section 508 Accessibility Guidelines

Back to Web Accessibility at CSUCI

Creating accessible web sites seems intimidating at first, once you've done it once or twice, it will become second nature.

Section 508 of the Rehabilitation Act of 1973 defines a set of sixteen guidelines for determining whether or not a web page is accessible.

The following table lists the sixteen Section 508 guidelines, discusses how to address each guideline.
Section 508 Guideline How to address the Guideline

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

  1. Add text descriptions to <img> tags using the ALT attribute (up to 80 characters)
  2. Create long text descriptions for complex charts, images and graphics. Use LONGDESC attribute for long text descriptions.
  3. Spacers & non-essential images set to: alt=""
  4. Caption all video clips
  5. Provide text transcript for audio clips

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

  1. Videos must be captioned
  2. Captioning must be real time
  3. Captioning must be synchronized

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

  1. Don’t depend on color alone to convey information or meaning
  2. Ensure sufficient color contrast between text & background
  3. Check text for “color words”

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

  1. Use HTML headings, paragraphs, lists, and tables to add structure to content
  2. Use CSS (not HTML) to control presentation/display of content
  3. Check that page can still be read, navigated and understood with CSS style sheet turned off.

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

Add ALT text to each region in an image map

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

  1. Avoid use of server side image maps
  2. Add ALT text to each region in an image map

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

Use <th> tags and “scope” attribute to define table row and column headings

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

Use <td> tag and “headers” attribute to define heading information for cells

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

  1. Ensure <title> tag in each frame describes frame content
  2. Ensure <frame> tag has descriptive “name” and “title” attributes set

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

  1. Avoid animated GIFs
  2. Remove any blinking, moving or flashing text or graphics

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

  1. Design your page carefully so that you don’t need two versions (this can be accomplished through standards-based design using well-structured HTML and CSS)
  2. If you have two versions, both must have equivalent information & functionality
  3. Text-only page must be updated whenever primary page changes

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

  1. Ensure scripts work with keyboard only and without a mouse
  2. Test your page using a screen reader or talking browser
  3. Turn JavaScript off and test page to ensure no information is lost
  4. Design your site so that it will work properly without JavaScript

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

  1. Ensure that non-HTML content and software is accessible
  2. Provide a link to the software used to view/read the non-HTML content (e.g., provide a link to Adobe Acrobat Reader on each page which contains PDF files, etc.)

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

  1. Add “value” attribute and text to push buttons
  2. Add “alt” attribute and text to image buttons
  3. Add “title” attribute to <input>, <select>, and <textarea> tags
  4. Use a <label> tag with descriptive text
    • before each text entry field
    • before each <select> tag
    • after each radio button or checkbox field
  5. Group form elements using <fieldset>, <legend>, and <optgroup> tags
  6. Check that forms can be navigated by keyboard

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

  1. Add a link that enables users to jump to the main body content of a page. Skip Navigation Example Code
  2. If you use an official CSUCI web template, this code and functionality is built-in.

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

  1. Check for forms with timed response requirements
  2. Create a mechanism to alert users and enable them to request more time to complete a transaction

Code Examples

Skip Navigation Example Code

NOTE: addition of this code to a web page is only necessary if you are not using one of the official CSUCI templates.

1. Directly after <body> tag in your HTML document, add the following HTML:

<div id="skip">
<a href="#back_to_top" name="back_to_top" id="back_to_top"></a>
<a href="#skip_navigation"><img src="http://www.csuci.edu/images/spacer.gif" width="1" height="1" border="0" alt="Skip to content"></a></div>

2. At the start of the actual page body content, add the following HTML code:

<a name="skip_navigation" id="skip_navigation"></a>

3. If you use the CSUCI template and CSS style sheet, you are complete. Otherwise, you must insert the following additional CSS code into your page style sheet; or, you can copy & paste the entire code below into the <head> tag of the web page:

<style type="text/css" media="all">
#skip a, #skip a:hover, #skip a:visited { position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden; }
#skip a:active { position:static; width:auto; height:auto; }
</style>

4. The skip navigation link setup is now complete.

Related Links

Last updated: 2009-06-18