Adding alternative text to background images is a crucial step in ensuring their accessibility. Providing alt text allows screen

Question

Adding alternative text to background images is a crucial step in ensuring their accessibility. Providing alt text allows screen

One challenge I am facing is that my website displays images as background images using background-size: cover to fill the element completely and crop out any excess parts of the image. However, these images are not just decorative; they are essential for conveying information on the page. To make them accessible to screen readers and assistive technologies, they need alt text descriptions.

I'm wondering what the best approach is to add alt descriptions to background images in a semantic way.

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>

html css accessibility

Answer 1

Answer №1

Latest Info for 2024

The utilization of the CSS property object-fit has now become widespread across various browsers, eliminating the need to transform an image into a background in order to apply resizing options like cover and fill. Consequently, it is recommended to employ a standard <img> element (or <picture>, etc) with an alt attribute instead. The previous method described below is considered outdated.

Past Solution

To ensure proper accessibility of a background image, the most semantically correct approach involved using both a background image along with a regular img tag simultaneously.

Insert the img within the element containing the background image.
Conceal the visibility of the img so that sighted users perceive only the background image while users relying on assistive technologies can still access the actual img.

Note: Merely setting the image to display: none; would hide it from assistive technologies as well, which contradicts the intended purpose. An alternative strategy is required.

If utilizing Bootstrap, there exists a convenient built-in class designed specifically for this scenario: .sr-only. For those not using Bootstrap, the styles for such a class can be manually added to their own stylesheet:

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

Implementing this technique based on the example provided yields the following structure:

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>

Answer 2

Latest Info for 2024

The utilization of the CSS property object-fit has now become widespread across various browsers, eliminating the need to transform an image into a background in order to apply resizing options like cover and fill. Consequently, it is recommended to employ a standard <img> element (or <picture>, etc) with an alt attribute instead. The previous method described below is considered outdated.

Past Solution

To ensure proper accessibility of a background image, the most semantically correct approach involved using both a background image along with a regular img tag simultaneously.

Insert the img within the element containing the background image.
Conceal the visibility of the img so that sighted users perceive only the background image while users relying on assistive technologies can still access the actual img.

Note: Merely setting the image to display: none; would hide it from assistive technologies as well, which contradicts the intended purpose. An alternative strategy is required.

If utilizing Bootstrap, there exists a convenient built-in class designed specifically for this scenario: .sr-only. For those not using Bootstrap, the styles for such a class can be manually added to their own stylesheet:

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

Implementing this technique based on the example provided yields the following structure:

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>

Answer 3

Answer №2

The W3C offers a helpful example for this situation - just assign a role="img" to the div and include an aria-label with your description.

For more details, visit:

Answer 4

The W3C offers a helpful example for this situation - just assign a role="img" to the div and include an aria-label with your description.

For more details, visit:

Answer 5

Answer №3

In order to make them accessible to screen readers and other assistive technologies, images must have alt text.

It's important to note that some users may rely on assistive technologies other than screen readers. Using the sr-only CSS class alone is not sufficient to ensure accessibility for all users.

For example, individuals with visual impairments may prefer to hide images and show their text alternatives instead.

Since Edge 16, the object-fit property works for images in 92% of browsers, eliminating the need for a fallback solution for most modern browsers. However, a fallback can still be provided for older browsers if necessary.

Answer 6

In order to make them accessible to screen readers and other assistive technologies, images must have alt text.

It's important to note that some users may rely on assistive technologies other than screen readers. Using the sr-only CSS class alone is not sufficient to ensure accessibility for all users.

For example, individuals with visual impairments may prefer to hide images and show their text alternatives instead.

Since Edge 16, the object-fit property works for images in 92% of browsers, eliminating the need for a fallback solution for most modern browsers. However, a fallback can still be provided for older browsers if necessary.

Adding alternative text to background images is a crucial step in ensuring their accessibility. Providing alt text allows screen

Answer №1

Latest Info for 2024

Past Solution

Answer №2

Answer №3

Similar questions

Fade image and background using Jquery on click event

The custom error message for invalid input remains unchanged even after the box is selected

Animation using jQuery is functional on most browsers, however, it seems to

Display a section of the picture at maximum width

Attempting to align three images in a row on a webpage with clickable links placed below using HTML and CSS

How can we prevent the restoration of size effects in jQuery UI versions 1.9 and above?

Simple method for displaying or hiding divs depending on the status of a selected radio button using CSS only

Retrieve the position with respect to the browser viewport

"Enhancing user experience with jQuery hover effects on table

Unable to locate image on Angular server while running on Raspberry Pi

The Angular ng-bind directive does not reflect changes in value updates

Adding a PHP file into an HTML page using JavaScript include

How can you make a dynamic 360 image that responds to mouse movements using three.js?

Step-by-step guide to activating vertical scrolling for select tiers in a multi-layered fly-out navigation

Styling a list within a div using CSS

sleek lateral scrolling reminiscent of k2.pl

The CSS module is disappearing before the Framer Motion exit animation finishes when the path changes

Can I use a custom font in an HTML5 canvas?

Deactivate the Autofill feature on Google Toolbar

Tips for utilizing innerHeight for a div during both window loading and resizing tasks?