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.

No comments? Be the first!

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).