Background images with alt tags for accessibility
If you’re front-end developer, chances are that at some point you’ll need to use the css background-image property to display an image that isn’t just for presentational purposes. An example of which might be a full width banner image that resizes responsively. In this scenario, we can use the css background property and set background-size: cover; this scales and crops the image in a way that can’t easily be achieved using the good old html img tag.
If the message or meaning of your image is relevant to your content then you’ll want it to be accessible to all, usually this is achieved by adding an alt attribute to the img tag with a description of the image. We can’t quite do the same thing with our element that has a background image, but we can do something similar that should be interpreted in the same way to screen readers.
The solution that I’ve found is to embed an img with src and alt attribute inside the element with the background image. This indicates to the screen reader that there is an image with a description at that point on the page. To hide the img so that it is only seen by screen readers we add specific styles to it, check out the demo below, it works well on Apple Voiceover, with it reading out the alt tag and even giving a generated description of the image (In this case: Well lit, very blurry).