Add alt text to your images to make your site more accessible and improve your SEO.
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:
Enroll in the entire accessibility course.
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.
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:
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.
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:
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:
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:
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.
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:
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:
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:
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).
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:
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!