How to add alt text to background images? Making background images accessible

Question

I have a site that is displaying many of its images as background images using background-size: cover to size them to completely fill the element while cropping off

Answer 1

This means they need alt text in order to be accessible to screen readers and other assistive technologies.

You perfectly right to point out that users may use assistive technologies which are not screen readers. Also, any method using sr-only CSS class must not be used as the sole way to ensure that the textual information may be accessed to every user.

For instance, people with low vision may want to discard all images which would appear blur and display their text alternative instead.

The object-fit property works for images since Edge 16 so it's no longer a problem for 92% of browsers, and a fallback can be provided for older browsers.