Alternate Text

Working with images in Adobe Experience Manager (AEM)

When working with images in AEM, adding alternative text (alt text) is essential for both web accessibility and SEO. Here’s how you can manage alt text in AEM:

  1. Understanding Alt Text:

    • Alt text provides a textual description of an image.
    • It is crucial for users who are blind, visually impaired, or rely on assistive technologies.
    • Well-written alt text enhances inclusivity and ensures that content is accessible to all.

  2. Adding Alt Text in AEM:

    • Alt text is managed by the image component in use, not directly by the image itself.
    • To add alt text:
      • Add an Image component.
      • Insert an image into the component.
      • Add the alt text (Required)
      • Get alternative text from the DAM (When checked, populate the image's alt attribute with title in DAM.)
      • Add a caption (Optional)
      • Select Image is decorative when the only purpose of an image is to add visual decoration to the page, rather than to convey information that is important to understanding the page.
      • Now, the alt text will be displayed on the front end.
Image Component Asset
Image added to the Image Component
Image Component Metadata
Image Alternative text added to Metadata
Image component with Get alternative text from DAM selected
Image Alternative text added to Metadata with 'Get alternative text from DAM' selected. NOTE: if the Metadata 'Title' is not in the DAM no text will be visible within the Alternative text field.
Seattle Space Needle and Skyline
A close up view of the Seattle Space Needle with the Seattle skyline in the background

Additional information from the W3C Web Accessibility Initiative

Here’s a concise summary of the content from the W3C Web Accessibility Initiative (WAI) Images Tutorial:

  1. Purpose of Alt Text:

    • Images must have text alternatives (alt text) that describe their information or function.
    • Alt text ensures accessibility for people with disabilities.

  2. Types of Images and Their Alt Text:

    • Informative Images:
      • Graphical representations of concepts (e.g., photos, illustrations).
      • Alt text should convey essential information from the image.
    • Decorative Images:
      • Provide a null alt text (e.g., alt="") for purely decorative images.
    • Functional Images:
      • Alt text describes the functionality (e.g., printer icon for print function).
    • Images of Text:
      • Avoid text in images, but if used, alt text should match the image text.
    • Complex Images (Graphs, Diagrams):
      • Provide a complete text equivalent for data or detailed information.
    • Groups of Images:
      • One image’s alt text conveys information for the entire group.
    • Image Maps:
      • Alt text provides context for clickable areas within an image.

  3. Why It Matters:

    • Accessible images benefit users with visual impairments and cognitive disabilities.
    • They serve as cues and enhance overall user experience.

Remember, thoughtful alt text contributes to a more inclusive web.

Learn more about images:

  • Informative images: Images that graphically represent concepts and information, typically pictures, photos, and illustrations. The text alternative should be at least a short description conveying the essential information presented by the image.

  • Decorative images: Provide a null text alternative (alt="") when the only purpose of an image is to add visual decoration to the page, rather than to convey information that is important to understanding the page.

  • Functional images: The text alternative of an image used as a link or as a button should describe the functionality of the link or button rather than the visual image. Examples of such images are a printer icon to represent the print function or a button to submit a form.

  • Images of text: Readable text is sometimes presented within an image. If the image is not a logo, avoid text in images. However, if images of text are used, the text alternative should contain the same words as in the image.

  • Complex images such as graphs and diagrams: To convey data or detailed information, provide a complete text equivalent of the data or information provided in the image as the text alternative.

  • Groups of images: If multiple images convey a single piece of information, the text alternative for one image should convey the information for the entire group.

  • Image maps: The text alternative for an image that contains multiple clickable areas should provide an overall context for the set of links. Also, each individually clickable area should have alternative text that describes the purpose or destination of the link.