This is a DRAFT resource that supports Working Drafts of WCAG 3. Content in this resource is not mature and should not be considered authoritative. It may be changed, replaced or removed at any time.
🔙 WCAG 3.0 (Silver) Guidelines (Text alternatives)
Method: Decorative Images
Platform
- All web platforms
Technology
- HTML, CSS, ARIA, ePub, PDF
Summary
Decorative images don’t add information to the content of a page. 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. Merely omitting the alternative text can cause problems as some screen readers will try to repair the omission by reading the image filename. 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.
How it solves user need
Explicitly marking an image as decorative will cause assistive technology to skip over the image as if it didn't exist on the page. This reduces time and fatigue needed to listen to descriptions of decorative images or long cryptic file names.
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.
Note: An example of an image ignored because of an ancestor with named from author is when the image is a descendant of a button element that uses aria-label for its accessible name.
Expectation
Each test target is purely decorative.
Note: It is relatively common for an informative image such as an icon to be marked up as decorative, if the text alternative is adjacent to the image. This is a conforming alternative version for the image. This fails the rule but meets conformance requirement 1 of WCAG 2.1.