Alternative or alt text should accompany any visual element such as an icon, photo, graph, etc. to describe the image to a screen reader. This alt text will also help users to identify whether an image is important or what it depicts in cases where the image is slow to load or fails to load.

The content of the alt text will depend on the type if image:

  • If the image is informative, you will need to describe the main information the image provides
  • An image that is purely decorative or not important can be marked as decorative so assistive technology can skip it. Some tools require you to leave the alt attribute empty.
  • Alt text for functional images, for example a search icon as a button, should describe what the image does or where it goes, rather than what it looks like.
  • If an image contains important text, you should include the important text in the alt text or provide it as real text nearby.
  • A complex image should be accompanied by a short summary in the alt text and the full explanation or data should be included in the surrounding text.

Examples

Photo used to show a location:

“Main entrance to the library, with a ramp to the left of the steps.”

Search icon used as a button:

Use a descriptive name for the action. Use “Search” instead of “magnifying glass”.

Chart:

“Customer satisfaction increased from 64% in 2024 to 82% in 2026.”

If the chart contains more detail that people need, provide the underlying values or a fuller explanation nearby.


Writing useful alt text

  • Avoid unnecessary information like “photo of” and focus on creating a meaningful description.
  • Avoid repeating information that is already given in nearby text.
  • Think about the context. The same image may need different alt text depending on how and where it is used.
  • Alt text should be concise and clear, generally 1-2 sentences or 125 characters max and should describe the content and function of the image.
  • Focus on what someone needs to know, rather than describing every detail in the image.
  • If adding a caption or short description near the image, use the layout options to include it “In Line with Text” to ensure it is read in the correct order.
  • Consider if your image relies on colour to convey key information or if any of this information would be lost if it was printed in black and white, for instance. This could affect users who are colour blind or who require different contrast levels.

Reviewing alt text

Imagine if the image was not available. Would someone still get the same important information or understand the purpose of the image?

For charts, diagrams and other complex visuals, check that the key message and any important data are also available in text. This may be in the surrounding text on the page, or in the alt text or long description.

Sources and further guidance: W3C Images Tutorial | WCAG 2.2 — Non-text Content