Skip to content
Wiki
Automated Checks
Image Alt Text

Image Alt Text

All non-text content that adds to the context, requires a text alternative that serves an equivalent purpose, WCAG 1.1.1 (opens in a new tab)

In this case, this means that any image should have an alt attribute that describes the image content if it is not purely decorative.

Use the browser developer tools to inspect these images and they should enable you to see that the one referencing adoption has a contextual accessible name. The empty alt-text on the first image is an example of how to mark a decorative image.

An important note is that alt-text that merely duplicates the text content is a good indicator that it isn't necessary. Screen readers would end up reading the same content twice, which is not helpful for the user.

Ways to fix

If the content in the image needs to be understood for the page to be understood, then the alt-text should be descriptive of the image content.

If the image is purely decorative, then the alt-text should be explicitly empty, not absent.

Meaningful alt-text

If the image conveys information that is otherwise not conveyed, alternative text content needs to be provided, and this can usually be done via an alt attribute on the img tag.

<img src="/cat-picture.jpg" alt="Tabby Kitten Sitting on the Grass"/>
<p>Cat the kitten is available for adoption now!</p>

Decorative alt-text

If the image is purely decorative or otherwise unnecessary for the content to be understood, then the alt-text should be explicitly empty.

<img src="http://placekitten.com/100/100" alt=""/>
<p>Some cats can be quite cute</p>

If in doubt

When considering if an image is meaningful or not, consider if the content would be understood without the image. If it is identical without the image, then the image is likely decorative.

However, if the image is important for tonality or context, then it is likely meaningful and should have alt-text.

Further notes on what to consider for whether it should be decorative or not can be found in the automated rule's documentation (opens in a new tab).

Hide inline SVGs

If you are using an inline SVG, you can hide it from screen readers by adding aria-hidden="true" to the SVG element.

This prevents eager screen readers from announcing empty "image" tags when they encounter decorative SVGs.

If the SVG is used in a meaningful way, such as on a button, then the button can have an aria-label or text content to describe it's use, in case the SVG is used in multiple, differing contexts.

<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
  <circle cx="5" cy="5" r="5" fill="black"/>
</svg>

References