Image Accessibility 101: Decorative Images

A decorative image is an image that adds visual appeal to the site without adding any additional important information. This image could strictly be a visual decoration or it could be an image whose contents have already been adequately described in the text content of the page.

Tips for writing the alt text:

1) For these images, you want to leave the alt attribute empty (alt="").

Examples:

<div class="envelope__image">
   <img src="../assets/images/envelope-back.png" alt="" class="envelope__img-back" />
   <img src="../assets/images/envelope-card.png" alt="" class="envelope__img-card" 
data-aos="raise" />
   <img src="../assets/images/envelope-cover.png" alt="" class="envelope__img-front" />
</div>

The above image is considered a decorative image because it is not adding any important information to the text alongside it or the rest of the page. It is only there to be a visual decoration for the page. Therefore, the image alt texts are left empty.

This image example consists of more than one image because parts of the image were animated, so they needed to be selected separately. This could also be considered a group of images, which is another type of image that will appear later in this series.

.share-img {
    background-image: url('../images/share.jpg');
    background-size: cover;
    display: block;
    height: 27.3rem;
    width: 100%;
}

This image is also a decorative image that is being used just to enhance the appearance of the page, however, you'll notice that the code for this image is different than the first scenario. Since the image takes up the full height and width of its container and is not adding any information to the page, it can easily be added to the page through the CSS background image property. This keeps it out of the markup completely and allows it to get passed over by a screen reader.

Important Notes:

1) Although the alt attribute is being left empty, it still needs to be present inside the <img /> tag. If left out completely, the screen reader will usually read out the name of the image file. This can be quite confusing for users.

2) Adding alt text to these types of images can create audible clutter or be distracting for screen reader users. This is especially true if the information being shared isn't important to or doesn't match the contents of the page.

3) You can also use the WAI-ARIA role="presentation" attribute to hide images from screen readers, however, not all screen readers acknowledge this. So, if you are going to use it, be sure to pair it with the empty alt attribute.

4) Utilize pseudo-elements and background image properties in CSS to represent decorative images, whenever possible.

Summary

Any image being used on a site solely to enhance the appearance of the site or has already been thoroughly described within the text content, would be considered a decorative image.

If and when possible, try to present these images through a CSS property.
If this doesn't work for an image, the alt attribute for the image needs to be present, but left blank.

Comments

[Waylon Walker]

Great tip. I definitely have bowed down to lighthouse and added rediculous alt tags to images that did not need them. I will definitely make use of this instead next time.