Include alt text on images

Add alt text to your images to make your site more accessible and improve your SEO.

Alt text (or alternative text) is a short written description of an image that is read or displayed in place of images, which helps site visitors understand that image’s content when it can’t be viewed — for example, when a site visitor navigates your site with a screen reader, or when image files fail to load.

Good alt text can also improve your site’s search engine optimization (SEO).

When to use alt text

You should write alt text for any images on your site that convey meaning to your site visitors (and search engines).

You can mark images as “decorative” if they don’t serve any specific purpose or add any information or context to any part of the webpage. For example, an “arrow” icon next to a link could be marked as decorative, since it serves a purely decorative purpose.

If you aren’t sure whether an image should be marked as decorative or include alt text, ask yourself whether a site visitor would miss important or relevant content if the image wasn’t there.

How to write alt text

Alt text should describe and convey the meaning of an image. Keep these guidelines for writing alt text in mind:

1. Keep your alt text specific and succinct. Explain what you see. Think about how you’d briefly describe the image over the phone.
2. Never start your alt text with “image of” or “picture of” — this is redundant. However, context is important, so explaining the type of image (e.g., illustration, chart, etc.) can be helpful at times.
3. Try writing alt text, then deleting the image. Does the alt text make sense without the image? If not, rework the alt text.

How to set alt text in Webflow

On individual images

Usually the most scalable and time-efficient way to add alt text to images is to set the alt text on the image asset itself in the Assets panel. Then, whenever you use the image on your site, it inherits the alt text you set in the Assets panel.

To set alt text on an image in the Assets panel:

1. Open the Assets panel (J)
2. Click the settings “cog” icon that appears when you hover over the image to which you want to add alt text
3. Write a description in the Descriptive field

To mark an image as decorative in the Assets panel:

1. Open the Assets panel (J)
2. Click the settings “cog” icon that appears when you hover over the image you want to set as decorative
3. Click Decorative

You can also set alt text on images one-by-one. For example, if you’ve set alt text on an image in the Assets panel but want to adjust the alt text for one instance of that image, you can override the alt text:

1. Select the image element on the canvas
2. Click the settings “cog” icon to access Image settings
3. Click the Alt text dropdown and change it to Custom description to set alt text, or choose Decorative to set the image to decorative

Remember these steps only affect the one instance of the image element. If you drag a new copy of the same image into your design, the alt text defaults to the alt text you previously set in the Assets panel.

On images in rich text elements

You can also add alt text to images inside rich text elements:

1. Select the image inside the rich text element
2. Click the “wrench” icon
3. Click the Alt text dropdown and choose Custom description to set alt text, or Decorative to set the image to decorative

On images in the CMS

You can also dynamically populate alt text for images in the CMS. Let’s say you have a series of blog posts, each of which has a meaningful hero image that adds context to the post content. The hero image dynamically populates via an image field in your Collection. To set meaningful alt text on each of your blog post’s hero images, you can add a dedicated text field to your Collection to include alt text:

1. Open the CMS panel
2. Hover over your Collection (e.g., “Blog posts”) and click the settings “cog” icon to open its settings
3. Click Add new field and choose Plain text
4. Give the text field a label (e.g., “Alt text for blog image”)
5. Click Save field
6. Click Save changes to save the changes to your Collection

Then, you can write meaningful alt text for the hero images in each of your blog post Collection items:

1. Open your Collection (e.g., “Blog posts”)
2. Click a Collection item
3. Scroll down to the new text field (e.g., “Alt text for blog images”) and write descriptive text that adds meaning to your content
4. Click Save
5. Repeat steps 2-4 for each Collection item that contains an image that needs alt text

Finally, once you’ve added alt text to images for each of your Collection items, you can go to the canvas and bind the image’s alt text to your new alt text field:

1. Select an image element that’s linked to your Collection (e.g., “Blog posts”)
2. Go to Element settings panel
3. Click the purple “dot” icon in the Alt text dropdown
4. Choose the text field you just created (e.g., “Alt text for blog image”)

Now, each image in your Collection has its own unique alt text.

WCAG Reference: Success Criterion 1.1.1: Non-text Content