When are icons considered decorative vs functional?

Question

Are images such as 'breadcrumb' or 'PDF' icons considered decorative?

Summary

Icons are considered decorative when they do not add new meaning beyond nearby text, and functional when they convey information or serve a purpose on their own. Decorative icons do not require alt text, while functional icons must have an accessible name.

Applies To

• Product / Feature: Accessibility (WCAG compliance)
• Version / Platform: All versions
• Platform / OS / Browser: All browsers and devices
• Audience: Web developers, content authors, accessibility practitioners
• Prerequisites: Basic understanding of alt text and image purpose

Answer

This depends on the context, usage, and the code relating to the icons.

For example, a PDF icon that accompanies a link text of "download the PDF version" would be considered decorative as all the information you need is in the link text. An isolated PDF icon with no associated text describing the purpose of the image (just the icon) would be considered functional.

The image icon that breadcrumb navigation often uses to divide each link in the trail would also be considered decorative. However, a homepage-link in the breadcrumb trail presented as an "image of a house" - or something to that effect - would be considered functional.

Therefore, if the icon has a purpose beyond looking nice, it requires an accessible name as a text alternative to the information conveyed visually in the image.

A simple way to test this is to disable images in your browser settings and determine if you still need the icons to understand or use the page. There are free Chrome extensions that allow you to easily disable images for testing purposes.

Related Resources

For more information on best practices see "Accessibility: Image Alt text best practices".