Alt text for images

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. 

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. 

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

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

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 

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

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

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 
   

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 
   

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
   

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: 

• Make your site more accessible
• Intro to the Audit panel