Image should be marked as decorative
| Field | Value |
|---|---|
| Rule code | Img_Name_ShouldBe_Empty |
| WCAG conformance level | A |
| WCAG success criterion | 1.1.1 Non-text Content |
| Must be fixed at source | No |
Description
We detected an image that should be marked as decorative by providing an empty alt attribute value. Images that do not provide instructive content or define a user-control should not have accessible names and should instead be considered presentational. The accessible name of an image usually comes from the alt attribute or related ARIA properties and should be provided unless the image is deemed decorative. In the case where an image is unimportant or decorative, provide an alt attribute with an empty value and in this case, add a role attribute with a value of presentation. Review this image to determine if it should be presentational or not.
How to fix
If the image is used for layout or otherwise not informative, mark the image as decorative.
For images using the <img> element, use alt="":
<h1>Chapter 1</h1>
<img src="spacer.png" alt="">
<p>Looking back to all that has occurred to me since that eventful day, I am scarcely able to believe in the reality of my adventures. They were truly so wonderful that even now I am bewildered when I think of them.</p>
For images using the <svg> element, use aria-hidden="true":
<h1>Chapter 1</h1>
<svg aria-hidden="true">…</svg>
<p>Looking back to all that has occurred to me since that eventful day, I am scarcely able to believe in the reality of my adventures. They were truly so wonderful that even now I am bewildered when I think of them.</p>