Your image is probably not decorative – Smashing Magazine

The img element se alt characteristic can be ‘destroyed’, that is to say the empty string instead of a text description.

The non-description of an alt description means that there is no information between the initial and close quotes. If there is an empty space, it will not be considered void:

  <img alt="" src="https://smashingmagazine.com/images/cat.jpg" />

  <img alt=" " src="https://smashingmagazine.com/images/dog.jpg" />

What does ‘decorative’ mean?

The destruction of an image indicates that it is for decorative purposes only.

In this context, decorative means that the image does not communicate information visually it is important to understand the purpose of the page or view, and why the image is included as part of it.

Decorative does not mean that the image contains content that is considered decoration.

For example, a website that sells wallpaper wants alternative descriptions for wallpaper samples:

<a href="https://smashingmagazine.com/products/umbrella?variant=73849024783051">
  <img 
    alt="Small red and white illustrated umbrellas on a teal background."
    src="/images/73849024783051.png" />
</a>

Another example could be a museum website, which benefits from the presentation of a piece from their collection both an alternative description and a caption:

<figure 
  role="figure"
  aria-label="View of Rotterdam, by Cornelis Boumeester. Date: about 1700–20. Accession Number: 2005.1057. In Dutch homes, tiles typically served utilitarian purposes, such as covering the walls of kitchens, utility rooms, passageways, and fireplace surrounds.">
  <img
    alt="A tile painting, composed of 33 Delft tiles forming a view of the port of Rotterdam. Set in a modern mahogany frame, with gilded inscription on bottom border."
    src="https://smashingmagazine.com/collection/w0895/2005-1057.png" />
  <figcaption>
    View of Rotterdam, by Cornelis Boumeester. Date: about 1700–20. Accession Number: 2005.1057. In Dutch homes, tiles typically served utilitarian purposes, such as covering the walls of kitchens, utility rooms, passageways, and fireplace surrounds.
  </figcaption>
</figure>

Make sure your alternative description is include punctuation, too!

Why do you want to decorate an image?

Assistive technology will skip the insignificant images and not reveal their presence. The reasons why you want to do this are mostly historical.

Old layout techniques

Early web development techniques relied on images to help guarantee it consistent layout in different operating systems, browsers and browser versions. The most common example of this was a spacer.gif, a 1 × 1 transparent pixel stretched in different sizes to push the content into place.

This technique usually uses a lot space images to create a visual design. Without a way to silence their presence, these images will confuse what their technology announced and make it confusing and time consuming to navigate and take action on web content.

Old design techniques

Previously, there were CSS features like box-shadow, developers had to use techniques to cut the decorative styling to make it work with content of indefinite height or width. This technique is called 9-cut scale, a term that refers to the 9 sections of content that you need to create.

Like spacer images, 9-slice scale used multiple images to create the desired visual effect. And, like distance images, the only way to remove the clutter these images made were to mark it as decorative.

Unnecessary announcements

There is a rare scenario where an image is repeated on a page or version, and that repeated placements provide no extra context. You should be careful in this situation to mark an image decoratively, as the lack of an announcement for a visible image can be confusing for someone with poor eyesight using a screen reader.

Additional Icons

Links and buttons that use icons should always be an accessible name which communicates functionality. If the design also contains an icon, the design of the icon does not need to be communicated.

<button type="button">
  <img src="https://smashingmagazine.com/2021/06/img-alt-attribute-alternate-description-decorative/icon-print.svg" alt="" />
  Print
</button>

If the component uses only an icon, the image itself must be used to create the accessible name:

<button type="button">
  <img src="https://smashingmagazine.com/2021/06/img-alt-attribute-alternate-description-decorative/icon-print.svg" alt="Print." />
</button>

Note that a visible text label is the preferred technique. A visible text label can be translated and communicate purpose more directly.

Contemporary use

Modern CSS layout and styling techniques mean that the placement of image is now very deliberate. This means that if an image is used, it will probably need an alternative description.

Alternative descriptions should communicate the purpose of the image. This includes the content of the image, but may also include the reason why it was included in the context of the page or the display in which it was included. This is one of the reasons why alternative image descriptions will never be fully automated.

Other ways to display images

There are a few other ways to display an image on a page or version. It is important to ensure that an alternative description is provided if the picture contains meaningful content – regardless of the technique used.

The picture Element

The picture element do not have an implicit role, which means that its presence does not communicate any purpose with assistive technology. This means that it cannot be used to semantically describe the presence of a ‘photo’.

The picture element is a container for source and img elements. Use the img element se alt feature to give an alternative description to the parent picture element.

<a href="https://smashingmagazine.com/product/9091866/color/3">
  <picture>
    <source 
      srcset="https://smashingmagazine.com/9091866-3.avif" 
      type="image/avif" />
    <img 
      alt="A black ankle-length boot with metal eyelets, yellow stitching, and a padded collar and tongue."
      src="9091866-3.png" />
  </picture>
</a>

Wallpapers

We can use CSS to declare an image as a background of an HTML element. It is mostly used to give a sense of texture to a design.

Another popular technique, however, is to use a background-image to place an image in such a way that the developer does not control the size of the picture upload someone. background-image, combined with other features such as background-size will cause content of an unknown size to be displayed without breaking the design.

In a scenario like this, our old friend spacer.gif can be useful again!

Inlyn SVG

SVG can be displayed by linking to it via the src feature in a img element, or by placing the SVG code in the page or view.

If you use built-in SVG, you must do so use SVGs title (and possibly desc) element in place of a alt characteristic.

<svg 
  role="img" 
  aria-labelledby="icon-bookmark-desc"
  xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <title id="icon-bookmark-desc">Bookmark.</title>
  <path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/>
</svg>

Equivalent experience

In modern web design and development, displaying an image is a very deliberate act. With alternative descriptions we can explain the content of the image, and thus communicate why it is worthwhile to include.

Just because an image displays something fantastic does not mean that it is worth describing. The announcement of his presence ensures that anyone, regardless of ability or circumstances, can fully understand your digital experience.

Further reading on SmashingMag:

(vf, hy)