1.1.1 - Provide Text Alternatives for Non-Text Content

Learn how to provide an alternative text description for non-text content. Make sure the description conveys the same message or functionality.

Summary

Provide an alternative text description for non-text content. Make sure the description conveys the same message or functionality.

All non-text content (like images, charts, icons, and infographics) must have an appropriate text equivalent.

Requirements

  • Images (like logos and icons) that communicate information must have short text alternatives that serve the same purpose as the image:
    • When the image conveys information (like an image that is part of a news article), the text alternative should convey the same information as the image.
    • When the purpose of the image is to convey functionality (like a magnifying glass icon), the text alternative should describe the action that will be performed (like "search").
    • Each image should have a unique alternative to distinguish them from each other. For example, instead of multiple 'share' buttons with the same alternative "Share", the alternative should be "Share ..." and include the name of the related item.
  • The element type or trait, such as image or button, should not be included in the alternative as it is programmatically determined and added by the screen reader. For example:
    • A 'play' button coded as a button with the alternative "Play button" would be spoken as "Play button. Button.".
    • An image coded as an image with an alternative beginning "Image of ..." would be spoken as "Image. Image of ...".

Complex Images

  • Images (like infographics, charts, and diagrams) that communicate complex information should have longer text descriptions within the same page.

Purely Decorative and Redundant Images

  • Images that are purely decorative (meaning they do not convey any information) should be explicitly silenced in the code so that they are not read out by screen readers.
  • Images that are completely redundant (meaning they convey information or functionality that is already conveyed in text) should be explicitly silenced in the code so that they are not read out by screen readers.
    • For example, if a magnifying glass icon is part of a button that has a visible label with the text "Search", the image itself shouldn't be read out by screen readers.

Common Mistakes

  • The image communicates information but does not have a text description.
  • The text description does not communicate the same information as the image.
  • The image has a text description that is an exact duplication of content elsewhere on the page.

Why?

This ensures that information conveyed by non-text content is available to people who cannot see it, like screen reader users.

Official wording in the Web Content Accessibility Guidelines

1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. (Level A)

  • Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose.

  • Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content.

  • Test: If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content.

  • Sensory: If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content.

  • CAPTCHA: If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities.

  • Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.

See the W3C's detailed explanation of this guideline with techniques and examples.

Guidance for Design

  • Annotate your designs to tell developers what the text equivalent of images should be:
    • When the image conveys information (like an image that is part of a news article), the text description should convey the same information as the image.
    • When the purpose of the image is to convey a functionality (like a magnifying glass icon), the text description should convey that funtionality (like "search").
  • Annotate your designs to tell developers which images should be 'silenced' (ignored by screen readers) because they are purely decorative or completely redundant.
  • Make sure that charts, graphs, diagrams and other complex images are described in text on the same page or in a page linked from the page containing the image.
    • When charts or graphs are used to display information that (that is, data with internal relationships that could naturally represented in a table), the same data is shown in a correctly marked-up table.
  • Verbose alternatives make content harder to listen to and understand for screen reader users. Endeavour to be succinct, and avoid redundant phrasing such as "Picture of ...", "... logo", or "Select this to ...".

This section needs one or more examples. Contribute via Github.

More guidance for design

Guidance for Web

All HTML images should have the alt attribute in their source code

  • If an img or svg element doesn't have an alt attribute, screen readers will read the file name of the image as it's name;
  • If you need to 'silence' an image, give it alt="".

For images that convey information, the alt text should convey the same information

  • A meaningful and accurate textual description should be provided for all 'informative images' (meanings images that convey important information).

For images that convey functionality, the alt text should convey the same functionality

  • A textual description of their function or destination content should be provided for all 'functional images' (meaning images that act as links or buttons).
  • For example, a mignifying glass icon that triggers a search function should have alt="Search" (unless the image is accompanied by a "Search" text node, in which case the image should be silenced to avoid repetition).

Do not include the type of the element in its alt text

  • Textual descriptions do not need to communicate the type of element (e.g. “image of”, “button for” do not need to be included).

Silence images that are purely decorative or completely redundant using alt=""

  • Images that are 'purely decorative' (meaning images that have a solely decorative purpose) and images that are 'completely redundant' (meaning images whose meaning is already written in text) should have alt="", or can be CSS background images, so that they're ignored by screen readers.
  • When using the alt="" attribute, you can further enhance accessibility by including the role="presentation" attribute. This attribute explicitly indicates to screen readers that the image should be ignored for any functional or informational purposes.

Do not use CSS background-image for images unless they're purely decorative or redundant

  • Do not use a CSS background-image for images that convey purpose or information not already available in text. (CSS background images should only used for decorative images).
    • Here's why:
      • Background images are not available to assistive technology such as screen readers and are not supported on devices with minimal support for CSS.
      • Additionally, a background image may not load.
      • It is not possible to directly assign alternative text to a CSS background image. Another method must also be used to provide the same information visibly, and in a way that is programmatically determinable by assistive technology, such as screen readers.

Correct Examples

img examples
<!-- Informative image -->
<img src="news.jpg" alt="Breaking news: Earthquake hits the city">

<!-- Complex image -->
<figure>
  <img src="chart.png" alt="Bar chart showing sales data">
  <figcaption>Sales data for the past year</figcaption>
</figure>

<!-- Purely decorative image -->
<img src="divider.png" alt="" role="presentation">

<!-- Redundant image -->
<a href="https://www.web-accessibility.io/">
  <img src="logo.png" alt=""> Web Accessibility Home
</a>
Emojis example

To ensure proper accessibility for screen readers, it is important to follow these steps when including emojis:

  1. Wrap each emoji within a <span> element.
  2. Add the role="img" attribute to each <span> to indicate that it represents an image.
  3. Provide a brief but descriptive aria-label for each <span>.

By implementing these steps, the emojis can be properly interpreted by screen readers, allowing visually impaired users to understand their intended meaning.

<!-- Emojis Accessible in HTML -->
<p>
  Hi, I'm Tim!
  <span role="img" aria-label="hand waving">
    👋
  </span>
</p>
<svg> examples

In these examples, the role="img" attribute is used to indicate that the <svg> element represents an image, and the aria-label attribute (or aria-labelledby with a corresponding id) is used to provide the text alternative.

Remember to adjust the content and descriptions according to the specific context and purpose of the SVG image.

<!-- Informative SVG -->
<svg role="img" aria-label="Product Sales">
  <rect x="10" y="10" width="80" height="120" fill="blue"></rect>
  <rect x="110" y="30" width="80" height="100" fill="red"></rect>
</svg>

<!-- Complex SVG -->
<figure>
  <svg role="img" aria-labelledby="chart-title">
    <title id="chart-title">Sales Chart</title>
    <rect x="10" y="10" width="80" height="120" fill="blue"></rect>
    <rect x="110" y="30" width="80" height="100" fill="red"></rect>
  </svg>
  <figcaption>Sales data for the past year</figcaption>
</figure>

<!-- Purely decorative SVG -->
<svg role="presentation">
  <circle cx="50" cy="50" r="40" fill="gray"></circle>
</svg>
Failure examples
<!-- Empty alt tag -->
<img src="news.jpg" alt="" />

<!-- Alt text doesn't convey the same information -->
<img src="news.jpg" alt="Breaking news">

<!-- Alt text doesn't convey the same functionality -->
<button>
  <img src="search.png" alt="Icon">
  Search
</button>

<!-- Redundant alt text -->
<a href="https://www.web-accessibility.io/">
  <img src="logo.png" alt="Logo web accessibility"> Web Accessibility Home
</a>

More guidance for Web

More info

Useful Resources

Discuss on Twitter • View on GitHub • Main Sources