Method: Decorative Images

Outcome

This method supports the outcome Text alternatives available.

Detailed description

Decorative images don’t add information to the content of a page. For example, the information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive.

In these cases, a null (empty) alt text should be provided (alt="") so that they can be ignored by assistive technologies, such as screen readers. Text values for these types of images would add audible clutter to screen reader output or could distract users if the topic is different from that in adjacent text. Leaving out the alt attribute is also not an option because when it is not provided, some screen readers will announce the file name of the image instead.

Whether to treat an image as decorative or informative is a judgment that only the author can make, based on the reason for including the image on the page. Images may be decorative when they are:

• Visual styling such as borders, spacers, and corners;
• Supplementary to link text to improve its appearance or increase the clickable area;
• Illustrative of adjacent text but not contributing information (“eye-candy”);
• Identified and described by surrounding text.

Dependencies

None

Passed

Passed example 1

This img element with an empty alt attribute which is not included in the accessibility tree is purely decorative.

<p>Happy new year!</p>
<img src="/test-assets/shared/fireworks.jpg" alt="" />

Passed example 2

<p>Happy new year!</p>
<img src="/test-assets/shared/fireworks.jpg" aria-hidden="true" role="img" alt="" />

Passed example 3

This img element that is ignored by assistive technologies because it has an explicit semantic role of none is purely decorative.

<p>Happy new year!</p>
<img src="/test-assets/shared/fireworks.jpg" role="none" alt="ignore me" />

Passed example 4

This svg element that is ignored by assistive technologies because it has no attribute that would give it an accessible name is purely decorative.

<p>Happy new year!</p>
<svg height="200" xmlns="http://www.w3.org/2000/svg">
  <polygon points="100,10 40,180 190,60 10,60 160,180" fill="yellow" />
</svg>

Passed example 5

This canvas element that is ignored by assistive technologies because it has no attribute that would give it an accessible name is purely decorative.

<p>Happy new year!</p>
<canvas id="newyear" width="200" height="200"></canvas>
<script>
  const ctx = document.querySelector('#newyear').getContext('2d')
  ctx.fillStyle = 'yellow'
  ctx.beginPath()
  ctx.moveTo(100, 10)
  ctx.lineTo(40, 180)
  ctx.lineTo(190, 60)
  ctx.lineTo(10, 60)
  ctx.lineTo(160, 180)
  ctx.fill()
</script>

Failed

Failed example 1

This img element with an empty ("") alt is not purely decorative.

<img src="/test-assets/shared/w3c-logo.png" alt="" />

Failed example 2

This img element which is not included in the accessibility tree because it has an explicit semantic role of none is not purely decorative.

<img src="/test-assets/shared/w3c-logo.png" aria-hidden="true" alt="W3C logo" />

Failed example 3

This img element which is not included in the accessibility tree because it has an explicit semantic role of none is not purely decorative.

<img src="/test-assets/shared/w3c-logo.png" role="none" alt="W3C logo" />

Failed example 4

This svg element which has a semantic role of graphics-document and an empty ("") accessible name is not purely decorative.

<p>Best W3C logo:</p>
<svg viewBox="0 0 512 512">
  <path d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23M259.5 0h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8l-16.1-24.8v34.2h-22.6M348.7 0h23v46.2h32.6V69h-55.6"/>
  <path fill="#e44d26" d="M107.6 471l-33-370.4h362.8l-33 370.2L255.7 512" />
  <path fill="#f16529" d="M256 480.5V131H404.3L376 447" />
  <path fill="#ebebeb" d="M142 176.3h114v45.4h-64.2l4.2 46.5h60v45.3H154.4M156.4 336.3H202l3.2 36.3 50.8 13.6v47.4l-93.2-26" />
  <path fill="#fff" d="M369.6 176.3H255.8v45.4h109.6M361.3 268.2H255.8v45.4h56l-5.3 59-50.7 13.6v47.2l93-25.8" />
</svg>

Failed example 5

This canvas element which has no semantic role and an empty ("") accessible name is not purely decorative.

<canvas id="w3c" width="200" height="60"></canvas>
<script>
  const ctx = document.querySelector('#w3c').getContext('2d')
  ctx.font = '30px Arial'
  ctx.fillText"('WCAG Rules!', 20, 40)
</script>

Inapplicable

Inapplicable example 1

This img element is included in the accessibility tree because the alt attribute is not empty ("").

  <img src="/test-assets/shared/w3c-logo.png" alt>="W3C" />

Inapplicable example 2

This img element is neither visible nor included in the accessibility tree.

<img src="/test-assets/shared/w3c-logo.png" style="display:none" alt="" />

Inapplicable example 3

This img element is not visible because it is positioned off screen.

<style>
  img {
    position: absolute;
    top: -9999em;
  }
</style>
<img src="/test-assets/shared/fireworks.jpg" alt="" />

Inapplicable example 4

This svg element is ignored because it is a child of a link that provides its accessible name.

<a href="https://example.org" aria-label="SVG star">
  <svg height="200" xmlns="http://www.w3.org/2000/svg">
    <polygon points="100,10 40,180 190,60 10,60 160,180" fill="yellow" />
  </svg>
</a>

Inapplicable example 5

This svg element has a semantic role of img and an accessible name from its aria-label attribute.

<svg viewBox="0 0 512 512" role="img" aria-label="HTML 5 logo">
  <path d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23M259.5 0h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8l-16.1-24.8v34.2h-22.6M348.7 0h23v46.2h32.6V69h-55.6" />
  <path fill="#e44d26" d="M107.6 471l-33-370.4h362.8l-33 370.2L255.7 512" />
  <path fill="#f16529" d="M256 480.5V131H404.3L376 447" />
  <path fill="#ebebeb" d="M142 176.3h114v45.4h-64.2l4.2 46.5h60v45.3H154.4M156.4 336.3H202l3.2 36.3 50.8 13.6v47.4l-93.2-26" />
  <path fill="#fff" d="M369.6 176.3H255.8v45.4h109.6M361.3 268.2H255.8v45.4h56l-5.3 59-50.7 13.6v47.2l93-25.8" />
</svg>

Inapplicable example 6

This canvas element is not visible because it is completely transparent.

<canvas width="200" height="200"></canvas>

Inapplicable example 7

This canvas element has a semantic role of img and an accessible name from its aria-label attribute.

<canvas id="w3c" width="200" height="60" role="img" aria-label="WCAG Rules!"></canvas>
<script>
  const ctx = document.querySelector('#w3c').getContext('2d')
  ctx.font = '30px Arial'
  ctx.fillText('WCAG Rules!', 20, 40)
</script>

Inapplicable example 8

This img element is visible but included in the accessibility tree.

Note: While it might be better for the PDF icon to be ignored by assistive technologies, because assistive technologies will announce “PDF” twice, the image is not purely decorative. Having assistive technologies ignore it is not required by Success Criterion 1.1.1 Non-text content.

<img src="/test-assets/shared/pdf-icon.png" alt="PDF" /> PDF document

Inapplicable example 9

This is a div element with a background image. Background images must be tested separate from this rule.

<p>Happy new year!</p>
<div
  style="
  width: 260px;
  height: 260px;
  background:url(/test-assets/shared/fireworks.jpg) no-repeat;"
></div>

Inapplicable example 10

This img element has an src attribute which will cause the image request state to be Broken.

<img src="/test-assets/does-not-exist.png" alt="" />

Get Started

To get started with checking images, refer to the WAI Easy Checks — A First Review of Web Accessibility page.

Summary

This test checks that visible img, svg and canvas elements that are ignored by assistive technologies are decorative.

Applicability

This outcome applies to any img, canvas or svg element that is visible and for which one of the following is true:

excluded:

The element is not included in the accessibility tree; or

ignored svg:

The element is an svg with an empty ("") accessible name and a semantic role of graphics-document; or

ignored canvas:

The element is a canvas with an empty ("") accessible name and no explicit semantic role; or

Exception: This outcome never applies to elements for which one of the following is true:

The element has an ancestor in the flat tree that is named from author; or

The element is an img element where the current request's state is not completely available.

Expectation

Each test target is purely decorative.

W3C Resources

• Web Accessibility Tutorials: Images: Decorative Images
• CSS Generated Content Module Level 3 Working Draft
• PDF4 Hiding decorative images with the Artifact tag in PDF documents

Non-W3C Resources

• Accessible Publishing Knowledge Base: HTML: Images