How to Add "alt" Text to CSS Background Images?

If you want to provide alternative text or some description for CSS background images (for accessibility purposes), you can use ARIA attributes like so:

.logo { background-image: url('logo.jpg'); }
<span role="img" aria-label="Designcise" class="logo"></span>

In this example, the role attribute is set to "img" to indicate that the <span> element is acting as an image, and the aria-label attribute provides a description of the image. By using ARIA roles, you can enhance accessibility for generic HTML elements (such as <div> or <span>) when they are used to represent images.

This approach can be helpful for providing alternative text to icons, background images, emojis, and other visual elements that require accessibility considerations.


This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.