4

I have a site that is displaying many of its images as background images using background-size: cover to size them to completely fill the element while cropping off any parts of the image that don't fit.

The problem is that these images are NOT purely decorative. They are a critical part of the informational content of the page. This means they need alt text in order to be accessible to screen readers and other assistive technologies.

What is the most semantic way to add alt descriptions to background images?

article {
  position: relative;
  width: 320px;
  margin: 5rem auto;
}

figure {
  width: 100%;
  height: 180px;
  /* not accessible */
  background-image: url('http://www.fillmurray.com/300/300');
  background-size: cover;
  background-position: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<article class="panel panel-default">
  <header class="panel-heading">
    <h4 class="panel-title">Title of Article</h4>
  </header>
  <div class="panel-body">
    <figure class="article-image"></figure>
  </div>
  <footer class="panel-footer">
    <a class="btn btn-default" href="#">Read</a>
  </footer>
</article>

3 Answers 3

17

The most semantic way to make a background image accessible is to use both a background image and a regular img tag as well.

  1. Place the img within the element with the background image.
  2. Visually hide the img so that sighted users just see the background image behind it, but users with assistive technologies are still presented the img.

Note: just setting the image to display: none; will hide also it from assistive technologies, which isn't the goal. A different approach is needed.

If you're using Bootstrap, it has a handy built-in class for doing just this: .sr-only. If you're not, you can add the styles for that class to your own stylesheet:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

Applying this technique to the example above looks like this:

article {
  position: relative;
  width: 320px;
  margin: 5rem auto;
}

figure {
  width: 100%;
  height: 180px;
  /* not accessible */
  background-image: url('http://www.fillmurray.com/300/300');
  background-size: cover;
  background-position: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<article class="panel panel-default">
  <header class="panel-heading">
    <h4 class="panel-title">Title of Article</h4>
  </header>
  <div class="panel-body">
    <figure class="article-image">
      <!-- include the img tag but visually hide it with .sr-only -->
      <img class="sr-only" alt="Bill Murray" src="http://www.fillmurray.com/300/300">
    </figure>
  </div>
  <footer class="panel-footer">
    <a class="btn btn-default" href="#">Read</a>
  </footer>
</article>

Edit: The object-fit property eliminates the need for the background image, but at the time of writing this property is not fully supported in IE or Edge.

7
  • 3
    I guess that I don't understand the point here. Background images are inaccessible by design. The real issue here is that you're incorrectly using background images as regular images. Now that you've implemented a proper img element, why not just delete the background image property? I don't understand what value there is in keeping it in the CSS.
    – Josh
    Feb 21, 2018 at 21:19
  • 5
    @Josh Using background image lets one leverage background-size: [cover | contain] for proportionally resizing any image to fill or fit within a container. This is the only way to achieve that affect in a non-brittle way without using javascript—which users may have disabled.
    – Sean
    Feb 21, 2018 at 21:50
  • The only issue I have with this is that the image is removed from the document flow, thus the element that holds the image must be explicitly sized.
    – p0lar_bear
    Jan 6, 2020 at 22:01
  • @p0lar_bear if you're displaying an image at its native ratio/size, you should just use an img tag by itself
    – Sean
    Aug 5, 2020 at 14:43
  • 1
    @authentictech browsers cache resources, so it will only download once
    – Sean
    Jan 10 at 16:43
7

The W3C provide an exemple for this context, simply provide a role="img" to the div and an aria-label with your description.

More informations here : http://mars.dequecloud.com/demo/ImgRole.htm

1
  • This solution doesn't work if the div has child elements that need to be interactive, like links.
    – Sean
    Sep 26, 2019 at 15:45
2

This means they need alt text in order to be accessible to screen readers and other assistive technologies.

You perfectly right to point out that users may use assistive technologies which are not screen readers. Also, any method using sr-only CSS class must not be used as the sole way to ensure that the textual information may be accessed to every user.

For instance, people with low vision may want to discard all images which would appear blur and display their text alternative instead.

The object-fit property works for images since Edge 16 so it's no longer a problem for 92% of browsers, and a fallback can be provided for older browsers.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.