How can I implement alternative text on an element with a background image?

Question

AIOSEO site health states this image has no alt text tag. How do I fix it and save the change so it solves the issue? Thanks

<div class="_9VmET" style="background-image: url(&quot;https://snw.202.myftpupload.com/wp-content/uploads/2022/12/cropped-Monstro-Video-Camera-8K-150x150.png&quot;);"></div>

Tried adding alt="camera" to div class but change doesn't save after adding change. What am I doing incorrect?

Answer 1

Divs don't have alt attributes. If the goal is to make this element accessible for the visually impaired, you have a number of options.

• Put some text nearby describing the background image.
• Use ARIA roles and labels. See https://www.w3.org/WAI/GL/wiki/ARIATechnique_usingImgRole_with_aria-label_forCSS-backgroundImage.
• Put some text inside that element, in say a span element, and hide it with CSS so only screen readers see it. See https://webaim.org/techniques/css/invisiblecontent.

You could also implement an actual image element with an alt attribute and set sizing to cover the div completely so that the layout outcome is the same. See How can I fill a div with an image while keeping it proportional?.