The Alt attribute of the IMG element can be “null”, that is, set to an empty string rather than a text description.

Nullifying an Alt description means there is no information between the opening and closing quotes. If there is an empty space, it is not considered empty.

<img alt="" src="/images/cat.jpg" />

This picture is no longer valid.

<img alt=" " src="/images/dog.jpg" />

The image has not been cancelled.

What do you mean “decorative”?

Removing an image indicates that it is only for decorative purposes.

Decorative in this case means that the image does not visually convey information that is important to understand the purpose of the page or view and why the image was used as part of it.

Decorative does not mean that the image contains content that would be considered decorative.

For example, a website that sells wallpaper will want a backup description of the wallpaper sample.

<a href="/products/umbrella? variant=73849024783051"> <img alt="Small red and white illustrated umbrellas on a teal background." src="/images/73849024783051.png" /> </a>Copy the code

Another example is a museum’s website describing how their collections could benefit from alternate descriptions and illustrations.

<figure role="figure" aria-label="View of Rotterdam, by Cornelis Boumeester. Date: about 1700 -- 20. Accession Number: 2. In Dutch homes, tiles typically served utilitarian purposes, such as 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="/collection/w0895/2005-1057.png" /> <figcaption> View of Rotterdam, Date: About 1700 -- 20. Accession Number: 2. In Dutch homes, tiles typically served utilitarian purposes, such as as covering the walls of kitchens, utility rooms, passageways, and fireplace surrounds. </figcaption> </figure>Copy the code

Make sure your alternate description includes punctuation as well!

Why make pictures decorative?

Assistive technology skips invalid images and does not declare their existence. The reasons for wanting to do so are largely historical.

Old layout techniques

Early web development techniques relied on graphics to help them ensure a consistent layout across different operating systems, browsers, and browser versions. The most common example of this is a spacer.gif, a 1×1 transparent pixel that is stretched to different sizes to push content into position.

This technique typically uses many spaced images to create a visual design. If there is no way to make them non-existent, these images clutter up assistive technology announcements and make browsing and acting on web content confusing and time-consuming.

Old design techniques

Before CSS attributes, such as box-shadow, developers had to use techniques to separate decorative styles and make them suitable for content of uncertain height or width. This technique is called 9-slice scaling, a term that refers to the nine pieces of content you need to create.

Like spaced images, 9-slice scaling uses multiple images to create the desired visual effect. And, as with spaced images, the only way to eliminate the clutter these images create is to mark them as decorative.

Lengthy announcement

There is a rare case where an image appears repeatedly on a page or view, and its repeated location does not provide any additional context. In this case, you should be careful to mark the image as decorative, as the lack of announcement of the visible image can be confusing for people with low vision who use screen readers.

Complementary icon

Links and buttons that use ICONS should always have an accessible name that communicates functionality. If an icon is included in the design, then the design of the icon does not need to be communicated.

<button type="button">
  <img src="icon-print.svg" alt="" />
  Print
</button>
Copy the code

If the component uses only one icon, the image itself should be used to create accessible names.

<button type="button">
  <img src="icon-print.svg" alt="Print." />
</button>
Copy the code

Note that visible text labels are the preferred technique. Visible text labels can be translated and communicate purpose more directly.

I don’t know what this button does.

Modern use

Modern CSS layout and styling techniques mean that image placement is now very intentional. This means that if images are used, it will most likely require an alternate description.

Alternate descriptions should convey the purpose of the image. This includes the content of the image, but may also include the reason it is included in the background of the page or view. This is one reason why alternate image descriptions can never be fully automated.

Other ways to display images

There are other ways to display images on a page or view. It is important to ensure that an alternate description is provided if the image contains meaningful content, regardless of the technique used.

pictureThe element

The picture element has no implicit role, which means that its presence does not convey any purpose to assistive technologies. This means that it cannot be used to semantically describe the existence of a picture.

The picture element is a container for the Source and IMG elements. Use the Alt attribute of the IMG element to provide an alternative description for the parent picture element.

<a href="/product/9091866/color/3">
  <picture>
    <source 
      srcset="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>
Copy the code

The background image

We can use CSS to declare an image as the background of an HTML element. This is most often used to add texture to a design.

However, another popular technique is to use background-image, which places images in such a way that developers have no control over the size of images uploaded by others. Background-image, combined with other attributes such as background-size, ensures that contents of unknown sizes are displayed without breaking the design.

See The Example of Using background images as Foreground images by Eric Bailey.

In that case, our old friend spacer.gif, might be helpful again!

Inline SVG

SVG can be linked to it via the SRC attribute in the IMG element, or displayed by inlining SVG code in a page or view.

If you use inline SVG, you need to use the TITLE (and possibly DESC) element of SVG instead of the Alt attribute.

<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>
Copy the code

Equivalent experience

Displaying images is a highly intentional act in modern web design and development. Alternative descriptions allow us to explain the content of the image and, in doing so, convey why it is worth including.

Just because an image shows something that arouses the imagination doesn’t mean it’s not worth describing. Announcing its existence ensures that anyone, regardless of ability or circumstance, can fully understand your digital experience.

Read more on SmashingMag.

  • Accessibility in Chrome development tools
  • A complete guide to accessibility tools
  • Provide accessible graphics when it matters most
  • Accessible SVG: The perfect model for screen reader users
  • Design motion reduction designs for motion sensitive people
  • Read more about accessibility, usability, and user experience.