Automatic alt text

This content field extension enables you to seamlessly retrieve and use automatically generated alt text for images in Content Hub, as part of your authoring workflow in Dynamic Content.

With the help of this extension, you can be sure that your content has alt text that makes them accessible for users who rely on screen readers, without the need to manually enter alt text for every image and locale.

For developers, having localized image alt text descriptions stored with the content simplifies the API calls that need to be made to get the image alt text.

In addition to automatically including existing image alt text into your content, this extension lets you modify alt text to better match your content, saving the changes as part of the content. See Refreshing and modifying alt text.

Before using this extension...

• This extension retrieves image alt text generated by the Automatic Alt Text service, so you need to ensure the service is enabled for your account.
• Your Dynamic Content Hub must have the Assets Tab enabled, to ensure API access to alt text meta data for images.

Using the Automatic alt text extension

To use the Automatic alt text extension, simply associate it with an image field and a string field (that represents the alt text) in your content type schema. You can use this extension with both standard and localized text string fields.

The extension can be used with any native Amplience image field, including if that field is in an extension.

Setting up this extension

You can find complete configuration documentation for this extension on GitHub.

Alt text for standard text fields

When the Automatic alt text extension is used with a standard text field, the Dynamic Content authoring experience will show one alt text field and a number of locale options, like the example below:

The alt text that will be used with the image is displayed in the "Alt text" field. You can view or select other alt text from the available locale options displayed below the text field.

If you modify alt text values, the updates will be saved with the content, without updating the alt text in Content Hub. To reset changed alt text values back to those stored in Content Hub, select the required locale and click the globe icon.

Alt text for localized text fields

When the extension is used with a localized text field, the Dynamic Content authoring experience displays each alt text locale in a list that you can expand or collapse.

To reset the alt text values back to those stored in Content Hub you can:

• Reset all of the alt text values at once by clicking "Refresh alt texts". This will reset/clear all of the alt text values shown on your form.
• Reset individual alt text values by refreshing them individually

Clearing all alt text values

Quickly clear all image alt text values for all localized fields by using the Clear all feature.

Note that filtering locales in your content form will not filter the localized alt text fields displayed in the form. This is demonstrated in the image above where the locale filters (top right) show that 2 locales are selected, but the extension still shows the locales for which it has been configured.

Refreshing and modifying alt text

To overwrite alt text shown in the authoring experience with image alt text stored in Content Hub, you use 'Refresh alt texts'.

Instances when you may want to refresh alt text values in your content are:

• To reset image alt text values you've modified while authoring content, back to what’s saved in Content Hub.
• If you retrieve image alt text after swapping an image for a different image.
• If the extension is configured not to automatically retrieve image alt text from Content Hub, you will need to use 'refresh' to initially load image alt text from Content Hub. When you save content that has alt text, the alt text will be loaded when you next open the content.

note

• Any alt text updates that you make in the Dynamic Content authoring experience are made in your content only, and are not saved back to Content Hub.
• If you edit an image in Image Studio and save it, it creates a new image and the appropriate alt text will apply

Schema examples

To help you get started with using the Automatic alt text extension we've created some schema examples.

There are two schema examples included: one for content that has a single alt text field, and another for content that has localized fields. Both examples include the extension directly in the schema. In most cases you will want to register the extension so that you do not have to specify the installation parameters each time you use it in a schema. For the extension registration details, see Automatic alt text extension GitHub repository

Note that to use these examples the extension must be linked to an image property, image, that contains a JSON pointer or relative JSON pointer reference to the alt text field for which text will be retrieved.

To use the schemas you will need to set the "Read access" API permissions.

Schema example for a single alt text field

An example schema with a link to the extension using its URL, is shown below. The alt string property contains a reference to the localized alt text for the image.

{
    "$schema": "http://json-schema.org/draft-07/schema#",
    "$id": "https://schema-examples.com/automatic-alt-text-extension",
    "title": "Automatic alt text extension",
    "description": "Demonstrates the use of the automatic alt text extension with a single alt text field",
    "$comment": "Docs: https://amplience.com/developers/docs/ai-services/automatic-alt-text/",
    "allOf": [
        {
            "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
        }
    ],
    "type": "object",
    "properties": {
        "image": {
            "title": "Hero Image",
            "allOf": [
                {
                    "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link"
                }
            ],
            "ui:component": {
                "params": {
                    "withAltText": false
                }
            }
        },
        "alt": {
            "title": "Alt Text",
            "type": "string",
            "minLength": 0,
            "maxLength": 200,
            "ui:extension": {
                "url": "https://automatic-alt-text.extensions.content.amplience.net/",
                "params": {
                    "image": "/image"
                }
            }
        }
    },
    "propertyOrder": []
}

Schema example with a localized alt text field

An example schema with a link to the extension using its URL, is shown below. The alt string property contains a reference to the localized alt text for the image.

{
    "$schema": "http://json-schema.org/draft-07/schema#",
    "$id": "https://schema-examples.com/localized-automatic-alt-text-extension",
    "title": "Localized automatic alt text extension",
    "description": "Demonstrates how to use the automatic alt text extension with a localized alt text field",
    "$comment": "Docs: https://amplience.com/developers/docs/ai-services/automatic-alt-text/ ",
    "allOf": [
        {
            "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
        }
    ],
    "type": "object",
    "properties": {
        "image": {
            "title": "Hero Image",
            "allOf": [
                {
                    "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link"
                }
            ],
            "ui:component": {
                "params": {
                    "withAltText": false
                }
            }
        },
        "alt": {
            "title": "Alt text",
            "allOf": [
                {
                    "$ref": "http://bigcontent.io/cms/schema/v1/localization#/definitions/localized-string"
                }
            ],
            "ui:extension": {
                "url": "https://automatic-alt-text.extensions.content.amplience.net/",
                "params": {
                    "image": "/image"
                }
            }
        }
    },
    "propertyOrder": []
}

Related pages

Extensions overview

Registering extensions

Schema examples

Automatic alt text extension GitHub repository

Automatic alt text generation service

Working with image alt text