Solutions: Checkpoint A, text equivalents

A text equivalent means adding words to represent the purpose of a non-text element. This provision requires that when an image indicates a navigational action such as "move to the next screen" or "go back to the top of the page," the image must be accompanied by actual text that states the purpose of the image. This provision also requires that when an image is used to represent page content, the image must have a text description accompanying it that explains the meaning of the image.

Before:
<img src="logo-green.gif">

After:
<img src="logo-green.gif" alt="Green Company Logo">

Empty ALT Attribute

Web page authors often utilize transparent graphics for spacing. Adding a text description to these elements will produce unnecessary clutter for users of screen readers. For such graphics, an empty ALT attribute is useful.

Before:
<IMG src="transparent.gif" alt="blank space">

After:
<IMG src="transparent.gif" alt="">

Long Description

This attribute specifies a link to a long description of the image. This description should be placed directly on the page, either above or below the image. This is often used for images of complex elements, such as graphs or images that require a lengthier description to convey its meaning. In the past, the “longdesc” attribute was recommended for these purposes. It is now recommended that we abandon this attribute and replace it with a description directly on the page. This will help all users to understand the meaning of our more elaborate images.

The graph shows Ice Cube Tray sales in July, August, September and October for the Far North, Near North, Near South, Deep South Regions. The data show two major trends. The first: that in any month, sales of ice cube trays increase the further south you go. The second: sales in each region decrease as the season changes from summer to autumn.

Or, if you want more detail:

• In the Far North, sales were 3, 4, 2, and 1 ice cube trays from July through October. Total sales in the Far North were 10 trays.

• In the Near North, sales were 8, 7, 5 and 2 ice cube trays from July through October. Total sales in the Near North were 22 trays.

• In the Near South, sales were 23, 18, 11 and 5 ice cube trays from July through October. Total sales in the Near South were 57 trays.

• In the Deep South, sales were 49, 43, 30 and 10 ice cube trays from July through October. Total sales in the Deep South were 132 trays.

Solutions: Checkpoint B, multimedia equivalents

What are considered equivalent alternatives?

Captioning for the audio portion and audio description of visual information of multimedia presentations are considered equivalent alternatives. This provision requires that when an audio portion of a multimedia production is captioned, as required in provision (A), the captioning must be synchronized with the audio. Synchronized captioning would be required so someone reading the captions could also watch the speaker and associate relevant body language with the speech.

If a website offers audio files with no video, do they have to be captioned?

No, because it is not multimedia. However, since audio is a non-text element, a text equivalent, such as a transcript, must be available. Similarly, a (silent) web slide show presentation does not need to have an audio description accompanying it, but does require text alternatives to be associated with the graphics.

If you need assistance in captioning a video or transcribing an audio file, contact:

Solutions: Checkpoint C, color

How would I know if my colors contrast well or not?

You have to use a tool, such as the Juicy Studio Contrast Analyser to determine if your colors have a contrast ratio of 5:1. The Colour Contrast Analyser tool will also show you just how much you have to darken or lighten a color to make it compliant. These tools are part of the Evaluation Questions and can be downloaded from our Evaluation Tools section.  Keep in mind that this tool cannot determine the thickness of your contrasting elements, which is a contributing factor in determining the accessibility of contrasting colors.

Does this mean that all pages have to be displayed in black and white?

No, this provision does not prohibit the use of color to enhance identification of important features. It does, however, require that some other method of identification, such as text labels, must be combined with the use of color. This provision addresses not only the problem of using color to indicate emphasized text, but also the use of color to indicate an action. For example, a web page that directs a user to "press the green button to start" should also identify the green button in some other fashion than simply by color.

Solutions: Checkpoint D, styles

Style sheets

Style sheets can enable users to define specific viewing preferences to accommodate their disability. For instance, users with low vision may create their own style sheet so that, regardless of what web pages they visit, all text is displayed in an extra large font with white characters on a black background. If designers set up their pages to override user-defined style sheets, people with disabilities may not be able to use those pages. For good access, therefore, it is critical that designers ensure that their web pages do not interfere with user-defined style sheets.

In general, the "safest" and most useful form of style sheets are "external" style sheets, in which the style rules are set up in a separate file. An example of an external style sheet is:

Example of source code: <link rel=stylesheet type="text / css" href="http://www.csusb.edu/ACM/section508.css>

Solutions: Checkpoint E, server-side image maps

Server-side image maps should be avoided. Client-side image maps are acceptable. Please reference Checkpoint F to see what evaluation questions will be asked and the solutions pertaining to this type of page element.

Solutions: Checkpoint F, client-side image maps

Client-side image maps are acceptable. Each clickable area must be identified with its link target, and must be reachable via its tab order, just like all other links. Frequently, an alternate means of selection may prove easiest to use for all visitors. (Example: a drop-down list of states in addition to an image map of the country.)

Creating a basic client-side image map requires several steps:

• Identify an image for the map. This image is identified using the <img> tag. To identify it as a map, use the "usemap" attribute.
  
  
• Use the <MAP> tag to "areas" within the map . The <MAP> tag is a container tag that includes various <AREA> tags that are used to identify specific portions of the image.
  
  
• Use <AREA> tags to identify map regions . To identify regions within a map, simply use <AREA> tags within the <MAP> container tags.
  
  
• Making this client-side image map accessible is considerably easier to describe: simply include the "ALT" attribute and area description inside each <AREA> tag.

The following HTML demonstrates how to make a client-side image map:

<img src="navbar.gif" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="0,2,64,19" href="general.html" alt="information about us">
<area shape="rect" coords="65,2,166,20" href="jobs.html" alt="job opportunities">
<area shape="rect" coords="167,2,212,19" href="faq.html" alt="Frequently Asked Questions">
<area shape="rect" coords="214,2,318,21" href="location.html" alt="How to find us">
<area shape="rect" coords="319,2,399,23" href="contact.html" alt="How to contact us">
</map>

Solutions: Checkpoint G, simple tables

Solutions will be forthcoming!

Solutions: Checkpoint H, complex tables

Solutions will be forthcoming!

Solutions: Checkpoint I, frames

It is not recommended, or necessary, that frames be used. However, if you are using frames, they require a meaningful title attribute, as well as equivalent content in a <noframes> element for those agents that do not support frames.

Label frames with <TITLE> tag at the start of your HTML.

<title>Navigation Frame</title>

Label frames inside the frame tag itself using the title and name attributes of the frame tag.

<frame src="frame_nav.htm" name="navigation frame" title="navigation frame">

Once the frames have been named three different times, supply an alternate page users can go to in case their browser does not support frames.

<noframes> Your browser does not support frames. Here is the <a href="main-noframes.html">Non-frame based version of the document.</a> </noframes>

Solutions: Checkpoint J, flicker

Flashing or flickering elements are usually added through technologies such as animated gif's, Java applets, or third-party plug-ins or applications. Java applets and third party plug-ins can be identified by the presence of <APPLET> or <OBJECT> tags. You also should not use the <BLINK> or <MARQUEE> tag to make text blink or move.

Elements that ficker should be avoided.

Solutions: Checkpoint K, text only

Create one compliant page, instead of an alternate text-only page.

Solutions: Checkpoint L, scripts

Solutions will be forthcoming!

Solutions: Checkpoint M, applets and plug-ins

We are no longer using AccVerify to check for keywords such as "adobe" or "word". Instead, AccVerify will be used to locate all types of file extensions that require a program to view. Therefore, all linked files must be accompanied by a link to a program that will open that particular file type. That goes for any file type that can not be viewed in any standard browser.

So don't worry about linking to "winzip" for a .zip file. You can link to any standard program that will extract, or, unzip such a file.

Solutions: Checkpoint N, forms

Solutions will be forthcoming!

Solutions: Checkpoint O, skip links

This code may look different on your own site, depending on the size of the table, the graphic or text used. Both examples are necessary in two different areas of each page. Vital elements appear in bold.

EXAMPLE Providing a link at the top of your page to a "target" in the content area:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
  <td bgcolor="#000066">
   <table width="620" border="0" cellspacing="0" cellpadding="0">
    <tr>
     <td><a href="http://www.csusb.edu/ACM/#MainContent"><img src="http://www.csusb.edu/ACM/../banner1.gif" alt="Skip to Main Content"></a></td>
     <td><a href="http://www.csusb.edu"><img src="http://purchasing.csusb.edu/graphics/banner2.gif" alt="CSUSB Home Page" border="0"></a></td>
    </tr>
   </table>
  </td>
 </tr>
</table>

EXAMPLE Providing a "target" in the content area:

<a name="MainContent"></a>

Solutions: Checkpoint P, timed response

Solutions will be forthcoming!