My Accessible Website
MAWD
Confused by accessibility?
Online testing tools only finding the really basic issues?

MAWD combines automated testing with your input to find everything you need to fix. She tells you how to fix it too!

Try MAWD Free
Back to Infographics

Infographic: Making Images Accessible

Making Images Accessible Infographic - full text below Read Text Alternative

Get it as a printable poster

Great for your office wall! I've reformatted it to a poster size for you.

Get Poster

Include it on your own website

Share it

Comments

Text Alternative

Decorative Images

If the image is decorative, add an empty alt attribute to the image tag.

Sometimes an image is present on the page purely to make it look good, and it isn’t there to convey any information at all. These are decorative images.

An image is not decorative if the user would struggle to understand the page without it, like if it contains some text or a chart. If the image is a button or performs some other function, it is not decorative, as it is serving a purpose on the page.

The Alt Attribute

The alt attribute should always be present on an <img> tag. By setting it to empty, a screen reader will know to ignore the image as it's decorative and not relevant to the user. If there is no alt attribute at all, the screen reader will tell the user that there is an image, but without any alternative text to describe it.

If the image is a CSS background, but it's not decorative, it needs moving to an image tag so that it can have alternative text.

If it's possible to write a short text alternative for the image, put it in the alt attribute of the image tag.

What should the alt text say?

The alt text is there to describe what the image is to someone who cannot see it, so it should be a full alternative for the image, including any text that is in the image and a general description of what it is. You don't need to say "image", or "picture". A vague idea of what is shown, or something like the file name is not sufficient. If it's not actually important what the image is, then it's decorative and empty alt text should be used.

What if you can't write a text alternative?

Some images can't have a short text alternative, such as data charts, or images with loads of text. In those cases, it is still possible to represent them with text, like a description of the data and the trends shown in a chart, and all the text from a big infographic.

In some scenarios, it is not possible to represent the image fully with text, for example a piece of art, or an image used as part of a test where the alternative text would reveal the answer.

If it's possible to write a text alternative, but it would be long, use the alt attribute to state what the image is and where the full text alternative is. You can put the full text anywhere on the site as long as it is clear where.

If it's not possible to write a text alternative, just use the alt attribute to state what the image is, like "Spelling Test Question 4".

This site uses cookies as described in our Privacy Policy.
By continuing to use our site, you consent to these cookies.