Skip to main content
Tick PowerMapper
 Try it now

Using Alt Text WCAG Conformance Guide

Guidance
Jun 15, 2025
Mark Rogers

This article explains how to use alt text on images.

What is alt text

The alt attribute in HTML is used to describe images to screen reader users.

<img src='hydrogen.png' alt='Hydrogen atom with one proton and one electron'>

This image is voiced by screen readers as:

  • NVDA: Graphic, Hydrogen atom with one proton and one electron
  • JAWS: Hydrogen atom with one proton and one electron, graphic
  • VoiceOver: Hydrogen atom with one proton and one electron, image

Each screen reader voices the code slightly differently, but they all convey the same information.

Which images need an alt attribute

All img elements must have an alt attribute. This must be:

  • The function of images that label buttons or links (e.g. ‘Like’ for a like icon)
  • A short description for informative images
  • Empty for decorative or incidental images (null alt text)

Without an alt attribute behavior varies widely, and depends on the screen reader used, and user settings.

<img src='https://cdn.example.com/images/image1234.png'>

The code above may be voiced in a screen reader as:

  • Nothing - the image is completely ignored
  • The image filename: image one thousand two hundred and thirty four dot PNG, graphic
  • The image URL: HTTPS colon slash slash CDN dot example dot com slash images slash image one thousand two hundred and thirty four dot PNG, graphic

Adding an alt attribute shows the author has decided how to label the image.

What is null alt text

Some images should not be voiced by a screen reader, because they don’t contain additional information, so adding descriptive alt text just adds noise when voicing the page. These are referred to as ‘decorative images’ in WCAG.

<img src='ornamental-flourish.png' alt=''>

Images with alt='' (null alt text) are completely ignored by screen readers. Null alt text should never be used when an image is the only content in a button or link, and no other attributes on the button or link provide an accessible name.

For example, this is a WCAG failure because the button has an empty accessible name, and is read as Button:

<button><img src='book-flight.png' alt=''></button>

But these pass because the accessible name computes to ‘Book flight’ for both buttons, and both are read as Book flight, button:

<button><img src='book-flight.png' alt='Book flight'></button>
<button aria-label='Book flight'><img src='book-flight.png' alt=''></button>

Null alt text on decorative images

The term pure decoration in WCAG has a specific technical meaning, with a wider scope than the wording implies. It means images (or other media) that don’t add information to the content of a page. Examples of this include:

  • Visual styling such as borders, spacers, and corners
  • Images that are illustrative of adjacent text but don’t contribute information (“eye-candy”)
  • Generic stock photos such as pictures of men in suits shaking hands
  • Images added to links and buttons to improve their appearance or increase the clickable area
  • Images replicating information, or described elsewhere, on the page

WCAG requires that decorative images are hidden from assistive technology:

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

WCAG 2 Success Criterion 1.1.1

This becomes problematic when auditors cannot agree if an image is informative (where empty alt is a fail) or decorative (where non-empty alt is a fail). This often happens with photos used on pages.

Informally the WCAG working group describe these as ‘grey zone’ cases where accessibility experts disagree on whether an image is decorative or informative. That means audits are not repeatable, so the compromise they reached was to trust the author’s judgment if they provide an alt attribute (either null or descriptive).

The wording in the WCAG guidance is:

Whether to treat an image as decorative or informative is a judgment that only the author can make, based on the reason for including the image on the page

Neither human auditors, nor automated tools, should try to second-guess this unless the author has added null alt text to every single image.

Null alt text on informative images

Null alt text is sometimes needed on groups of informative images to make content more understandable. For example, a product review may show a star rating like this:

Rating: ★ ★ ★ ★ ★

which often uses code like this:

<span>Rating:</span>
<img src='star.png' alt='Star'>
<img src='star.png' alt='Star'>
<img src='star.png' alt='Star'>
<img src='star.png' alt='Star'>
<img src='star.png' alt='Star'>

This is very hard to understand in a screen reader because it’s voiced as:

Rating: Star graphic, Star graphic, Star graphic, Star graphic, Star graphic

A better alternative is to place the rating description in the first image, and use use null alt text on the other images:

<span>Rating:</span>
<img src='star.png' alt='5 Stars'>
<img src='star.png' alt=''>
<img src='star.png' alt=''>
<img src='star.png' alt=''>
<img src='star.png' alt=''>

This is much easier to understand because it’s voiced by a screen reader as:

Rating: 5 Stars graphic