Table of Contents
5.1.1. Use an empty alternate text (alt="") for decorative and illustrative images
When a decorative or illustrative image is included in the HTML code, the alt attribute must be added to the <img/> tag and left empty (without a space between the quotation marks of alt=””).
<img src="decorative-image.png" alt="" />
To check if an image is decorative/illustrative or informative, ask yourself if the absence of the image would change your understanding of the content. If the answer is “yes”, then enter the alternate text; otherwise, leave the alt attribute empty.
Whenever possible, decorative images should not be included in the HTML code but loaded into the page with CSS.
Examples
In this example, the decorative and illustrative images are indicated with the arrows. If they are included in the HTML code and are not clickable, then they should have an empty alternate text (alt=””).
Related recommendations
- Previous recommendation: 4.2.2. Use HTML tags for their semantic value
- Next recommendation: 5.2.1. Do not use CSS to display informative images
