Decorative Images…

…aren’t a thing.

Three hand-drawn lines curling together like an S or three skinny snakes trying to spoon.

At least not as far as people are concerned. Yes, this is an absolutist take, but sometimes it’s necessary to take the absolutist position to force someone to justify their own reasoning. Make them argue for something they’ve not considered. Revisit their own decision-making process.

Broadly, I’m talking about images in narrative content that are not also iconography nor used as part of interactive controls.

Adding an image to a design, email, document, page, app, etc. is done for a reason. Maybe the author wants to convey a mood or connect it to a theme. In which case, the person who can’t see the image would likely benefit from knowing that mood, having that connection made.

Sometimes the reason is far more pedestrian. Maybe the author wants to fill white space. In which case, that’s a design gap. It should be addressed in layout, otherwise the author is unintentionally sending a message to those who can see it.

I’m not discussing every possible scenario. That’s been done. Instead, I’m providing you some over-simplified questions to ask when evaluating an image:

  1. If the decorative image was removed completely, would any readers care?
    • No? Then remove the image.
    • Yes? Then it’s not decorative.
  2. If the decorative image was replaced with a picture of poo, would you as the author care?
    • No? Then remove the image.
    • Yes? Then it’s not decorative.

Decision Tree

To hopefully make this a bit easier on all of us, I’ve adapted the WAI alt text decision tree to include more steps.

Does the image contain text?

If yes, the image contains text…

  • … and the text has a specific function, for example is an icon. Use the alt attribute to communicate the function of the image. See Functional Images.
  • … and the text in the image is not present otherwise. Use the alt attribute to include the text of the image. See Images of Text.

If no, the image contains no text…

Is the image used in a link or a button, and would it be hard or impossible to understand what the link or the button does, if the image wasn’t there?

If yes, the image is contained in a control…

  • Use the alt attribute to communicate the destination of the link or action taken. See Functional Images.

If no, the image is not contained in a control…

Does the image contribute meaning to the current page or context?

If yes, the image contributes meaning…

  • … and it’s a simple graphic or photograph. Use a brief description of the image in a way that conveys that meaning in the alt attribute. See Informative Images.
  • … and it’s a graph or complex piece of information. Include the information contained in the image elsewhere on the page. See Complex Images.
  • … and it shows content that is redundant to real text nearby. Use an empty alt attribute. See (redundant) Functional Images.

If no, the image contributes no meaning…

Is the image purely decorative or not intended for the user?

If no, the image is not purely decorative or is intended for the user…

  • Then probably start over to better identify how to give it a text alternative.

If yes, the image is purely decorative or not intended for the user…

If the image was removed completely, would any readers care?

If yes, users would care if the image went away…

  • Users will think it’s not decorative. I suggest you start over.

If no, users wouldn’t care if the image went away…

If the image was replaced with a picture of poo, would you as the author care?

If no, the author wouldn’t care if the image was replaced by poo…

  • You should care. Poo is not decorative. I suggest you start over.

If yes, the author would care if the image was replaced by poo…

  • We agree that poo is not decorative. Remove the picture and save yourself the hassle.

3 Comments

Reply

Hi! I guess this depends on the definition of “decorative”. If we think of actual images hanging on the wall in an apartment are these questions still valid? If abstract art someone has on the wall is not decorative then what is it?
“Maybe the author wants to fill white space” isn’t it one of the functions of decorative images?
I have a feeling that sometimes alt would add just noice, as images that are intended to speed up browsing for sighter users would do the opposite for ones using SR

Michal; . Permalink
In response to Michal. Reply

Hi! I guess this depends on the definition of “decorative”. If we think of actual images hanging on the wall in an apartment are these questions still valid?

Ask the host how they would feel about removing them if they weren’t prepared to answer questions about each one, including they they are hung. I think you’ll find most hosts are delighted to talk about the photos they’ve hung showing them holding fish or trophies or babies or posing in front of people or buildings or babies.

If abstract art someone has on the wall is not decorative then what is it?

Insight into the taste and style of the host, and maybe a signal about how much money they want you to know they have.

“Maybe the author wants to fill white space” isn’t it one of the functions of decorative images?

For a transparent 1990s-era spacer.gif, sure. For all others, see my second question in the post.

I have a feeling that sometimes alt would add just noice, as images that are intended to speed up browsing for sighter users would do the opposite for ones using SR

In some contexts, alt text can add noise. See my linked posts Long Alt and My Approach to Alt Text for more context.

But if you aren’t a daily screen reader user and / or you haven’t checked with your audience, then you need more than a feeling to decide on their behalf.

In response to Adrian Roselli. Reply

Thanks for the response, I still would argue that some images are simply decorative and it’s pretty shallow to assume people hang something on the wall just to brag from time to time or have a conversation starter, won’t you agree?
Even on your homepage images serve only as decorative image to blog post anchors, they have empty alt and it’s of course correct, only inside the article the image is properly labeled. Will you remove them then? ;)

Michal; . Permalink

Leave a Comment or Response

  • The form doesn’t support Markdown.
  • This form allows limited HTML.
  • Allowed HTML elements are <a href>, <blockquote>, <code>, <del>, <em>, <ins>, <q>, <strong>, and maybe some others. WordPress is fickle and randomly blocks or allows some.
  • If you want to include HTML examples in your comment, then HTML encode them. E.g. <code>&lt;div&gt;</code> (you can copy and paste that chunk).