Automatic alt text generation

Automatic alt text generation helps ensure that images you publish go live with text descriptions that can be read by screen readers. Alt text can be generated in multiple languages for use across multiple locales and can be configured to adhere to your brand rules.

Generating alt text automatically for images helps:

• Improve accessibility of your Web content by enabling screen-reader users to comprehend images
• Enhance your SEO by including descriptive text with images
• Adhere to accessibility laws such as "The European Accessibility Act" in the European Union and the "Websites and Software Applications Accessibility Act" in the US

Automatic alt text generation and Amplience credits

Image alt text generation requires Amplience credits for generating alt text at a rate of 2 credits per image, per locale. More about Amplience credits.

Setting up automatic alt text

To start generating alt text automatically, you'll need to reach out to Amplience Support, who will configure the service for your chosen asset stores. You'll need to provide the default locale to use for image descriptions, and any additional locales you would like to use.

Tune image alt text generation

If you're already using Content Studio and have set up brand rules, such as words to substitute, these can be included when configuring the service.

Generating alt text automatically

Once set up, alt text will be automatically generated when you use any of the following upload methods:

• The GraphQL Asset Management API
• Automated bulk upload
• Manual upload using Content Hub
• Manual upload using the Asset Tab in Dynamic Content

Alt text will also be generated when you edit images with Image Studio through Dynamic Content. See Editing images as part of your workflow.

For help with generating alt text for previously uploaded images, please contact your Amplience account director for more information.

When alt text is generated for sets, descriptions are generated for each individual image in the set. More about sets.

Assets, locales and images

The locales that are used for setting up automatic alt text generation are independent from the Content Hub asset locales used to retrieve and group assets. See Content Hub asset locales.

Viewing generated image alt text

You can view generated image alt text using the Content Hub properties pane. The text for the default locale is shown in its own field and also in the list of any additional locales that have been set up for generation.

To view generated alt text from Dynamic Content, click "ALT" on the media card. Note, you can only view automatically generated alt text using the Next Generation Authoring experience. See Applying image alt text in the authoring experience.

If alt text has been generated for more than one locale, you can select which localized version of alt text you want to use in your content item.

Updating generated image alt text

You can update generated alt text using different methods.

Updating from Content Hub

From Content Hub, you update generated alt text using the Properties pane. The alt text shown in the Properties pane is part of the image metadata, and is the definitive source for image alt text. This AI-generated alt text is intended to describe what is represented in the image, but you may want to adapt this description, based on the context in which the image is used.

Note, updating the "Alt Text (default)" locale doesn't automatically update the variant from which it was derived. In the example above, the default locale text has been updated to be different from the en-GB variant text from which it was derived.

Updating from Dynamic Content

When you're creating content with Dynamic Content, you may want to adjust image alt text to fit the context of the content for your audience. For instance, you may want to modify the generated alt text slightly to indicate why an image is relevant, by highlighting a particular product shown in the image that is also referenced in the surrounding page text.

Image alt text applied using Dynamic Content is specific to the content, does not override the metadata saved in Content Hub.

Here's an example, where the generated alt text is generic, and not highlighting the product featured in our example content:

Using Dynamic Content, we can quickly update the image alt text to be more specific about the product.

Fetching image alt text

You can retrieve alt text that's stored in image metadata, along with any locale variants, using the Media Delivery API.

You can also use manifests to retrieve alt text

Image alt text metadata can be retrieved using manifests, as part of your regular asset export schedule. See Manifests

Use the Media Delivery API to retrieve image alt text for published images from image metadata.

For example, to fetch the metadata for an image with the name woman-in-dress use:

https://cdn.media.amplience.net/i/ampproduct/woman-in-dress.json?metadata=true

For this example, the API returns the following alt text descriptions:

{
  "isImage": true,
  "alpha": false,
  "width": 2048,
  "height": 2048,
  "format": "JPEG",
  "metadata": {
    "alt-text": {
      "descriptions": {
        "it-IT": "Modella con abito azzurro, borsa blu, occhiali da sole e cappello. Indossa scarpe sportive.",
        "de-DE": "Frau in blauem Kleid mit blauer Tasche und weißen Sneakers vor türkisfarbener Wand.",
        "en-US": "Woman wearing a blue sleeveless dress, white sneakers, and holding a blue handbag.",
        "fr-FR": "Femme en robe bleue sans manches, portant un sac à main bleu et des baskets blanches."
      },
      "defaultDescription": "Woman wearing a blue sleeveless dress, white sneakers, and holding a blue handbag."
    }
  },
  "status": "ok"
}

Using alt text with the <img> tag

When you display images on your site with HTML, you use the <img> tag, adding alt text as an attribute to provide a description that screen readers can use, or in case the image doesn't load for some reason.

The <img> tag has two attributes:

• src to specify the path to the image
• alt to specify alternate text that's descriptive enough to give the reader a sense of what the image is about

Here's an example showing alt text with an <img> tag:

<img src="https://cdn.media.amplience.net/i/ampproduct/woman_summer_outfit" alt="A woman dressed in a black outfit, accessorized with a straw hat and bag, radiating elegance and charm."></img>

And here's the rendered image for the above example. Hovering your cursor over the image will display the alt text.

If an image has multiple alt text descriptions for different locales, include the text for your chosen locale in the alt attribute. For example:

<img src="https://cdn.media.amplience.net/i/ampproduct/woman_summer_outfit" alt="Une femme vêtue d'une tenue noire, accessoirisée d'un chapeau et d'un sac de paille, rayonnant d'élégance et de charme."></img>

Version history and image alt text

Changes made to image alt text are not recorded in the image version history. Although image alt text is displayed in the Properties pane in Content Hub, it is added to image metadata and as a result cannot be restored from a previous version. More about restoring previous versions of assets.

Using Amplience credits

When you manually upload images to Amplience, we first check your Amplience credit balance to ensure you have enough credits before generating alt text.

If you run out of credits while generating alt text during a bulk upload, alt text will continue to be created until all credits are used up.

Your organization administrator can check your credits balance and usage from the Account Management- Usage tab.

Credit usage and pricing may vary according to the plan agreed when the service is provisioned.

Related pages

Content Studio Alt text template

Amplience credits