How to put ALT in a Background-Image? How to make a Background-Image more accessible and semantic?

Question

It’s a simple but objective question.

We know the importance of tag ALT for semantics, accessibility and even for SEO. But how can I set these tag properties ALT in an image that is defined as background-image?

In short, there is some semantic way to treat a background-imagemin order to make it more accessible and SEO friendly, since the tag ALT is available for tag only <img> and not for a tag <div> for example...

.imagem {
  background-image: url(img/imagem1.jpg);
}

<img src="img/imagem1.jpg" alt="descrição completa da minha imagem">

<div class="imagem"></div>

Answer 1

A visual alternative with only HTML and CSS is to use two elements, with background-image above and below, the latter will appear if the top does not load

.imagem {
  position: absolute;
  width: 150px;
  height: 150px;
  top: 10px;
  z-index: 2;
  border: 1px solid black;
}
.imagem-alt {
  position: absolute;
  width: 150px;
  height: 150px;
  top: 10px;
  z-index: 1;
}

#img1 {
  background-image: url('https://via.placeholder.com/150');
  left: 10px;
}
#alt1 {
  left: 10px;
}
#img2 {
  background-image: url('');
  left: 170px;
}
#alt2 {
  left: 170px;
}

<div id="img1" class="imagem"></div>
<span id="alt1" class="imagem-alt">descrição completa da minha imagem</span>

<div id="img2" class="imagem"></div>
<span id="alt2" class="imagem-alt">descrição completa da minha imagem</span>

As mentioned in the comments by @Sam, the accessibility part for people with disabilities can be done by Accessible attributes Rich Internet Applications, however I have no knowledge to answer which of them should be used and how to implement them in the example above

With respect to indexing in search engines, the background is not indexed, it may be possible to add, too, the tag img and make it invisible, but I’m not sure if it would work

Answer 2

ALT with background-image

As cited, the property ALT, has benefits, for SEO, semantics and accessibility, being an element used in the marking itself.

When using CSS, there is no way to add the property alt in a background-image and also, it is not appropriate when using the insertion of images from CSS.

According to Christian Heilmann, one background-image, is a property of aesthetic value, not something with content value for the site itself. Images added in CSS, are seen as visual, are not like content on a page, so they are free from alternative texts.

Outras Formas

As @Sam commented, a way around this and having a most accessible element, is to use aria-label, which is a way of specifying a string to an element as an accessible label, for an assistive technology. And the role, despite having some other utilities, it can be used to assign a role to a page element, i.e., insert a semantic value to an element.

<div class="background-image" role="img" aria-label="blah blah blah"></div>

Another way around, is to add the attribute title, which is an attribute to insert a title to an image, but serves as an alternative text for the user. However, this attribute in relation to accessibility, has some inconsistencies and problems. Moreover, according to my research, has no weight of analysis for SEO, because it is an attribute that will only give a title.

<div class="background-image" title="blah blah blah"></div>

There are some other "tricky" ways to do as well, such as adding more elements to appear together or overwriting an image if it doesn’t load, adding small images (really small, to the point where they don’t appear) in elements <img> with alt and then manipulate with other images and some other forms.

SEO

Though they’re in one compliance standard, within my research, I found nothing concerning the attributes role and aria-label, have weight for SEO analysis.

The best way to use SEO engines is to add the tag <img> attribute-ridden alt. Even with functions that some CSS properties provide, if you follow these rules, semantics and SEO, you should use <img> and find some way to "bypass" and achieve the necessary customization.