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="&nbsp;"
• 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:

• Test file 1

Resources

• The ALTIFIERby Michael Vorburger.
• Information about bullets by Yun Jo.
• Information about horizontal bars by Yun Jo.
• User Preferences for ALT Textby Len Kasday.
• Discussions on the w3c-wai-gl listserv:
  • GL's interpretation of null alt-text
  • Non-breaking spaces
  • spaces and alt-text. proposal for the ERT.
• spaces and alt-text. proposal for the ERT (on the w3c-wai-er-ig listserv)
• Use of alt-text in IMGs by Alan Flavell