Web Site Accessibility
Guidelines for SCS Webmasters

Skip to Main Content

What is Accessibility? - Making Your Web Site Accessible
Checklist for Accessibility
Must Have Items - Should Have Items - Try To Have Items
Items for More Experienced Webmasters
Apply These Items if Your Use These Special Features

Applets & Scripts
Blinking, Moving, or Flickering Content
Color
CSS
Forms
Frames
Graphs

Web Design Hints for SCS Webmasters

Images

Rationale

Nongraphical browsers and screen readers cannot reveal images (and other non-text elements) to visually impaired users. To communicate the information users need, it is important to associate alternative text with all images, particularly active images such as links or buttons. It is also necessary to provide text equivalents for other non-text elements such as image map hot spots, animations - animated GIFs, images used as list bullets, spacers, graphical buttons.

The alternative text should be meaningful, like "home page" or "search" or "go." When images are not active links, however, use alternative text appropriately. A person who listens to information cannot ignore text as a person viewing the page can ignore an image. If images are not important or if they are redundant, then assign empty alternative text so that the assistive technology and nongraphical browser ignore the image.

The use of alternative text is not just for people who have visual impairments; alternative text is also used by text-only browsers, displayless devices, such as mobile phone browsers, and by search engines. Links that are images are not accessible to voice recognition software unless the author has provided alternative text for the image. The user, navigating the Web with voice recognition, can say "click home page" for the image whose alternative text is "home page". On any given web page, it is important that each image acting as a link has a unique ALT tag for most voice recognition software to work effectively.

Techniques for Images, Animations, Image Maps

The following techniques may be used to meet Checkpoint 1 from the list of "Must Have" Checkpoints.

Standard Images

For images on a Web page, equivalent alternative text must be assigned to each image.

If the image is a photograph of a person, the person's name would be appropriate alternative text.

For example:

<img src="assets/setterlund.jpg" width="136" height="113" ALT="picture of Tim Setterlund">

picture of Tim Setterlund


If the image is redundant or unimportant, empty alternative text should be assigned.

For example:

<img src="assets/clear.gif" width="130" height="25" ALT="">

 

Animated Images

For animated images that convey content, equivalent alternative text must be assigned to each image, and it must include all important information from the image. For example:

<img src="assets/misson_motto.gif" width="453" height="262" ALT="Collierville High School Mission Statement. Collierville High School's mission is to provide comprehensive, student oriented services that meet student's diverse, individual needs. Motto - Learn, Share, Succeed.">

Collierville High School Mission Statement. Collierville High School's mission is to provide comprehensive, student oriented services that meet student's diverse, individual needs. Motto - Learn, Share, Succeed.

 

Image Links

When images are used as links, the ideal alternative text is the EXACT label contained in the image.

For example:

<img src="assets/accessibility.gif" width="140" height="27" alt="Accessibility" border="0" name="accessibility_off">

Accessibility

Do not use the ALT attribute to add additional or verbose information. Users who "listen" to alternative text cannot ignore the text as a user viewing the page can ignore the image.

For example:

<img src="assets/accessibility.gif" width="140" height="27" alt="Click here to go to the accessibility home page" border="0" name="accessibility_off">

Click here to go to the accessibility home page


Submit and Input Images

When images are used as Go or Submit buttons on forms, equivalent alternative text must be assigned.

For example:

<INPUT type="image" name="Go" src="assets/go.gif" width="44" height="45" alt="Go">

Go

 

Image Maps

Client-side image maps are accessible when the alternative text is supplied for each area of the image map. You must provide alternative text for the image map itself as well.

When an image map requires regions that cannot be defined by an available geometric shape, a server-side map may be used. In this case, provide a list of equivalent links, one for each URL that can be activated through the map.
 
When images are used as client-side image maps with multiple hotspot regions, assign alternative text for EACH hotspot area of the map. In the following example, the alternative text for the image map ("SIP Navigation") is succinct and describes its purpose.

SIP Navigation The Report to the State Goal 1 Goal 2 Goal 3 Goal 4 Collierville High School Pat Albee


<img src="assets/sip_header.gif" width="446" height="294" name="sip_header" usemap="sip_headerMap" border="0" alt="SIP Navigation">
<map name="sip_headerMap">
<area shape="rect" coords="33,147,182,165" href="state_report.htm" alt="The Report to the State">
<area shape="rect" coords="13,191,46,287" href="goal1.htm" alt="Goal 1">
<area shape="rect" coords="49,188,86,286" href="goal2.htm" alt="Goal 2">
<area shape="rect" coords="90,189,125,285" href="goal3.htm" alt="Goal 3">
<area shape="rect" coords="128,190,157,285" href="goal4.htm" alt="Goal 4">
<area shape="rect" coords="272,8,437,28" href="http://www.scs.k12.tn.us/scs/high/collierville/DEFAULT.HTML" alt="Collierville High School">
<area shape="rect" coords="267,101,440,125" href="http://www.scs.k12.tn.us">
<area shape="rect" coords="374,235,434,252" href="mailto:albeep@ten-nash.ten.k12.tn.us" alt="Pat Albee">
</map>

Each area of the image map has alternative text that is the same as the text label on the image. A nongraphical browser will render alternative text as the links of the image map. A sighted user using only the keyboard can tab to each area of the image map, see the visual focus indicator, and select that hotspot with the Enter key.

Testing

There are several methods to use to ensure that the web page complies with this checkpoint. Here are the easiest and most available to the majority of webmasters.

  1. Turn off images in your browser and view the page. Each image is replaced with its alternative text. It should be obvious which images are not labeled. This is a quick way to check your page.
  2. Test the site using Bobby. It will list all the images that lack alternative text.

 

What is Accessibility? - Making Your Web Site Accessible
Checklist for Accessibility
Must Have Items - Should Have Items - Try To Have Items
Items for More Experienced Webmasters
Apply These Items if Your Use These Special Features

Applets & Scripts
Blinking, Moving, or Flickering Content
Color
CSS
Forms
Frames
Graphs

Web Design Hints for SCS Webmasters