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 |
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.
The following techniques may be used to meet Checkpoint 1 from the list of "Must Have" Checkpoints.
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">
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="">
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.">
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">
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">
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">
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.
<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.
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.
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
