Text Alternatives for Images (alt-text)

Contact Us or call 1-877-932-8228
Text Alternatives for Images (alt-text)

Text Alternatives for Images (alt-text)

  • Section 508 requires a text equivalent be provided for every non-text element.
  • Single most important thing you can do to make a web page accessible
  • Use alt attribute on every
    • Img element in the HTML code
    • Input with type="image"
    • Area element
  • Provides textual replacement for pictures (images), which conveys the same thing as is communicated to a sighted user seeing the image
  • Provide a textual replacement for pictures (images)
  • Convey in text what is communicated to a sighted user seeing the image
  • Use the alt attribute on every img element
  • Use the alt attribute on every input with type="image"
  • Use the alt attribute on every area element
  • Lose Customers
  • Decrease Search Engine Optimization
  • Failure to comply with Section 508

The single most important thing you can do to make a web page accessible is to include alternative text for images. When you make the decision to add alternative text, you include the many people who use talking browsers, screen readers, text browsers or browsers on small devices.

Use the alt attribute on every img element in the HTML code for your page. Also use the alt attribute on every input control with type="image" (see Accessible Forms lesson) and on every area element (see Accessible Image Maps lesson).

The idea of alternative text is to provide a textual replacement for images that conveys the same thing as is communicated to a sighted user seeing the image. Screen readers and talking browsers can't do anything with an image itself; instead, they will announce the alternative text. If an image is active, i.e., if the image is inside an anchor element (<a>), then the alternative text should convey the purpose or function of the link. If the image is not active, but conveys information, then the alternative text must convey the same information. If an image conveys no information, or is redundant, specify that with null alt-text, alt="", that's quote, quote, with no space between.

The Section 508 standard for text alternatives states:

A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).

If you don't provide this information when you have an image on your web page, you will be losing customers, you will not be doing your best for search engine optimization, and you will not be compliant with either the Section 508 Web Standards or with the Web Content Accessibility Guidelines, Version 1.0 or 2.0.

Next