Guideline 1. Provide equivalent
alternatives to auditory and visual content.
Checkpoint 1.1 - Provide a
text equivalent for every non-text element.
Technique 1.1.A Check IMG
and INPUT "alt" attribute
IMG and INPUT elements must have a valid "alt"
attribute.
- Not allowed
- no "alt" attribute, e.g. <IMG src="foo.gif">
- alt=" "
- Suspicious
- "alt" attribute value ends with "bytes"
- "alt" attribute value ends with an image file suffix (.gif, .jpg,
.png, etc.).
- "alt" attribute value is placeholder text.such as "{object text goes
here}".
- "alt" attribute value is longer than 150 characters.
- "alt" attribute value is empty (alt="").
- "alt" attribute value is one or more spaces.
- Valid
- IMG is the content of a link with text and the "alt" is null. e.g.
<a href="foo.html"><IMG src="foo.gif" alt="">Please refer to
foo</a> or alt=" ".
Repair Techniques:
- Prompt the user for a functional text equivalent for the image. Suggest
that they read the page to a person over the phone to determine what they
would say for the image. Use that phrase as the alt-text.
- If the author confirms that an image is a bullet, suggest that they
use the "list-style" style sheet property. If they insist on using
images, suggest that the "alt" attribute value be "bullet" or "*."
Bullets tend to have the following characteristics: height > 5, width
> 5, width / height <= 4, height < 30, width < 30.
- If the author confirms that an image is a horizontal bar, suggest
that the "alt" attribute value provide the function that the bar
provides visually such as "end of page" or "navigation bar follows."
If the author confirms that its purpose is decorative, suggest
something simple like "---" or "decorative divider." Horizontal bars
tend to have the following characteristics: height > 1, width /
height >= 10, width > 100, height < 50. [@@ what style sheet
properties can you use on an HR?]
- If the author confirms that an image is a transparent image used to
force layout (a "spacer"):
- suggest that the "alt" attribute be empty or a space. Spacer
images tend to have width or height = 1.
- suggest that the author use style sheets to layout the
page.
- If the document contains another instance of the image and that image
contains a value for the "alt" attribute, suggest that the "alt" attribute
value be reused.
Test Files and Discussion Files:
Resources