Alternative text for images

• Overview
• General guidelines
• Affected audiences
• Create good alternative text
• Captions and complex images

Overview

Alternative text for images, also known as alt text, is a description of an image read by assistive technology. It also helps search engines understand the content of an image, which can improve SEO.

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 its context and purpose. For example, an image used for marketing will have different alt text than the same image used for training purposes.

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.

General guidelines

• Each image on a website should have alternative text, if possible.
• Alt text should be in a single language and should not contain special characters or URLs.
• 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 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.

Elements

<img>elements:

• All <img>, <area>, and <input type="image"> elements must have an alt attribute. For images, the alt attribute is used to provide the alt text.
• For an image that is decorative, use a null (empty) alt="" attribute to indicate it should not be announced.
  Note:

  Null alt is empty alt text, where alt equals double quotation mark followed by a double quotation mark, with no space between (alt="").

<svg> elements:

• Meaningful <svg> elements must have a text alternative.
• To convey the SVG to assistive technologies, add role="img".
• Provide a text description using one of the following methods:
  • Add a <title> element as the first child of the <svg>.
  • Use the aria-label or aria-labeled attribute.
  • Add a title attribute.
• Decorative SVGs should not have a role="img" or text description.
  • Add aria-hidden="true" to hide the <svg> icons from assistive technology.
  • Add focusable="false" to each <svg> to ensure they do not receive keyboard focus.

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

Affected audiences

Many people who rely on assistive technology cannot perceive information that is conveyed by images unless a text or audio alternative is provided. They include:

• 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

Without alt text, people who are blind or have low vision may miss out on important information or context that is conveyed through images. By providing alt text, you can ensure that your website is accessible to all users.

Create good alternative text

Alt text should be descriptive with just the right amount of detail. A general guideline is to write your alt text like you're talking to a friend.

Rules for good alt text

Describe the content and function of 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").

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.

Consider image context

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 functional? 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?

Make sure it is not redundant or does not provide the same information as nearby text

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.

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.