Alternative text for images

On this page:

Overview

Alternative text (alt text) is intended as an alternative for non-text content such as images. Note that videos and other media have other methods of providing text alternatives.

The alt text should convey the purpose and function of the non-text content. This means that the same image may have different alt text depending on the context and purpose of the image. For example, an image used for marketing will have different alt text than the same image used for training purposes.

For images, the alt attribute is used to provide the alt text. All images must have an alt attribute, although a null alt attribute is sometimes acceptable. Null alt is empty alt text, where alt equals double quotation mark followed by a double quotation mark, with no space between (alt="").

Alt text is more art than science. The only "wrong" is not including alt text where it is needed. Considering alt text on a scale of "good" versus "better" will you help craft more useful alt text.

Expectation

Many people who rely on assistive technology cannot perceive information that is conveyed by images unless a text or audio alternative is provided. Alt text is also displayed if images are disabled or fail to load. Each image on a website should include an alt attribute on the element. Try to keep alt text under 150 characters, if possible. Some assistive technologies have difficulty with long alt text. If necessary, you can provide longer descriptions.

Affected audiences

  • People who are blind
  • People with certain cognitive disabilities
  • People who rely on assistive technology for any reason not listed here
  • People with slow internet connections or limited mobile data plans
  • Search engines

General guidelines

  • Ensure that all <img>, <area>, and <input[type="image"]> elements have an alt attribute.
  • For an image that conveys meaning (in other words, is helpful to understanding the page content or controls):
    • Keep the alt text concise (no more than 10-15 words).
    • If the image contains words, include the words in the alt text.
    • If the image is used as a link or control, the alt text should help form the link text or control label.
    • If the alt text would be redundant to neighboring text, treat the image as if it is decorative.
  • For an image that is decorative, use an empty alt="" attribute to indicate it should not be announced.
  • For an image that is part of a <figure> with a <figcaption>, the alt text should describe the image while the <figcaption> provides context for the figure on the page.

For more about identifying image types and using the alt attribute, see the WC3 decision tree.

Create good alternative text

Good alt text follows these rules:

  • Is brief
  • Depends on the image's context
  • Describes the content and function of the image
  • Should not be redundant or provide the same information as accompanying text
  • Does not use phrases like "image of …" or "picture of …"
  • Is null (alt="") for decorative images

Crafting a good description of an image depends on the context of the image. Does the image present important content or is it decorative? Is it a functional image (for example, an arrow that links to the next page)? What is the purpose of the image? One way to help determine if an image is informative or decorative is to remove it. Did important content information that is not already present in the text disappear with the image?

Alt text should represent the content and function of the image but be brief. An image of a bald eagle may have alt text such as "American bald eagle" or "Bald eagle catching a fish". However, if the purpose of the image is to demonstrate a photographic technique rather than show an eagle, the alt text would change to indicate that (for example, "Eagle soaring over lake demonstrating high dynamic range").

Alt text should not duplicate text already presented with the image unless it is part of the image itself. For example, profile images accompanying a brief profile that begins with the person's name do not need to repeat the name. Using null alt text (alt="") in this instance is acceptable.

Images that function as links or buttons should indicate their function without including the word "link" or "button" in either the alt text or the link/button text. If the link or button has no text content, the image alt text serves as the link or button text. For example, a magnifying glass image is often used as a search button. Since there is no button text, alt="Search" could be used to identify the button. Note that a literal description (for example, alt="magnifying glass") does not adequately describe the purpose or function of the image.

Some buttons or links include both an image and text. In some cases, the image provides additional information that is not included in the text, such as a link to a file that includes a PDF image. In this situation, adding alt text to identify the image (for example, alt="PDF"), provides necessary information that is not included in the link text. In contrast, a link consisting of the text "Email" and an envelope image would not benefit from descriptive alt text (for example, alt="envelope"). In this case, null alt text would be appropriate.

Using phrases such as "image of …", "… image", or "graphic of …" in alt text is redundant. Screen readers will announce the item as "image". For example, alt text "image of a corgi" might be announced by a screen reader as "image of a corgi image" or "image image of a corgi".

For more examples, see the WebAIM tutorial.

Captions and complex images

Following are tips and resources for describing more complex images:

  • Images that are part of figures (<figure>) with captions also need alt text. In general, the <figcaption> will provide context for the image, similar to a newspaper or magazine image caption, while the alt text describes the contents of the image. For example:

    Alt text: "Kids playing with toy cars"
    Caption: "Zoom! The race begins."

  • Science, technology, engineering, and math (STEM) images can be complicated. The National Center for Accessible Media (NCAM) provides a guide to describing scientific content, which begins with focusing on the data.
  • NCAM also provides guidance for diagrams and complex images for tests. Making tests accessible for the visually impaired involves more than just good alt text on images. For more comprehensive information, see the NWEA Image Description Guidelines for Assessments (PDF).
  • Art is subjective, and can create different interpretations and emotional responses. Unless the art is presented to convey a particular emotion, the alt text should be objective. Similar to images that are part of figures, alt text for art images should describe the appearance of the artwork. Analysis and critique are better left to text on the page.
  • The Diagram Center provides examples for many types of complex images, including music, cartoons and comics, maps, and several types of diagrams.

Related documents

Keyboard access and visual focus Landmarks and web page accessibility General guidelines for creating accessible documents Headings and web page accessibility Hidden content and web page accessibility

This is document arwg in the Knowledge Base.
Last modified on 2023-07-17 08:44:12.