All Collections
Working with Images
Alternative Text (ALT-Tag)
Alternative Text (ALT-Tag)

Why alt-text is important, and how to add it to your assets.

Alex Piepenbrink avatar
Written by Alex Piepenbrink
Updated over a week ago

Alternative Text is a word or phrase that can be inserted as an attribute in an HTML document to tell website viewers the nature or contents of an image. The alt text appears in a blank box that would normally contain the image.

Currently only Image elements can have alt-text. Images placed as background images are unable to have alt-text.

Why is Alternative-Text important?

  • ADA Compliance. Alt-text is read by screen readers in place of images allowing the content and function of the image to be accessible to those with visual or certain cognitive disabilities.

  • Fallback. Alt-text is what is displayed if the website fails to load an image or if the website visitor chooses not to load images.

  • SEO. Alt-text has a significant impact on SEO by providing a semantic meaning and description to images which can be read by search engines or be used to later determine the content of the image from page context alone.

Where do I add/edit Alternative Text?

You may add or edit alternative text in two places.
โ€‹

In the Media Library

When you select an asset in your Media Library, you'll see its metadata appear on the right-hand side of the drawer. Double-click on the "Alt text" field to type in your alternative text. Alt-text added here will affect all instances of the image on your site, as long as the image is in an image element.

In the Image Control Panel

If the asset is an image currently on your page, you can select it and open the Image Control panel. This will only work if the image is in an image element, not in a container element. Alt-text added here will only affect this one instance of the image.

At the bottom of the panel is a text field labeled "Alternative Text".

Did this answer your question?