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="" />