Alternative text for photos

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

Alternative text for photos plays a vital role in the creation and advancement process of a website. Not only can you guarantee your website is made more reachable to individuals who are blind or have a visual disability, effective alternative text also assists in enriching your site’s search optimization.

In this tutorial, you will discover all about photo alternative text with the following:

  1. Decide when to use alt text
  2. Assign alt text to individual photos
  3. Assign alt text to CMS photos
  4. Assign alt text to photos in a Multi-photo CMS field

Register in the entire accessibility course. 

Decide when to use alt text

When you assign alt text to a picture (or multiple pictures) within your project, screen readers detect that alt text photo description. By assigning alt text to pictures, you enhance the accessibility of your site to people who are blind or have a visual disability. It is also beneficial to individuals with sensory processing or learning challenges.

Useful information: A screen reader is an assistive tool mainly utilized by individuals with vision impairments. It verbally conveys text, buttons, pictures, and other screen components, or presents them in braille. 

Additionally, alt text appears in the browser viewport if the picture fails to load properly, or even on browsers where someone has opted to disable images. 

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

By describing your picture content with alt text, you also position yourself for search optimization success. The more effectively you describe your pictures to all users, the more easily search engines can recognize and interpret that content. 

In most instances, the majority of pictures in your design will benefit from alt text because they convey significance to your site visitors (and search engines). Nevertheless, you might have a few pictures in your site that are more ornamental and do not convey any relevant significance, so alt text would be unneeded. 

Examples of decorative image icons are highlighted. 

Compose relevant alt text

Alt text should portray and communicate the meaning of a picture. Sometimes it is beneficial to approach it as if you are writing a caption for a news picture. For instance, you do not need to incorporate the terms “Picture of” or “Image of” prior to explaining the picture — unless the inclusion of those terms adds significance or meaning to what you are describing. 

When deciding when and how to write your alt text, your choice is always best served by critically evaluating your audience and their experience using your design. Pose the following questions to yourself:

  • What is the experience of navigating a page with a screen reader like? 
  • What alterations occur without the pictures? 
  • Would your user be deprived of significant content if you did not incorporate alt text?

Including these considerations during your design and development process not only promotes inclusivity, it streamlines your development process — from concept to launch.

Effective alt text samples

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

Assign alt text to individual photos

Typically, the most scalable and time-efficient method to add alt text to pictures is to assign the alt text on the photo asset itself in the Assets panel. Whenever you include an Image element containing an asset with alt text assigned to it, the Image element inherits the alt text you have already assigned to the asset. You can insert the Image element into your project as many times as desired, and each occurrence of that element will always draw from the alt text assigned to the asset utilized.

To assign alt text to an Image in the Assets panel:

  1. Launch the Assets panel
  2. Hover over the Image requiring alt text 
  3. Tap the “cog” icon to unveil the image’s Asset details modal
  4. Input your alt text into the empty field and close the Asset details modal upon completion
If you specify alternate text on an asset in the Asset panel, Image elements automatically retrieve alternate text from the asset they use.

You also have the option to specify alternate text on Image assets one by one. For instance, if you previously defined alternate text on an Image in the Assets panel, you can replace that alternate text with something different:

  • Select the Image element on the canvas whose alternate text you wish to adjust
  • Tap the “cog” icon to open the Image settings menu
  • Press the Alternate text dropdown and modify it to “Custom description” to set personalized alternate text, or choose “Decorative” to mark the image as decorative.

Keep in mind, the steps above will only affect the specific instance of the Image element you modified. If you add a new instance of the same image to your design, the alternate text will default to the alternate text you previously defined in the Assets panel.

Useful to note: You can access these same Image element alternate text settings from the Element settings panel on the right side of the Designer.

You can also insert alternate text to an Image in a Rich text element:

  • Select the Image in your Rich text element
  • Tap the “wrench” icon
  • Tap the Alternate text dropdown and select “Custom description” to define personalized alternate text, or “Decorative” to mark the image as decorative

Note: If your Rich text element fetches its text and images from a Rich text field in a CMS collection, you’ll need to modify your image alternate text in the Rich text field of the Collection item itself.

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

Specify alternate text on CMS images

Let’s consider a scenario with a series of blog posts, each having a meaningful hero image that enhances your overall blog post content. The hero image displays in each post via an Image field in your CMS collection. To set meaningful alternate text on each blog post’s hero image, you can introduce a new text field to your CMS collection specifically for adding alternate text:

  • Open the CMS panel
  • Hover over your Collection (e.g., “Blog posts”) and tap its “cog” icon to open its settings
  • Click “Add new field” and select Plain text
  • Assign a label (e.g., “Alt text for blog image”)
  • Select “Save field” and “Save collection” to save your updates to your Collection
A CMS collection’s “Include new field” button is emphasized.
A current text field for a CMS collection is displayed to illustrate how to append a field to contain alternative text and is tagged “Alt text for blog image.”

After successfully inserting the alternative text field into your Collection, make sure to craft meaningful alternative text for your blog visuals in each of your Collection elements:

  1. Access your Collection (for instance, “Blog posts”)
  2. Enter a Collection element (for example, one of your blog entries)
  3. Scroll to the newly added text field (like “Alt text for blog images”) and compose descriptive text that enriches your content
  4. Click Save
A new alternative text field for a CMS collection element is highlighted.

Repeat the aforementioned 4 processes for each Collection element containing an image requiring alternative text.

Once you’ve assigned alternative text to all images in your Collection elements, you can head back to the Designer and specify alternative text for the blog post’s primary images:

  1. Pick any Image element linked to the Collection you just modified
  2. Access the Element settings panel
  3. Tick the option “Retrieve alternative text from your Collection name” (like “Retrieve alternative text from Blog posts”)
  4. Choose the text field you just made (e.g., “Alt text for blog image”) to link the details from the new alternative text field to the Image’s alternate 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.

By connecting the new alternative text field for every blog post’s primary image, each picture has its individual, distinctive alternative text. Subsequently, if someone relies on a screen reader, it will read the alternative text for each image utilizing the information you entered in each of your Collection elements.

Pro hint: Swiftly navigate among Collection elements by pressing Shift + Option + left or right arrows (on Mac) or Shift + Alt + left or right arrows (on Windows).

Explore more about Collection elements and Collection fields.

Assign alternative text on images in a Multi-image CMS field

You may intend to incorporate multiple images displayed in an image grid, and include alternative text for each picture (as each image carries significant content).

To append alternative text to multiple images:

  1. Select your CMS item on the canvas
  2. Access the CMS panel and choose your Collection (like “Photoshoots”)
  3. Access a CMS item containing a multi-image field and hover over an image
  4. Click the 3 ellipsis and opt for “Edit alternative text”
  5. Insert your alternative text in the accessible 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 replicate this process for each image in your Multi-image field. Now, you have linked the alternative text to Image elements in your Collection.

Read more about the Multi-image field.

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

Resources: For further insights on image alternative text and screen readers, refer to How to Design Great Alt Text: An Introduction and Images must have alternate text from Deque University.

Related reading:

  • Enhance your site’s accessibility
  • Introduction to the Audit panel
Ewan Mak
Latest posts by Ewan Mak (see all)