Decorative Images: How to Identify and Tag Them For Accessibility

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.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.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 my Quick Start Guide for Accessible Web Content.

The post Decorative Images: How to Identify and Tag Them For Accessibility appeared first on Portent.