Decorative images

There are times that images shouldn’t be read because it would be repetitive or not add any value in addition to the existing page content. These types of images are generally included for purely stylistic purposes and don’t impart any meaning to the rest of the content on the page.

Icon buttons

When it’s unavoidable to use an icon button (no text label) DO NOT rely on image alt text to supply the name for a icon button.

Is this image decorative or informative?

If the image conveys important meaning, and there’s no other text on the page which explains the concept within it, then the image is likely informative. In this case, check out the informative image checklist item instead.

If your image contains text inside it, it should not! This is a violation of WCAG AA 1.4.5 Images of Text. Exceptions exist for logos.

The alt attribute is still required

  • To have valid HTML, the alt attribute must still be present, even when set to the empty empty value of alt. Note that alt and alt="" (no space) are equivalent in HTML.
    • When the alt attribute is empty, the screen reader ignores it (and will not read anything).
    • When the alt attribute is missing, the screen reader will read the src name or filename of the image which is a very poor user experience.

Reinforce decorative images with aria-hidden

  • Use aria-hidden="true" as a backup and reinforcement to alt:
    • Backup: developers often mistakenly omit the alt attribute entirely, meaning that some screenreaders will read the entire filename without an alt attribute. Including aria-hidden="true" will act as a backup.
    • Reinforcement: using aria-hidden="true" ensures that screenreaders ignores the image. Screenreaders have been observed reading an image role even when the alt attribute is empty.

Your plan might be changing soon

Call us: 888-888-8888 
<h3 class="h-charlie decorated">
  <img
    src="/assets/images/icons/icon-info.svg"
    aria-hidden="true" 
    class="icon"
    alt />
  Your plan might be changing soon
</h3>
<a 
  href="tel:8888888888"
  class="button icon-button-text">
  <img 
    src="/assets/images/icons/icon-phone.svg"
    aria-hidden="true"
    class="icon"
    alt />
    Call us: 888-888-8888
</a>

Using inline SVG

Inline SVG that is decorative

Inline SVGs require some special code to be hidden properly from screen readers:

  • aria-hidden="true"

If you are using a <use /> element, add aria-hidden="true".

<svg aria-hidden="true" focusable="false">
  <use href="#svg-id" aria-hidden="true" />
  <!-- if not using <use> then the child elements 
       of the inline SVG would go here -->
</svg>

Design notes

Further reading

Related decorative image / icon entries