How to add alt text to images in Webflow?

Alt text (alternative text) is a short description assigned to an image. It serves two purposes: screen readers use it to describe images to visually impaired users, and search engines use it to understand image content. Adding alt text is a straightforward accessibility and SEO improvement.

For static image elements

1. Select the Image element on the canvas.
2. Open the Settings panel on the right (gear icon).
3. Find the Alt text field under the image preview.
4. Enter a descriptive, concise description of the image.
5. Publish the site for changes to take effect.

You can also set alt text via the image settings modal by clicking the image thumbnail in the Settings panel.

For background images

Background images set through the Style panel do not have a dedicated alt text field in Webflow. If the image conveys meaningful content, consider using a standard Image element instead so you can provide alt text. Decorative background images do not need alt text.

For CMS images

CMS image fields support alt text at the Collection level.

1. Go to the CMS tab and open the Collection.
2. Edit the item containing the image.
3. Some setups use a separate Plain Text field for alt text, which is then referenced in the template. If your Collection has an alt text field, fill it in per item.
4. If there is no dedicated alt text field, you can add one by editing the Collection fields and creating a new Plain Text field named "Alt Text."

To output CMS alt text on the page, bind the Image element's alt attribute to the CMS alt text field in the template settings.

Writing good alt text

• Be specific and descriptive: "Golden retriever catching a frisbee in a park" rather than "dog."

• Keep it under 125 characters.

• Do not start with "image of" or "picture of" — screen readers already announce it as an image.

• If the image is purely decorative and adds no informational value, leave alt text empty or set the image to Decorative in Webflow's settings.

Checking for missing alt text

Use the Audit panel in Webflow (press A or find it in the top toolbar) to check for accessibility issues, including missing alt text. The panel lists every image that lacks an alt description so you can fix them before publishing.