Alt text (or lack thereof) for decorative images
If you're a digital professional 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, icons in some cases, a rounded corner graphic on a box, a decorative motif off to the side, etc.
There are a few main schools of thought for how to treat the alt attribute for these kinds of images...
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 the user of screen reader software; there's no way for them to know.
In recent years a solution for this has emerged: along with alt="", put role="presentation" in your <img> tag for any decorative images. role="presentation" hides the image from screen reader software completely; the user won't even be notified there's an image there, which is great because, in the case of purely decorative imgages, they really don't need to know.
Here's an example of what that looks like:
To be clear, for decorative images 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=" ".) This is a big no-no and I see it all the time.
Method 2: alt="null"
Let me be direct: I hate this method. :) I disagree philosophically with it. In recent years a lot of devs/etc have started including alt="null" for decorative images — some accessibility consultants recommend this method too. The idea is that the screen reader software can announce the image to the user and then say 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 while this method is practical, I would argue it creates a clunky user experience. Who wants to hear "null" every time there's an image near some content? Will users know what "null" means or why they're hearing it? Will lazy devs just enter "null" for important images because they didn't receive proper alt text and don't feel like asking for it? I hate that this method forces screen reader users to think about images they can't see or experience; we're just announcing a mystery to them. Better to go with method 1 above and spare them.
Method 3: background images for non-contextual images
This was my preferred method for years before role="presentation" was a thing, and it's still completely valid, but it's not really worth it in most cases these days: Another way to get around the problem of alt text for decorative images is to always embed these images as a background image in a <div>.
The benefit of this method is that the user of screen reader software doesn't hear that there's an image there at all — just like with alt="" and role="presentation".
The downside to this method is that it involves more code, and it can be a lot trickier to make an image behave responsively across devices and screen sizes, unlike with an <img> tag where responsiveness is generally pretty straight-forward with a simple width: 100%; and height: auto; or whatever.
Note: The inverse of this background image concept applies as well: you should never embed images that do contain context as background images, for this same reason: then it's impossible to give them alt text, which they need. 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 with alt="" and role="presentation".
– 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.