What is Alternative (Alt) Text?

Alternative Text is text that is used to describe an image on a website or within a document.  An image is anything on the screen or in the document that is not text. This text is read by assistive devices used by individuals with vision disabilities.  The most common assistive device for this situation would be a screen reader.

Why do I need Alt Text?

The most common reason to include Alt Text is to provide those individuals using assistive devices with text to describe the image used on the site or in the document.  When someone is using a screen reader, if it encounters an image it plays the Alt Text.  If there is no Alt Text, it simply says “image” which does not allow the user to get the full context in a manner similar to someone without a visual disability.

In addition to the screen reader use, if a web browser is unable to load an image, the browser will display the Alt Text in place of the image. This is beneficial not only to an individual using an assistive device, but also to anyone accessing the site and experiencing difficulty loading the image.

Types of Images

Informative Images

Informative images convey a simple concept or information that can be expressed in a short phrase or sentence.  The text alternative should convey the meaning or content that is displayed visually, which typically isn’t a literal description of the image.

Examples of Informative Images and the corresponding Alt Text from Web Accessibility Initiative

Decorative Images

Decorative images don’t add information to the content of a page. For example, the information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive.

In these cases, a null (empty) alt text should be provided (alt="") so that they can be ignored by assistive technologies, such as screen readers. Text values for these types of images would add audible clutter to screen reader output or could distract users if the topic is different from that in adjacent text. Leaving out the alt attribute is also not an option because when it is not provided, some screen readers will announce the file name of the image instead.

Examples of Decorative Images and the corresponding Alt Text from Web Accessibility Initiative

Functional Images

Functional images are used to initiate actions rather than to convey information. They are used in buttons, links, and other interactive elements. The text alternative for the image should convey the action that will be initiated (the purpose of the image), rather than a description of the image. For instance, as shown in examples below, the text alternative should be “print this page” rather than “(image of a) printer”, “search” rather than “magnifying lens” or “Example.com homepage” rather than “Example.com logo”.

Missing or empty alt values create significant problems for screen reader users because functional images are essential to the functionality of the content. Screen readers will typically announce the image file name, the image URL, or the URL for the link destination, which is unlikely to help users understand the action that will be initiated by the image.

Examples of Functional Images and the corresponding Alt Text from Web Accessibility Initiative

Complex Images

Complex images contain substantial information – more than can be conveyed in a short phrase or sentence. Examples can typically include:

• Graphs and charts, including flow charts and organizational charts;
• Diagrams and illustrations where the page text relies on the user being able to understand the image;
• Maps showing locations or other information such as weather systems.

In these cases, a two-part text alternative is required. The first part is the short description to identify the image and, where appropriate, indicate the location of the long description. The second part is the long description – a textual representation of the essential information conveyed by the image. Web Accessibility Initiative provides examples of alt text for complex images to show different approaches that can be used to provide short and long descriptions.

Examples of Complex Images and the corresponding Alt Text from Web Accessibility Initiative

Writing Good Alternative Text

Good alternative text should explain the content of the image.  One suggestion that has been used is to imagine you are trying to describe the image to someone on a telephone call.

• Be accurate and equivalent in representing content and function.
• Limit text.  Typically only a few words and necessary, but sometimes may need a short sentence or two
• Don’t be redundant.  If text near the image provides information, don’t repeat the same information
• Avoid using phrases like “image of” and “picture of”