Avoid presenting informational images in CSS backgrounds

If your image contains important information for the end user, then it should be provided in an HTML <img> tag with proper alt text. The CSS Spec says this:

For accessibility reasons, authors should not use background images as the sole method of conveying important information. See Web Content Accessibility Guideline F3 [WCAG20] . Images are not accessible in non-graphical presentations, and background images specifically might be turned off in high-contrast display modes. Source .

Can't avoid using CSS images or want to alt text for "non-important" ambient photos etc?

The CSS spec makes this a "SHOULD" not a "MUST" because there are times when visual design or existing code makes it difficult to change it to an HTML image without redesigning the front-end. Other times the author may want to provide alternate text for an ambient image that is not "important" to the understanding of the content but as a courtesy to screen reader users who prefer knowing what is in the image. Here is a detailed article on ambient images vs pure decoration vs informational images.

When providing alternate text for the CSS image, there are number of considerations

If the <div> tag has any content inside it, then a role="img" and aria-label could obscure the inside content because of the accessible name calculation , or the assistive technology might just ignore the aria-label .

So do not put the CSS background image inside a <div> that contains any content. It's best to use an empty <span> and an aria-label with role="img"

Do this:
<div>
<span class="background-image" role="img" aria-label="[place alt text here]> </span>
[all the rest of my content]
</div>

Don't do this:
<div class="background-image" role="img" aria-label="blah blah blah">
[all the rest of my content]
</div>

What if the author has to have a CSS image on a div that contains content

Sometimes there are dependencies in the CSS stack and messing with it can cause upset the design and layout of the site, or a request to change the code could get hung up in approval from various stakeholders. In cases where the author has to have the background image in the <div> that wraps up other content, then a hacky fallback is to do this.
<div class="background-image" >
<span role="img" aria-label="[place alt text here]> </span>
[all the rest of my content]
</div>

This is a hack because semantically the alternate text is not on the element that actually has the image. However, from a screen reader perspective the <div> with the background image is ignored and so placing the <span> directly following it will provide that information in a way that will seem as if the alternate text was in the same place as the background image.

Summary

• Try not to use CSS for important informational images
• For ambient images that are CSS, it is a courtesy to provide alternate text. When doing so, place image in its own empty<span> with an aria-label and role="img.This is also true, in a situation where CSS must be used for information content.
• If the <div> with the CSS image absolutely MUST contain other content, then provide an empty <span> with an aria-label and role="img" immediately following the <div> that has the image.

Feel free to comment on Twitter @davidmacd

Author information:

David MacDonald is a veteran WCAG member, co-editor of Using WAI ARIA in HTML5 and HTML5 Accessibility Task Force Member. Opinions are my own.