April 14, 2024

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:

Decide when to use alt text
Assign alt text to individual photos
Assign alt text to CMS photos
Assign alt text to photos in a Multi-photo CMS field

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

64b9485a44401f5fd8121744_60a56ff33bd67356e0bd3c0e_1b4wsceocyvjrzytlj9nnsnis_sxxgklzltuuiwtivmrfdnprvrp-crr_jjif2v_sg7n-aajqsjnhkmzaxkcxlxjwmrrutnpmvy3dkwcwgr9ngrnypjdkht6dhwuzktojoauhpl5 — 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.”

64b9485a44401f5fd8121732_60a56ff3cf90830e9f548f42_5utvf9rrcxmkass1go6mtk7jsw7b5oaujoqpvi8wak6p-vf8oeloxpakqrh6ike_mttbwvvanak5qfba22pqtdfk56fto08g9lc8gn43ir5q9twuziiuzgy7zh4e6yvd8u-vd0_p — The alt text for a picture from Apple mentions, “Front and back view of AirTag personalized with a smiley-face emoji.”

64b9485a44401f5fd812172a_60a56ff3faba4527934ced27_sufbgpwklx9uevbyg5468hoj2gttpercnlsr6k8u_7bg35fkj4ombiftwqtwmjdjhx5yqbupk5rf7rmhv_htdgeidilqo2fyngbzzbfy4hlpcnwyqsuxxudqlhhh1tub0xjtjain — 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:

Launch the Assets panel
Hover over the Image requiring alt text
Tap the “cog” icon to unveil the image’s Asset details modal
Input your alt text into the empty field and close the Asset details modal upon completion

64b9485a44401f5fd812174e_60a56ff34aad2c4409cc44cb_87-wq4vwjnf4xpddhpbpt40eje4lnb0yahcfsoor1hnsnonxn1yqusw6r840oi6vbjlj3ooay4bkgcfduvla9dt2u-ft_1hheywcq04hcym-mdkammgm1d4zgpo0lvtns9dyl28c

64b9485a44401f5fd8121735_60a56ff34aad2c9c9ecc44bb_dnay43f2g8xpxoh8vgc5pnuznwfncdsuxgcqb2lj72ncrkooqmoextrxd5iz_yynduq8b4bhoo8bltyvhvbnsttzdiki2yclftq-p8ob8do8xu_prlpsphj3a7bmlgqfptf9zhzv

64b9485a44401f5fd8121741_60a56ff426a7dfafa4a00212_o-tvs4dnzdd2eg3sfl8krlvimexaaed-i7zc0rqkqqryxf_9bokcz_j-ehppki9uagtgps2-wpqwaihsuncelfi9zitqzdkjpxf9rexqu_udhzuz0kmcmctgtiz7hyqdj0w7iuty

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.

64b9485a44401f5fd812174a_60a56ff33279443b5e29597f_o4y5ir4jnmsq7p5q_cddp4gblrqob6fquhd4ovhhql-yu4a6vklbvr_4pp8qf7smgkdkyu7t9de_g6zpa5pbpea3q9tebvm0sesp9oc_9eedgoj9_r7xjtdkzikognr-fdca8cxl

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

64b9485a44401f5fd8121738_60a56ff4b0aaf28fa19f8c4a_kt1nkvf8val5gddl9ihwr9ru6rrabgoube8djmfdbih9nd2i0n5wyyie8sg6pfzzsdgtrkpd2nnr3xl_d9uagv6ya0kcvveobfvusx5f_dnjwzajibnav-hn2-y056we00cnujux

64b9485a44401f5fd8121747_60a56ff4d17dde4dc91c6a4b_gf9v_yxjn5h6zjwjd-bjvkgy7xfm1qg_6hiyp9yq5pnvswcr__lrsm35qaoeakyujyivhvvrgxogwvdbkrbpum5ljbrakofbktlbkscmrkt1bdhrj9ixfvmtc6g73w_iirct1xrb

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

64b9485a44401f5fd8121727_60a56ff4faba45bb904ced57_shvuxvnm0ztbr85qdvmr01ywjn1qqgdovql83diwzjqoa-qrwlahuujt4s8ahr6klxhn9f6n6dt3mk7a96-yw0qm0otefy82tq4-xhgz6nnpucjeqmsyiv1xwehtgzmlfkdqc3od

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:

Access your Collection (for instance, “Blog posts”)
Enter a Collection element (for example, one of your blog entries)
Scroll to the newly added text field (like “Alt text for blog images”) and compose descriptive text that enriches your content
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:

Pick any Image element linked to the Collection you just modified
Access the Element settings panel
Tick the option “Retrieve alternative text from your Collection name” (like “Retrieve alternative text from Blog posts”)
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:

Select your CMS item on the canvas
Access the CMS panel and choose your Collection (like “Photoshoots”)
Access a CMS item containing a multi-image field and hover over an image
Click the 3 ellipsis and opt for “Edit alternative text”
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.