Decorative Images: How to Identify and Tag Them For Accessibility

Jeremiah Bratton, Senior Front-End Developer

The web is a space rich with imagery. Images, icons, and illustrations are ubiquitous in web design; ubiquitous to the point that it can be easy to forget that every single placement is not there to inform. If you are a visual user, it is likely easy for you to soak in the tone and presence an image provides and tie it to the context of what you are reading. That link does not mean the images are informative or necessary.

In this post, I am going to cover why marking an image as decorative is important for user experience and necessary for compliance, provide some guidelines for deciding when an image is decorative, and how to mark it as such to meet image accessibility standards.

Decorative Images and Accessibility

I do not have to use a screen reader to get around. But from time to time, I will use VoiceOver on my Mac to dig into complex layouts or test my work. As a result, I can empathize with anyone using a screen reader to complete tasks on the web. Images can be added noise when trying to navigate a website with a screen reader. And unnecessary images with all manner of awkward or missing ALT text only complicate the process further.

If an image is just a decoration, no matter how thorough your musing in the ALT text, it will come off as a non sequitur when read aloud by a screen reader. In one sentence you may be talking about market conditions and then immediately afterward describing a photo of a woman eating a banana while she looks desperately at a bar graph. Likely not the bridge you are expecting to build from one paragraph to another.

Proper decorative image markup is also required to meet WCAG criteria 1.1.1. The W3C defines pure decoration “as serving only an aesthetic purpose, providing no information, and having no functionality.” The full criteria are available under WCAG 1.1.1 – Non-text Content in the spec for WCAG 2.0

ALT = “”

Marking an image as decorative is quite easy. However, making an image decorative may also work against years of process on your part.

You must always supply an ALT attribute for an image, but that does not mean you have to provide a description. To mark an image as decorative, all that is required is that you supply an empty ALT attribute.

To do this, simply provide ALT text of “” to indicate an empty ALT attribute. This will signal a screen reader to skip over the image, taking it out of the reading flow. Now, it’s important to note that if you do not supply an ALT attribute at all, a user will likely hear the screen reader recite the full path and file name of the image.

ALT = “” is the preferred method for marking a decorative image, and I recommend this as the only approach you need. However, there is another way to mark an image decorative that I would like to introduce so that you know what to do should you encounter it.

Role = “Presentation”

The presentation role supplied by ARIA can be used to hide elements from assistive technology, like screen readers. If you want to ensure some extra coverage, you can use both Role = “presentation” and ALT = “” together; however, only in that configuration.

You cannot mark an image with the presentation role and then supply a description through the ALT attribute. This combination would be akin to wearing a clown costume to a wedding and telling everyone not to look at you.

Role = “presentation” overall is redundant for an image, but there is no downside to using it correctly.

Decorative Image Examples

You now know how to mark images as decorative. Next, let’s talk about how to recognize the difference between a decorative image versus an instructive one. The following examples I have for you are ones I find very common in the type of work marketers do. There is always room for a friendly debate around semantics, so you can use these rules as a baseline to make decisions.

Icons Next to Text

Before we get too deep here, let me immediately contradict myself… There is no debate to be had in this example. Icons next to text are decorative. Period.

  • Twitter bird icon next to a link that says “Follow us on Twitter”? Decorative.
  • Magnifying glass icon next to a field labeled “Search”? Decorative.
  • Icon of an interobang next to an inflammatory headline? Most people don’t know what that is anyway… decorative.
Highlighted in this screen grab of walmart.com’s homepage are three decorative icons above text titles (icons are circled in green) If these icons were removed the titles below them could still be fully understood. This means the icons should be marked as decorative images, and in this case, they are.
Image courtesy of walmart.com

Pretty easy. As a rule of thumb, an icon next to text is decorative.

Stock Photography / Flavor / Flair

Putting some fancy photo of a person lying dead from an overwhelming existential crisis at the top of your next work/life balance blog post? If you do, it is very possible that the image is only for decoration.

Images like this are often used at the very beginning of, or peppered throughout a long-form piece of content. If you are familiar with WordPress, the ‘Featured Image’ (post thumbnail) is usually this style of image as well. We use images like this to set the mood or suggest a deeper context. And If you are like me, you are using it as a way to provide a visual pun that won’t make sense until hours later.

To continue the work/life balance blog post example, I would anticipate such an article to provide tactics on how not to expire from said existential dread. This means that the image may set the mood for users that can see itperhaps an image of death checking off a to-do listhowever, if that image were removed altogether, the content and its meaning would be unchanged and remain fully understood.

This screen shot taken from a blog post on princesslodges.com shows a collection of books photographed from a top down view. The image contains no specific information. It is only a visual to compliment the blog title of ‘6 Books For Your Alaska Reading List’. This image is decorative because it could be removed and the full context would be understood.
Image courtesy of princesslodges.com

Regardless of the intent, a stock image used for flavor should not be necessary to understand your content. If it is, I recommend moving that context to your text and just using the image to punch things up for visual users. Give it the ALT = “” treatment.

Illustrations

My explanation of illustrations is similar to the stock photo description from the previous section. It is common to have small blocks of text adjacent to an illustration that may provide additional context. For example, imagine a bank’s website that features a description of a financial service with a stylized coin to the left or right of the text. The depiction of money could be relevant to a region (using a euro instead of a penny) and incorporate brand style guidelines. In this instance, the coin is decorative; by itself it does not describe the content next to it, nor should the content be any less understandable if it were removed.

In Conclusion

Not every picture is worth a thousand words. Many of the images that make up pages on the web are just eye candy: bits of line and color that provide rhythm or interest to what is otherwise a text document. If you find it difficult to decide if an image is decorative vs. instructive, read your page or article out loud to another person. If they can understand what you are saying without describing the images, then you can feel assured they are decorative.

The list of examples in this blog post is not exhaustive; the subject of decorative versus informative imagery for websites is expansive. But hopefully, the information provided can give you a solid understanding to start with. If you’re interested in learning more about web accessibility, you can check out our Digital Marketer’s Guide to Accessibility.

Jeremiah Bratton, Senior Front-End Developer

Jeremiah Bratton

Development Team Lead
Development Team Lead

Jeremiah has more than 20 years of experience combining the art of design with the art of web development. As Portent's development team lead, he works closely with the entire development team to bridge the gap between creative aesthetic and technical implementation, building functional and efficient sites that meet client needs while delivering a positive user experience. Jeremiah takes a user-focused approach to web development, and is passionate about making the web accessible to as many people as possible.

Start call to action

See how Portent can help you own your piece of the web.

End call to action
0

Comments

  1. I 100% disagree with, “Putting some fancy photo of a person lying dead from an overwhelming existential crisis at the top of your next work/life balance blog post? If you do, it is very possible that the image is only for decoration.”

    If you, as the author, carefully slected that image for a reason, then it has meaning. If sighted people enjoy the joke or drama of this image, then non-sighted users should too.

    Decorative is when you can replace the image with a photo of some clouds or trees and the user’s experience would be exactly the same. In what you describe, it would NOT be the same user experience.

    1. Thanks for the comment, Anna.

      It has been a while since I read this post, and heading towards 4 years later, I agree with you. I found myself coaching on accessibility and WCAG a lot during 2020, specifically for clients who had little to no conceptual framework for how to do the work themselves. At the time, I was aiming for the most straightforward and prescriptive approach for concerns like this, which left nuance behind in the editing room. Re-reading this section, the specific scenario I had in mind was a hero area used as a textural image placement. Thinking about it, these days, I am more likely to consult on a placement being decorative than the image itself.

      That was a very long way of saying that it is time for me to update this post. Thanks again, Anna.

Leave a Reply

Your email address will not be published. Required fields are marked *

Close search overlay