Good Alt Text

What is it for?

While basic alt text just labels an image, good alt text explains its purpose. It bridges the gap between seeing a visual and understanding why it is there.

• Delivers the exact message, data, or emotion the image is meant to convey
• Provides an equivalent user experience instead of just ticking a compliance box
• Prevents confusion caused by vague descriptions like ‘chart’ or ‘screenshot’
• Focuses only on the details that matter to the surrounding text

How to support it

Supporting good alt text means moving past basic labels and focusing on the specific message your image is meant to communicate.

• Think about what information a user misses if the image fails to load
• Tailor the text to match the specific context of the surrounding page
• Avoid bad examples like ‘image.png’ or ‘graph’, which give the user zero useful context
• Use good examples like ‘Line graph showing a twenty percent increase in app sign-ups this quarter’ to provide immediate value

Useful links

• Write helpful Alt Text to describe images (external site)
• Good Alt Text, Bad Alt Text — Making Your Content Perceivable (external site)
• What’s the alternative? How to write good alt text (external site)