To ascertain appropriate
alt text think about why an image is being
included in a document. Every image has a reason for being on a
page because it either is purely decorative or
provides information. By first establishing image purpose your
decision of how to write appropriate text alternatives for
different types of images becomes easier. So first decide if the
image is 1.) merely eye candy i.e. bullets, spacers, or box corners
or 2.) if it contributes to understanding, functionality, and/or
appreciation of page content. Then go from there.
The following are six common types of images and example short text alternative markup:
alt Text Good Practices
- Be succinct as possible while still conveying equivalent values. Short text that describes an image's purpose or gives an overview will often suffice. While there is no official length restriction on the length of alt text, many experts recommend 125 characters or fewer because of restrictions within some user agents.
- Provide the same informational content as the image.
- For a purely decorative (eye candy) image, which provides
absolutely no content or functional information use a null
- Avoid redundant alt text. An example of this would be
repeating the same text in your document, as well as in the
altattribute, and is unnecessary.
- Whenever an image is not decorative, concisely explain or label what the image is in the context of the document's purpose without overly duplicating the text in which the image is embedded.
- As a general rule, a clearly identifiable image class should be indicated in alt text along with a terse indication of the image's purpose on the page. For instance:
alt="Line Graph: 2013 Sales indicates constant upward trend"or
alt="Photo: Jane Doe".
- Where an image performs a specific function, such as a graphical link, provide information about its functionality or a name that identifies the content of the destination. A link does not need to be identified as a link as assistive technology will announce it as such.
- Write suitable alt text according to context. The same image in a different situation may need very different alt text.
Context Affects Short Text Alternatives
What's necessary and what's not depends a lot on the function of the image and its context on the page. The same image may require alt text in one spot, but not in another. In the following video Derek Featherstone discusses how context impacts writing appropriate alt text. A transcript of Accessibility: Images in Context is also available.
WebAIM provides further examples in Context is Everything.
The term "
alt tag" is sometimes incorrectly used
instead of the correct term "
alt attribute". Actually as hard core developers
will tell you, in HTML their is no such thing as an "alt tag".
Technically, tags are things like
</p> that you use to mark up your page and the
alt attribute sits inside a tag, like this:
alt="">, but sometimes you'll hear people refer to this
attribute as an "alt tag" so it's good to be aware of this
terminology even though it is incorrect. Calling an attribute a tag
is a common mistake. An attribute is a property of an element that
is written within the start-tag of an element, and should be
referred to as simply an attribute. The text within the quotation
marks is called "alt text".