Your Images Aren’t Decorative: When to add alt text

When you add images to your site, you should also add some text for screen readers which then reads out that text. But does every image really need alt text or can it be left empty? What about decorative images? How can you tell when an image is actually decorative?

The right alt text

There are always going to be different opinions on the best method for alt text: when to add it, how long it should be, what should be included. Writing alt text is as much a skill as writing the website content itself.

You take the context into consideration, describe the image by pulling out the important parts, and keeping it as short as it can be while providing enough information. Why did you add the image? What would a sighted person be getting from this image in relation to the content? Do the best you can.

Some screen reader users want as little alt text as possible — the shorter the better, as many empty alts as possible. Others want to at least know what’s there. Most of the time, it seems at least the consensus is to not make it longer than it needs to be. At least with alt text of the proper length, someone can skip past it. The key is to give the visitor the choice to listen or skip it instead of removing the option completely with an empty alt or worse — no alt at all.

Tricky situations

Not every situation is straightforward or answering with yes or no. For example, there are these scrapbook-type layouts that have a dozen little icons and graphics sprinkled around that make up the overall section’s design. Even if they all have a short few-word description, someone would have to get through all of those images to get past it. So what’s the best way to approach alt text so that someone has the idea of what’s being done without having to go through each image individually?

Ideally it would all be in one image styled to be in the background, but if some kind of layout or other reason calls for individual images, it might make sense to use an empty alt on all of them except the first one that describes the overall vibe. This is one of those situations that will have a few different options for how to move forward. It’s all about putting thought into the experience you’re giving your website visitors.

Actually decorative images

The key is to not overuse images. If you think an image doesn’t need alt text, consider whether the image is worth adding in the first place. If you think an image is just stock and doesn’t need to be described because it’s just filler, that begs the question of why it’s being added in the first place. This could be an opportunity to streamline your overall approach to images in the first place.

Rather than stuffing a design with images to try to break things up, use the design itself. Use white space, typography, colors, headings, and decorative elements. So the images that do get added are done so purposefully.

But that means there are situations when images might be added for visual interest only, right? Do those need a description? That’s where our initial question comes into play. Are there still images that are decorative?

The definition of a decorative image has evolved over time to try to discern when that image is decorative vs when an image has some kind of purpose. What visual users might consider “decorative” is still contributing to the overall feel of the website. Screen reader users might still want the opportunity to understand the tone of the content and website, and those additional elements contribute to that.

There are other ways to convey a website’s style through things like writing style and tone, the way images are used, the types of pages included, and so on. So if someone isn’t able to experience the design of the website — the colors and other visual elements — is adding alt text to decorative elements enhancing the experience? Or is it creating additional barriers or obstacles to have to get through?

It could be something that helps someone who is navigating using a screen reader and can also see some of the elements on the page. Describing these “decorative” images could help them fully understand what’s on the page instead of parts of the page seeming like they’re being skipped over.

At the risk of adding too much clutter, it would be best to land on the side of caution when describing these purely decorative elements that get added to the page. Things like swirls, patterns, little semi-transparent illustrations, and other similar things that truly are design elements.

Other empty alt scenarios

It’s important that an image always have an alt tag, whether it has text in it or is empty. In certain situations you can even explicitly hide an image using ARIA. But surely it still sometimes makes sense to have an image bypassed, right? When should an image have empty alt text?

The answer would be yes! There are situations when you shouldn’t add alt text:

• If describing the image would result in repetitive text. For example, if a restaurant has their menu items listed with an accompanying image, that image is most likely going to show exactly what’s in the description of the dish. Unless the image has some kind of different take on it — like the owner of the restaurant making this special dish which is conveying something specific about this dish or chef or restaurant — the alt should probably be left empty.
• If it’s an icon that accompanies some kind of text, especially when it’s in a link. For example, you don’t need to describe the silhouette icon that’s next to the words “your account.” Leave that empty. If it’s just the icon, you’ll want to describe that, and if it’s a link, describe where the link goes.
• If it’s basically just the stylized text that’s already in the content. Featured images will sometimes be a designed version of the blog post title, and the title will be written below. You can leave that alt text blank. But if it’s got different text — even if it’s just similar, or if it has some other information like a screenshot of a person or something else — that’s additional context to provide.

There’s also this handy alt decision tree that might be able to help with the decision-making process, but it’s definitely not nuanced and might not fully clear up the “is it decorative” question in those on-the-fence situations — especially when it comes to the “ambiance” type of images.

I’d also argue that just because something is in the background, that doesn’t automatically make it decorative. With the way websites are optimized, it tends to be better to have your background images loaded as regular images and styled so it’s in the background. Is it an areal shot of the location? Is it team members working together? What’s the purpose of the image?

Do your best

As with most things, don’t let the fear of getting it wrong keep you from doing it at all! Use this to help inform your future decisions about alt text and how you use images on your website.

You can only get better with practice. Describe your images on your website, on social media, anywhere you can. Ask for feedback, have people test out your site, and just do your best.