Utilizing background images can effectively present data in a more visually appealing way! It is often recommended to use visual icons instead of text blurbs for a more compact and user-friendly design. Implementing image sprites can greatly enhance this approach.

For instance, hotel listings frequently use icons to showcase amenities. Imagine having a page with 50 hotels, each offering 10 different amenities. In such cases, utilizing CSS Sprites can significantly improve the user experience due to faster loading times. But what about ALT tags for these images? Check out this example site.

In practice, rather than using alt text, one can utilize the title attribute within the containing div element.

HTML

<div class="hotwire-fitness" title="Fitness Centre"></div>

CSS

.hotwire-fitness {
    float: left;
    margin-right: 5px;
    background: url(/prostyle/images/new_amenities.png) -71px 0;
    width: 21px;
    height: 21px;
}

According to W3C guidelines (referenced in the links above), the title attribute serves a similar purpose to the alt attribute.

Title

The values of the title attribute can be displayed by user agents in various ways. Visual browsers often show the title as a "tool tip" when hovering over an object. Audio user agents may also speak the title information in appropriate contexts.

ALT

The alt attribute is specified in relevant tags (such as img, area, and optionally for input and applet) to provide a textual equivalent for the object.

Having a text equivalent offers several benefits for your website and its visitors in various scenarios:

• Web browsers on different platforms may not display images or have limited capabilities. Setting the alt attribute ensures that the provided description is shown instead of missing images.
• Visitors who are blind, color-blind, or have low vision rely on the alt attribute to understand the content of your page.
• Search engine bots fall into the aforementioned categories as well. Using the alt attribute helps ensure that important sections of your website are properly indexed.

This particular article from the Yahoo Developer Network (saved link) highlights the recommendation of using ARIA attributes when opting for a background-image over an img element with alt attribute:

<div role="img" aria-label="adorable puppy playing on the grass">
  ...
</div>

Flickr's decision to use background images is showcased in this article, citing improved performance particularly on mobile devices.

In a blog post by Christian Heilmann, he emphasizes the importance of not using background images to convey information. According to him, background images are solely for aesthetic purposes and should not be relied upon to present data. This means that they do not require alternate-text, unlike other images on a website.

He states:

CSS background images which are by definition only of aesthetic value – not visual content of the document itself. If you need to put an image in the page that has meaning then use an IMG element and give it an alternative text in the alt attribute.

I share his viewpoint on this matter.

It's worth noting that the div tag does not support an alt attribute, unlike the img tag.

The important question to ask is why it is necessary to include alt attributes for all background images on the site. Understanding this will guide your decision-making process.

Visual/Textual: If you simply want to provide a text fallback in case an image fails to load, consider using the title attribute. Most browsers display a tooltip when hovering over an image, which serves as a textual alternative if the image cannot be loaded. This method allows for faster loading times by utilizing background images.

Screen Readers: A middle-ground option involves keeping images as backgrounds and using the title attribute, although this may not work consistently with all screen readers. Adding aria-labels can help ensure that screen readers properly interpret the content.

SEO/Search Engines: This aspect is crucial for search engine optimization. While the title attribute doesn't impact SEO, having alt attributes for images is highly beneficial. Consider incorporating small actual images with alt attributes instead of relying solely on background images to improve SEO performance. Keep in mind that Google considers the path of the images when indexing them. Ultimately, prioritizing SEO may require including actual images rather than just using backgrounds.

It is often recommended not to use background images for elements that hold significant semantic value, as there is no standard way to include alt data with these images. The key question to consider is the intended purpose of this alt data - should it be displayed if the images fail to load, or is it needed for a specific function on the page? One workaround could involve storing the alt data in custom CSS properties without any real meaning (potentially causing errors), or by incorporating hidden images with both the image and alt tag, allowing you to retrieve the alt text when necessary through a comparison method and then manipulate the data using a custom script. Unfortunately, browsers do not have built-in functionality to handle alt attributes for background images automatically.

Check out this informative article by W3C that provides insights on recommended actions: https://www.w3.org/WAI/GL/wiki/ARIATechnique_usingImgRole_with_aria-label_forCSS-backgroundImage

You can also find examples here:

One of the examples includes:

<a href="http://www.facebook.com">
 <span class="fb_logo" role="img" aria-label="Connect via Facebook">
 </span>
</a>

In cases where an element with a background image is just an empty container, some experts recommend placing text inside and concealing it using CSS, while displaying the image instead:

<a href="http://www.facebook.com"><span class="fb_logo">
  Connect via Facebook
</span></a>

.fb_logo {
  height: 37px; width: 37px;
  background-image: url('../gfx/logo-facebook.svg');
  color:transparent; overflow:hidden; /* hide the text */
}

One traditional method to accomplish this task is by inserting the text within a div and utilizing an image replacement technique.

<div class="ir background-image">Your alt text</div>

In this scenario, "background-image" represents the assigned class for the background image, while "ir" could serve as HTML5boilerplates' designated image replacement class, outlined below:

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* Fallback for IE 6/7 */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

My approach to solving this issue is the following:

To tackle this problem, start by creating a new CSS class and positioning it off screen. Then insert your alternate text in the HTML just before the element that invokes your background image. This can be applied to any tag, whether it's H1, H2, p, or others.

CSS

<style type="text/css">
  .offleft {
    margin-left: -9000px;
    position: absolute;
  }
</style>

HTML

<h1 class="offleft">Insert your alt text here</h1>
<div class or id triggering your background image>  </div>

Here is my quick fix solution:

If we remove the background image, the alt text will be displayed in the Img tag.

.alt-image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.background-image{
background:url("https://www.w3schools.com/images/picture.jpg") no-repeat; 
width:100%;
height:500px;
position:relative;
}

<div role="img" aria-label="place alt text here" title="place alt text here" class="background-image">
<img src="" alt="place alt text here" class="alt-image"/>
</div>

I'm having trouble understanding your request.

If you're looking to use a CSS property to display the alt attribute value, you might be interested in exploring the CSS attribute function as demonstrated here:

IMG:before { content: attr(alt) }

Using the alt attribute on a background image is uncommon since the alt attribute is specific to HTML elements while background images are controlled by CSS properties. If you insist on using the alt attribute, consider incorporating it into an appropriate HTML element.

Could you elaborate on the reason behind wanting to include alt tags on background images? Is it for semantic purposes or to achieve a particular visual effect (if so, what effect or purpose do you have in mind)?