Making Images Accessible
Learn about all the different types of images you may have, and which techniques to use to make them accessible
Decorative Images
Sometimes an image is present on the page purely to make it look good, and it doesn't convey any information. 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.
Yep, my image is decorative
If the image is decorative, add an empty alt attribute to it:
<img src="paint.jpg" alt="" />This isn't the same as having no alt attribute at all!
The empty alt attribute tells screen readers to ignore the image.
If the alt attribute is just missing, the screen reader won't be sure if it's decorative or not and will tell the user there is an image.
Don't give decorative images alt text - even if you think you are being helpful by describing the pretty flower image in the background. If the user doesn't need to know about it, don't describe it!
of the issues that Simply Accessible found with alt text were decorative images with unnecessary alt text.
CSS Backgrounds
If your CSS background image is just decorative, that's fine.
It's generally not a good idea to use CSS background for images with a purpose, as it's tricky to provide a text alternative.
Move non-decorative images to <img> tags where possible.
Icons
It's quite common for icons to be shown using a CSS background.
Some icons are decorative because there is other text available that makes it clear what is going on, like this example button:
This doesn't need any alt text for the icon.
When there is just a CSS icon within a button, it needs alt text:
<button aria-label="Search">
<i aria-hidden="true" class="search"></i>
</button>The alt text is set using aria-label on the <button>
The <i> element that has the CSS background is set to aria-hidden. This is because the <button> itself is actually providing the alt text.
What should the alt text say?
The alt text is there to describe what the image is to someone who can't see it.
It should be a full alternative that includes any text in the image and a general description of what it is.
<img src="cart-3.jpg"
alt="3 items in the shopping cart" />of the top 1,000,000 web sites have missing alternative text for images.
I can't write alt text for this image!
There are only two situations where you don't have to provide a full text alternative for an image:
- The image is included as part of an exam, and alt text would give the answer
- The image is a work of art
You still need to provide an alt attribute to state what the image is, but it can just be the name of the artwork, or "Question 4", not a full description.
So if you have to provide a text alternative for all other images, how?
Well, for a data chart, you can provide a table of the data shown below the chart, and summarise the trends in the alt text.
You can provide the full text for something like an infographic elsewhere on the page, as long as the alt text makes it clear what the image is and where it's fully described.
In Summary
Decorative images with no purpose should have empty alt attributes, or be in CSS backgrounds
If a CSS background image is used for something functional, the button or element should have an aria-label attribute to describe the function.
You have to fully describe an image in text somewhere, even if it's complex like a data chart. There are very few exceptions.
of customers with access needs would spend more if websites were more accessible.