How to make background-image accessible?

Question

If you are using an inline <img> tag there is the alt= attribute and other aria-* attributes you can use to make the image accessible.

But if you are using a background-image: url(...), is there any sort of guidelines on how you can make this container accessible and friendly for screen readers? Are there particular attributes you would add to the container?

Answer 1

While background-images most of the time are purely decorative (and as such there's no need to expose the image to screen readers) there may be cases where the developer want to use background-image as opposed to <img> for some reason and preserve the semantics of a regular image, and expose it to screen readers (because the image is important in the context).

In that case, you can expose the container of the background-image using ARIA role="img" with a descriptive aria-label (alternatively, using the title attribute):

.important-image {
  background-image: url(...);
  ...
}

<div class="important-image" role="img" aria-label="{image description}"></div>

---

In the future, CSS will hopefully be capable of providing alternative text, see: https://www.w3.org/TR/css-content-3/#alt.