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. [1]
Images may be deemed 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. [1]
Decorative images should be coded as follows:
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="" />
Screen reader skips over the image because it's alt tag is empty.
<div class="m-info-unit_image
m-info-unit_image__square"
style="background-image: url(https://s3.amazonaws.com/files.consumerfinance.gov/f/images/clipboard-round-300x300.dcd0a1d3464c.original.png);">
</div>
Screen reader doesn't process the DOM element because it's tag is empty.