Include alt text for every important image
Alt text describes images to visitors who are unable to see them. This includes screen readers and browsers that block images, but it also includes users who are sight-impaired or otherwise unable to visually identify an image.
Decorative images
Images that are not necessary for comprehending or engaging with the content are considered decorative. Decorative images should be marked as decorative or screen readers will guess a description, usually speaking aloud a sometimes cumbersome filename like “hero-image_293_version_953”.
See W3’s alt text decision tree to help determine whether an image is decorative.
Check for missing alt text
Webflow’s Audit panel will highlight all images that have no alt text.
Learn how to add alt text in Webflow in the Webflow University lesson on alt attributes.
How to write good alt text
Writing good alt text is an art! Making sure every image is either set as decorative or has alt text is the baseline, but there are also some nuanced considerations when writing effective, contextual alt text:
- Include alt text for every important image you upload, including logos
- Avoid repeating surrounding text: if the appropriate alt text for an image is already included in surrounding text, mark the image as decorative
- Leave out the words "image", "picture", or “logo” — screen readers already say this
- Keep it concise — 150 characters is a good starting point
- For complex images, briefly describe in the alt text, and also include a more complete text description either on the page or linked elsewhere.
- The alt text for actionable images, like image links, buttons, or image map areas, should clearly identify the link destination or button purpose
- Context matters: write a concise description that calls out important visual features that made the image important to include.
Examples: how context changes alt text
Depending on the context that the image is presented in, there are many different options for good alt text.
Example 1:
- Surrounding text: Safety at night is a concern for both library staff and patrons. A well-lit walkway can be an attractive feature drawing patrons in throughout the evening.
- Alt text: A modern glass, steel, brick and wood library building with artificial light shining from 1.5 story windows and from spot lights placed in a wooden architectural soffit. The sidewalk is well lit.
Example 2:
- Surrounding text: XYZ Library obtained Silver LEED certification in 2011. The library features energy efficient windows and shades. The airlock at the main entrance is also a feature which is helpful in the Boston climate year round.
- Alt text: A modern glass, steel, brick and wood library building with a double door airlock connected to a room with desks and shelving visible from outside. This room has floor to ceiling 1.5 story windows with long shades.
Examples from http://www.ala.org/support/context-important-alt-text
Example: alt text for links and buttons
On our blog, our logo is in a link block that takes users back to Webflow home, so the appropriate alt text for the logo image is “home”
Useful resources:
WCAG reference:
Total progress
