CODEWITHSUNDEEP
htmlcssaccessibility
Sean
Sean

Reputation: 8036

How to add alt text to background images? Making background images accessible

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>

Upvotes: 5

Views: 15750

Answers (3)

Sean
Sean

Reputation: 8036

2024 Edit

The object-fit CSS property is now widely supported by browsers, and it's no longer necessary to make an image a background in order to use resizing rules like cover and fill. Because of this, it's now preferential to use a regular <img> element (or <picture>, etc) with an alt attribute. The below approach is no longer necessary.

Original Answer

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>

Upvotes: 21

Kenabeach
Kenabeach

Reputation: 139

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

Upvotes: 9

Adam
Adam

Reputation: 18807

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.

Upvotes: 2

Related Questions