Image posting on the modern web is very purposeful and helps to communicate the overall purpose of a page or view. This means that almost every image you declare should have an alternate description.
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:
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.
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.
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>
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.
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’.
picture element is a container for
img elements. Use the
img element se
alt feature to give an alternative description to the parent
<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>
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!
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
<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>
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: