Alt text for decorative images
If you're a web developer who knows even a little bit about accessibilty and ADA compliance (and you should!), you probably know that most images require alt text to describe what they are for people who use screen reader software. You probably also know that some images don't need alt text, and that those images specifically should not include alt text. I'm talking about things like a divider image between sections of content, a rounded corner graphic on a box, a decorative motif off to the side, etc.
There are two main schools of thought for how to treat the alt attribute for these kinds of images. And I'm going to tell you a third, which I would submit is the superior method.
Method 1: alt=""
For many years the standard way to treat decorative, non-contextual images was just to put alt="" in the <img> tag. This means that screen reader software will tell the user there's an image there, but it won't read them any alt text. The downside of this is that the user won't know if this image is indeed purely decorative, or if perhaps the developer neglected to include alt text for an image that actually needs it. Maybe there is important meaning to this image, but it's lost/unavailable.
To be clear, you never want to enter alt text that says "divider" or "icon" or "corner." That's useless to the user, and annoying!
(Indirectly related: make sure you never enter just a space for alt text, e.g. alt=" ".)
Method 2: alt="null"
In recent years the standard has become to include alt="null". This is so the screen reader can announce the image and then announce that the alt text is "null," which signals to the user that this is definitely an image that doesn't contain any important meaning that would require alt text. So this method is very practical, but I would argue it creates a clunky user experience, which can easily be avoided by my method...
Method 3: background images for all non-contextual images
This is my preferred method. It's a little harder, but worth it! You probably already know where I'm going with this. Make a rule in your head that any image that doesn't need alt text must be embedded as a background image in a <div>.
The benefit to this is that the screen reader user doesn't need to hear that there's an image there at all. It provides no value or meaning, so why even announce it to the user? And then you also remove the dilemma of which is better for the user, alt="" or alt="null". They're both not great. This is better.
The (small!) downside is that this method involves a bit more code, especially to make the image behave responsively across devices. Obviously with an <img> tag it's easy to add a class that resizes the image for mobile, i.e. using width="100%" and height="auto". With a background image in a div, you need to get a bit more clever with resizing the div for mobile and having the background image scale accordingly, and this can especially present some challenges for correclty handling the height of the image. You might even have to do a little math. It's really not that hard once you do it a few times. It's just a somewhat different way of thinking. Recalibrate your brain to treat all decorative images this way, every time, and it'll quickly become habit.
Note: The inverse of this concept applies as well: you should never embed images that do contain context as background images in divs, for this same reason: then it's impossible to give them alt text. Sure, you could come up with a clever way to place a div in there and include the alt content in a way that's invisible in a typical web browser, like making it transparent or extremely small or whatever. That's pretty sloppy, and it won't be easy for the next dev to figure out and update.
Note about different digital tactics
All of the above applies 100% to websites and banner ads. However, we have to treat emails a little differently, since background images are not widely supported in emails and should never be used (until Outlook gets its act together). So, in email, decorative images have to be embedded as <img> tags. In that case, I recommend including alt="null".
– Manning
Questions/comments? Feel free to contact me at manning@manningkrull.com. I update these articles pretty frequently — best practices evolve over time as the world of digital quickly changes, and I always welcome insights from others.