Accessibility Insights

Back to Info and Examples for Accessibility Insights for Web

image-alt

An <img> element must have alternative text.

Why it matters

Because assistive technologies can’t interpret an image directly, they rely on alternative text to communicate the image's meaning to users. If an image has (non-empty) alternative text, the image is identified as meaningful, and its alternative text is presented to the user. If an image has an empty alt attribute, the image is identified as decorative and ignored. If an image has no alternative text at all, the image is presumed to be meaningful, and its filename is likely to be presented to the user.

How to fix

  1. Determine whether the image is meaningful or decorative:

    • An image is meaningful if it conveys information that isn’t available through other page content.
    • An image is decorative if it could be removed from the page with no impact on meaning or function.

  2. If the <img> element is decorative, provide an empty alt attribute ( alt="" ).

  3. If the <img> element is meaningful, provide descriptive alternative text using one of the following methods:

    Good

    • title attribute

    Better

    • aria-label
    • aria-labelledby attribute

    Best

    • alt attribute

For tips on writing good text alternatives, see Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content.

Example

 

Fail

This image has no alternative text. Assistive technologies identify the image by its file name, which isn't descriptive. Some users will have no idea what the image conveys.
<img src="191121131947-28-oak-ed-strike-1121-large-tease.jpg">
 

Pass

An alt attribute describes the image in a way that assistive technology users can easily understand.
<img src="191121131947-28-oak-ed-strike-1121-large-tease.jpg" alt="Teachers striking in front of the School District Headquarters">

About this rule

This rule passes if ANY of the following is true:

  1. Element has an alt attribute
  2. Element has an aria-labelledby attribute that references elements that are visible to screen readers
  3. Element has a non-empty aria-label attribute
  4. Element has a non-empty title attribute
  5. Element’s default semantics were overridden with role="presentation" or role="none"

Use caution when applying role="presentation" or role="none" to an <img> element. These roles instruct assistive technologies to disregard the element’s implicit role without hiding its content from users. If an <img> has inner text, adding a role of presentation or none will cause it to be reported to users as a text string with no semantic context. For more information, see Using ARIA: Use of Role=presentation or Role=none.

More examples

Understanding Success Criterion 1.1.1: Non-text Content

Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content