How do I know if an image is decorative?

Question

What's the best way to decide whether an image is meaningful or decorative?

Answer

Images that convey information that isn't otherwise available on the same page in text are meaningful. Images that convey no additional information are decorative.

However, whether an image is meaningful or decorative often depends on context. A good place to start is to think about why the image was included in the design in the first place. What is the image intended to convey? Is that information lost if the image is removed?

A common example is a product image on a shopping website.

In the following cases, the image could be considered meaningful:

  • The image conveys details about the product, such as its texture, materials, available colors, or size, and this information isn't available as text on the page.
  • The image conveys ideas about ways to use or store the product, and this information isn't available as text on the page.
  • The image conveys experiences or emotions related to using the product, and this information isn't available as text on the page.

In the following cases, the same image could be considered decorative:

  • The image helps convey the types of products the website sells, but this same information is also available as text on the page.
  • The image helps convey which products are in the customer's cart, but this same information is also available as text on the page.
  • The image helps convey details about the product, but these same details are also available as text on the page.

If an image is meaningful in context, it needs a text alternative that conveys its meaning.

If an image is decorative in context, it should be coded to be ignored by assistive technology.

For more help, check out the Guided Manual WCAG Audit Tool from Accessible Web, which includes an image highlighter and recommendations for coding your images correctly.

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.