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

ALT with background-image

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

When using CSS, you do not have a way to add the alt property to a background-image and also, it is not appropriate when using image insertion from CSS.

Second Christian Heilmann , background-image , is a property of aesthetic value, not something with content value for the site itself. Images added in CSS are viewed as visual, not as content on a page, so they are exempt from alternative texts.

Other Forms

As @Sam commented, one way around this is to have most accessible element , is to use aria-label , which is a way of specifying a string to an element as an accessible label for assistive technology. And role , although it has some other utilities, it can be used to assign a role to a page element, that is, to insert a semantic value into an element.

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

Another workaround is to add the title attribute, which is an attribute to insert a title into an image, but serves as an alternative text for the user. However, this attribute in relation to accessibility has some inconsistencies and problems. Also, according to my searches , it has no weight 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 a few other "fuzzy" ways to do things like add more elements to appear together or overlap an image if you do not load, add small (really small, to the point they do not appear) elements in <img> elements with alt and then manipulate with other images and some other forms.

SEO

Although they are in a standard of compliance , within my search, I have found nothing relevant to attributes role and aria-label , have weight for SEO analysis.

The best way to use SEO engines is to add the tag <img> with attribute 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 "get around" and achieve the necessary customization.

A visual alternative only with HTML and CSS is to use two elements, with background-image over and under, the latter will appear if the above 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 made by Accessible Rich Internet Applications , but I am not aware of which ones to use and how to implement them in the above example

As far as search engine indexing is concerned, background is not indexed, you may also be able to add the img tag and leave it invisible, but I'm not sure if it would work