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.

Annotations for decorative images

  • Use alt="" to definitively declare the alt attribute should be empty
    • The alt attribute is still required
    • If it is missing, the screen reader announces the file title like “/images/icons/icon-info.gif”
  • When creating code components, use alt="" and aria-hidden="true" to reinforce the image should be ignored by the screen reader in case someone adds alternative text later

Code examples

Note: 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 />
  Note: Your plan might be changing soon.
</h3>
<a 
  href="tel:8888888888"
  class="decorated">
  <img 
    src="/assets/images/icons/icon-phone.svg"
    aria-hidden="true"
    class="icon"
    alt />
    Call us: 888-888-8888
</a>

Design notes

Further reading

Related decorative image / icon entries