Better Alt Text
AI can suggest alt text, but it won’t always know what your page is trying to do. These questions below help you decide when to write descriptions that support your content or when it’s better to mark an image as decorative.
You'll find tips on how to implement in Webflow and further reading links that take you to the W3C WAI guidelines. The tool was built using their Alt Text Decision Treeas a guide.
Ready for better alt text?
Does this image include words?
For example: a product shot, a poster, a sign, a quote graphic, a social media graphic, or text baked into an image.
What’s going on with that text?
Pick the option that feels closest.
You don’t need alt text here
If the same words are already written on the page, screen reader users will hear them anyway.
What to do in Webflow: Switch the alt text to Decorative for this image. Why? It stops the text being read out twice.
See Decorative Images.
The text isn't important
If the text is there for style or atmosphere, it doesn’t need to be described.
Followup question: If you removed the image would any important information be missing?
Describe what it does
If it works like a button or link, the alt text should explain the action.
Example: Instead of “A picture of a sign saying download”, use “Download the report”. In Webflow: Put that wording in the Custom Alt text field.
See Functional Images.
Include the words
If the text only exists inside the image, people won’t know it’s there unless you write it out.
In Webflow: Put the exact wording into the Custom Alt text field.
See Images of Text.
Would it be hard to know what happens on click if you couldn’t see the image?
In other words: is the image doing the explaining?
Say what happens when you click
People need the destination or action — not the image description.
Examples: Go to homepage, Download the report, Open settings. In Webflow: Put that wording into the Custom Alt text field.
See Functional Images.
Does it add meaning?
If you removed the image, would anything important be missing?
What kind of image is it?
Keep it short and useful
Describe the main point (not every detail) in a way that conveys the meaning. Go ahead and use AI to generate this, just make sure it's not waffly. AI does like to waffle sometimes.
In Webflow: Add a short description in the Custom Alt text field.
See Informative Images.
This needs more than alt text
Charts and diagrams usually have too much information for a short description.
What to do: Put the full explanation in normal text nearby.
In Webflow: Use the Alt text field to point to that explanation.
Example: “Chart showing population changes. Full data is listed below.”
See Complex Images.
You can mark this as decorative
If the page text already covers it, you don’t need to repeat it in alt text.
In Webflow: Use Decorative for this image.
See Decorative Images.
Is it just for looks and vibes?
Background shapes, decorative photos, stock images used for mood, scenic or atmospheric shots, hero images that don’t add new information, patterns, gradients, texture overlays, icons used just for decoration, borders and frames… If removing it wouldn’t change what someone understands, it’s probably just for looks.
Great! Mark it as decorative
This tells screen readers to skip it.
In Webflow: Use Decorative for this image.
See Decorative Images.
This one’s a bit of a grey area
Not every image fits neatly into a box — and that’s okay. The full W3C guide has more examples.