Alt text for images

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

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

Alt text for images is a crucial step in the design and development process of a website. Not only can you ensure your website is made more accessible to people who are blind or have a visual impairment, good alt text also helps improve your site’s search optimization.

In this lesson, you’ll learn all about image alt text with the following:

  1. Choose when to use alt text
  2. Set alt text on individual images
  3. Set alt text on CMS images
  4. Set alt text on images in a Multi-image CMS field

Enroll in the entire accessibility course

Choose when to use alt text

When you set alt text on an image (or multiple images) within your project, screen readers pick up that alt text image description. By setting alt text on images, you make your site more accessible by people who are blind or have a visual impairment. It’s also helpful to people with sensory processing or learning disabilities.

Good to know: A screen reader is an assistive technology primarily used by people with vision impairments. It speaks aloud text, buttons, images and other screen elements, or displays them in braille. 

Alt text also shows up in the browser viewport if the image hasn’t loaded properly, or even on browsers where someone has chosen to turn off images. 

New York Times alt text is highlighted on images that show as broken upon webpage load.

When you describe your image content with alt text, you also set yourself up for search optimization success. The better you describe your images to all users, the better search engines can pick up and interpret that content as well.

In most cases, the majority of images in your design will benefit from alt text because they convey meaning to your site visitors (and search engines). However, you may have a few images in your site that are more decorative and don’t convey any relevant meaning, so alt text would be unnecessary. 

Examples of decorative image icons are highlighted. 

Write relevant alt text

Alt text should describe and convey the meaning of an image. Sometimes it’s helpful to think of it like you’re writing a caption for a news image. For example, you don’t need to include the words “Image of” or “Picture of” prior to describing the image — unless the addition of those words adds value or meaning to what you’re describing. 

When choosing when and how to write your alt text, your decision is always best served by critically thinking about your audience and their experience using your design. Ask yourself the following:

  • What is it like to navigate a page with a screen reader? 
  • What changes without the images? 
  • Would your user be missing out on relevant content if you didn’t include alt text?

Including these considerations during your design and development process is not only more inclusive, it make your build time more efficient — all the way from concept to launch.

Effective alt text examples

The alt text for an image from the New York Times reads, “A long exposure showing a string of SpaceX StarLink satellites over Florence, Kan., this month.”
The alt text for an image from Apple reads, “Front and back view of AirTag personalized with a smiley-face emoji.” 
The alt text for an image from Slack reads, “Icons for apps like Salesforce and Google Drive connecting to Slack.”

Set alt text on individual images

Usually the most scalable and time-saving way to add alt text to images is to set the alt text on the image asset itself in the Assets panel. Whenever you use an Image element containing an asset with alt text set on it, the Image element inherits the alt text you’ve already set on the asset. You can add the Image element to your project as many times as you’d like, and each instance of that element will always pull from the alt text set on the asset used.

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

  1. Open the Assets panel
  2. Hover over the Image that needs alt text 
  3. Click the “cog” icon to open the image’s Asset details modal
  4. Type your alt text into the blank field and close the Asset details modal when finished
An image’s “cog” icon that appears on hover is highlighted in the Webflow Assets panel. 
An image’s Asset details model is highlighted in the Webflow Assets panel. Descriptive alt text can be added in this modal. 
If you set alt text on an asset in the Asset panel, Image elements automatically pull in alt text from the asset they use.

You can also set alt text on Image assets one-by-one. For example, if you already have alt text set on an Image in the Assets panel, you can override that alt text to be something different: 

  1. Select the Image element on the canvas whose alt text you want to override
  2. Click the “cog” icon to access the Image settings
  3. Click the Alt text dropdown and change it to “Custom description” to set custom alt text, or choose “Decorative” to set the image to decorative 
An Image’s settings modal highlights the ability to choose to set a Custom description for an image’s alt text. 

Remember, the steps above only affect the one instance of the Image element you’ve updated. If you drag a new copy of that same image into your design, the alt text will default to the alt text you previously set in the Assets panel.

Good to know: You can access these same Image element alt text settings from the Element settings panel on the right hand side of the Designer.

You can also add alt text to an Image in a Rich text element:

  1. Select the Image in your Rich text element
  2. Click the “wrench” icon
  3. Click the Alt text dropdown and choose "Custom description" to set custom alt text, or "Decorative" to set the image to decorative
A Rich text element's image’s settings wrench icon is highlighted.
A Rich text element’s image settings is highlighted to show where Alt text can be added.
Note: If your Rich text element pulls its text and images from a Rich text field in a CMS collection, you'll need to update your image alt text in the Rich text field of the Collection item itself.

Read more about the Rich text element and the Rich text field.

Set alt text on CMS images

Let’s use an example of a series of blog posts, each of which has a meaningful hero image that adds context to your overall blog post content. The hero image pulls into each post via an Image field in your CMS collection. To set meaningful alt text on each of your blog post’s hero images you can add a new text field to your CMS collection that gives you a dedicated spot to add your alt text: 

  1. Open the CMS panel 
  2. Hover over your Collection (e.g., “Blog posts”) and click its “cog” icon to open its settings
  3. Click “Add new field” and choose Plain text 
  4. Give it a label (e.g., “Alt text for blog image”)
  5. Press “Save field” and “Save collection” to save your changes to your Collection
A CMS collection’s settings “cog” icon is shown on hover.
A CMS collection’s “Add new field” button is highlighted. 
A new text field for a CMS collection is shown to demonstrate how to add a field to contain alt text and is labeled “Alt text for blog image.” 

Now that you’ve added the alt text field to your Collection, be sure to write meaningful alt text for your blog images in each of your Collection items:

  1. Open your Collection (e.g., “Blog posts”)
  2. Click into a Collection item (e.g., one of your blog posts)
  3. Scroll down to your new text field (e.g., “Alt text for blog images”) and write descriptive text that adds meaning to your content
  4. Press Save 
A CMS collection item’s new alt text field is highlighted. 

Repeat the above 4 steps for each Collection item that contains an image needing alt text.

Once you’ve added alt text to all images in your Collection items, you can return to the Designer and set alt text for the blog post hero images:

  1. Select any Image element that’s linked to the Collection you just changed
  2. Open the Element settings panel
  3. Check “Get alt text from your Collection name” (e.g., “Get alt text from Blog posts”) 
  4. Select the text field you just created (e.g., “Alt text for blog image”) to bind the content from the new alt text field to the Image’s alt text itself 
A CMS image on the canvas has been selected and the ability to choose to pull in alt text from the CMS collection field is highlighted in the Settings panel. 

Because you connected the new alt text field for each blog post’s hero image, each image has its own, unique alt text. Now if someone uses a screen reader, it will read the alt text for each image using the information you included in each of your Collection items

Pro tip: Quickly swap between Collection items by pressing Shift + Option + left or right arrows (on Mac) or Shift + Alt + left or right arrows (on Windows).

Read more about Collection items and Collection fields.

Set alt text on images in a Multi-image CMS field

You might want to load up multiple images that appear in something like an image grid, and include alt text for each image (because each image contains meaningful content). 

To add alt text to multiple images:

  1. Select your CMS item on the canvas
  2. Open the CMS panel and select your Collection (e.g., “Photoshoots”)
  3. Open a CMS item that contains a multi-image field and hover over an image
  4. Click the 3 disclosure dots and choose “Edit alt text”
  5. Type your alt text in the available field
A Multi-image field in a CMS item highlights how to access the alt text settings from 3 disclosure dots that appear on hover.

Be sure to repeat this process for each image in your Multi-image field. You can now tie the alt text to Image elements in your Collection.

Read more about the Multi-image field

And there you are — go forth and describe all your meaningful images!

Resources: To learn more about image alt text and screen readers, check out How to Design Great Alt Text: An Introduction and Images must have alternate text from Deque University.

Related reading: 

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top