When is an image 'purely decorative'?

Accessibility guidelines require us to let assistive technologies ignore 'purely decorative' images. Sounds simple enough, but sometimes it's hard to decide when an image is purely decorative. In this article we argue that blank text alternatives are often best.

Sometimes it's hard to decide when an image is 'purely decorative'. Web writers might be unsure, while web content managers want a consistent approach across a whole site.

A definition of 'purely decorative'

The Web Content Accessibility Guidelines 2.0 defines purely decorative images as:

serving only an aesthetic purpose, providing no information, and having no functionality.

The HTML5 standard (April 2014 draft) says:

Purely decorative images are visual enhancements, decorations or embellishments that provide no function or information beyond aesthetics to users who can view the images.

So an image is purely decorative when it meets three criteria:

  1. Used for aesthetic purposes (visual enhancements, decorations, embellishments)
  2. Provides no information
  3. Has no function (beyond aesthetics).

Examples of decorative images

Templated images—part of the visual design

Decorative images are often used as visual design elements on websites. They can form part of a page's headers, footers or sidebars. Some sites also use images to create fancy dot points or backgrounds for quotations.

I'm calling them templated images because they are an integral part of design templates. They're usually included using style sheets, allowing screen readers and Braille devices to ignore them. There's little debate about these images—most agree they are purely decorative.

But some templated images are embedded in a page so they can be updated, usually by a marketing or communications team. They might be carousel backgrounds, feature article banners, or thumbnails for a series of news or promotional content. Are these marketing-style images purely decorative? Opinions differ. Here are some examples.

In this image two staff members wearing safety gear are shown working in an outdoor setting lit with golden sunlight. Overlaid in text is the message 'A sustainable and socially responsible business' and a link to a sustainability report.Small images added above links to news items on a university website. Each image bears some relationship to the news content, though two of the three are likely to be stock images.Thumbnail images decorating links on a state tourism website. These images probably depict the locations mentioned in the link text, but they are very small, so it's not easy to tell.Feature article banner image on a federal government website.

The image in this example is a close-up of a eucalyptus leaf with water droplets. The page is about an emissions reduction fund, so the image and content share an environment theme.

Images added to content pages

Web writers can usually add images to the content of a page. Often the images are informative (graphs, charts, maps, product images, infographics, screenshots). Sometimes they're functional (images acting as links). In both these cases, the images clearly need a text alternative.

But some images are more decorative, like those shown below. Some web writers will judge these images as purely decorative and leave the text alternative blank. Others will include a text alternative.
An image in an article on meditation during pregnancy from a health magazine.

The image shows a pregnant woman sitting indoors meditating.

4 types of text alternatives

A quick review shows 4 types of text alternatives are used for these types of images:

  1. Short design-role labels: "carousel", "banner", "news item graphic", "open day photo"
  2. Short descriptive labels: "smiling workers", "eucalyptus leaves", "needle", "children with puppies"
  3. Longer descriptive labels: "Two staff members wearing safety gear, shown working outdoors collecting information on a laptop and mobile phone", "Eucalypt leaf, Tidbinbilla Nature Reserve, Australian Capital Territory", "A researcher draws blood from a patient's arm", "3 young children, two boys and a girl, play with 2 golden labrador puppies, soon to be trained as seeing eye dogs"
  4. Blank text alternatives.

The first is incorrect, and most would agree the second is too. They are likely to be written by people with limited understanding of accessibility guidelines.

But types 3 and 4 show that people make different judgements. Some argue that text alternatives are necessary whenever images communicate a brand message or value, an emotion or mood, or provide an example of what is being discussed on the page.

Deciding what is 'purely decorative'

While the definition of 'purely decorative' seems helpful, practice shows that it's not. One person's decorative is another's informative.

Unfortunately, there's little research in this area to guide us. Surveys run by WebAIM collect screen reader users' opinions, but as one of the survey authors recently wrote:

If you ask a user if they would prefer more web content or less web content, they predominantly indicate that they want more, regardless of the drawbacks. Subjects generally indicate that they prefer more verbose alternative text, explanatory descriptions, etc. Of course nobody wants to be left out. But sometimes users have difficulty telling you what they actually want. Actual user testing often indicates that people with disabilities really prefer efficiency over verbosity." See: Loss aversion and web accessibility

So, what should a web writer do? Some accessibility advocates suggest that writers know why they've included an image and should make the call accordingly. Others offer 'when in doubt, include a text alternative', or 'err on the side of minimalism'. However, this advice leads to inconsistency across a site and can create problems when content is audited, reviewed or updated by someone else.

Web content managers need to decide, within the scope of the accessibility guidelines, what to do about decorative images. They need to provide clear guidelines, supported by examples, and ensure writers and reviewers understand what's required. This should be documented in a style guide and covered in training.

5 reasons for choosing blank text alternatives

I understand that those who provide a text alternative, do so with good intention. But I think a blank text alternative for these types of image is better. Here's why:

  1. They play a role that is largely aesthetic. They don't need to be there, and may not have been if the content was written by someone else or the template design was different.
  2. While they might be communicating something, it's subtle in some cases, inessential in others. Adding a text alternative merely adds words, rather than real information.
  3. Most descriptive labels seem awkward or inadequate. It's not that brand values or messages can't be communicated in text, but they require something more creative than a simple description of the content of an image.
  4. They are often on 'navigation' pages—pages a user moves through to access the content they're looking for. Adding more words may just add to the time it takes to find the right link.
  5. Finally, while facilitating usability testing I've watched screen reader users—even very experienced ones—become confused by text alternatives for decorative images. I've seen puzzled expressions or been asked to explain what's going on. And I've seen people try to click on images (that aren't links) because the text alternative mentioned a word or phrase related to their task.

So I suggest using blank text alternatives for photos that play a decorative role including those that:

  • Convey brand messages or values, mood or emotions
  • Are not essential to the content.

Related articles

Write better text alternatives

Improve your website's accessibility and SEO. Join our course - learn how to write useful text alternatives for images.

Book a course at https://4syllables.com.au/