How to Identify Decorative Images and Boost Accessibility

Alternative text is used to describe images for people who can’t access them for one reason or another. This includes people with visual impairments and those with slow internet connections who can’t load any visuals on a web page. In cases like these, it is vital to ensure that all users can interact with your content.

For example, alt text is brilliant for helping people who use screen readers understand images on websites and for people with slow internet connections who cannot load visuals at all. But here’s the thing: not every image needs it. Some images don’t provide additional information and are just there to look pretty or break up text. We call these “decorative images”, and they don’t need alt text.

However, identifying which images are truly decorative can be tricky. And once you’ve spotted them, you need to know how to handle them properly in your HTML.

In this short guide, we’ll help you spot these decorative images and show you how to implement the correct HTML to ensure screen readers skip over them. This will help you create a website that is accessible to everyone without bombarding them with unnecessary information.

Let’s begin!

Let’s start with a quick refresher: in most cases, you will have to provide alt text for non-text content. It’s a good practice that helps people who use screen readers to fully grasp online content, and it’s also outlined in the Web Content Accessibility Guidelines (WCAG) Success Criterion 1.1.1 Non-text Content.

So, how does the WCAG define decorative images? It’s pretty simple: non-text content that’s purely for decoration. In other words, they’re just there to look nice without providing any real information or functionality.

Let’s look at some examples:

In these cases, the WCAG suggests implementing your non-text content in a way that allows assistive technology to ignore it. This means screen readers can skip over these images, creating a smoother experience for users.

If you’re not sure about the different cases, you can use the Alt Decision Tree that shows different scenarios and the suggested approach. 

The simplest and most common way to mark an image as decorative is to use an empty alt attribute. But – and this is important – you don’t just skip the alt attribute altogether. You need to include it but with nothing between the quotation marks.

Here’s what it looks like in practice:

By doing this, you’re telling screen readers, “Hey, this image doesn’t add any important information, so you can skip right over it.” 

If you forget to include the alt attribute entirely, some screen readers might try to be helpful by reading out the entire file path and name of the image, which isn’t very user-friendly. 

This method should be your go-to for most decorative images. It’s simple, effective, and widely supported.

There’s another way to mark decorative images: the role="presentation" attribute. This is part of ARIA (Accessible Rich Internet Applications), a set of attributes that can help make web content more accessible. Unlike the alt attribute, which is specifically designed for images and other media like videos, the role="presentation" attribute can be used with various HTML elements.

Here’s what this attribute looks like in practice:

The role="presentation" attribute tells assistive technologies to ignore the element entirely. 

Still, you might be wondering, “Can I use both an empty alt attribute and role="presentation"?” Technically, you can, but it’s a bit like wearing both a belt and braces – a bit overkill. They both do the same job, so pick one and stick with it.

One important note: if you use role="presentation" along with a filled-in alt attribute, screen readers will ignore the alt text. So be careful not to mix your signals!

In most cases, sticking with an empty alt attribute is your best bet for decorative images. It’s simpler and gets the job done. Save role="presentation" for those trickier scenarios where you need to hide more complex elements from screen readers.

Finally, keep in mind that a <svg> cannot have an alt attribute, which is why role="presentation" or aria-hidden="true" is an excellent solution for SVGs. If you’re not sure which to use, check out Tim Wright’s helpful guide on the difference between role=”presentation” and aria-hidden=”true”.

When images provide no additional information or context to users, it’s best to mark these images as decorative so assistive technologies like screen readers skip them, as this provides a better experience. You should now have an understanding of what makes an image decorative and how to mark it properly in HTML.

However, correctly handling decorative images is just one piece of the accessibility puzzle. If you want to create a smooth, enjoyable experience for all users, regardless of how they access your content, you need to consider many other elements. Whether you’re a designer, developer, or content creator, deepening your understanding of accessibility can make a real difference to people’s lives.

Ready to take your skills to the next level? Check out The A11Y Collective’s suite of accessibility courses. Our “Accessible code” course is a great next step to build on what you’ve learned today. You’ll dive deeper into writing inclusive code that works for everyone.

Start your next accessibility adventure today and open up the web to more people!