Add alt text to images

This article covers how to add alt text to individual images in Composer, including writing it manually or generating it with AI in Resources and the Content element.

In this article

• Alt text options by location
• Images in Resources
  • Add alt text manually
  • Generate alt text when uploading an image
  • Generate alt text for an existing image
  • Regenerate alt text when replacing an image
• Images in a Content element
  • Add alt text manually
  • Generate alt text with AI
• Constituent profile images in File Manager
• Navigation dropdown images
• Decorative images
• Site-wide alt text and compliance
• Need additional help?

Alt text options by location

Where an image lives determines where its alt text is added and how far that alt text reaches.

Images in Resources

Alt text added in Resources follows the image everywhere it's used on the site, so it only has to be written once.

Add alt text manually

While uploading media into Resources, open the quick actions panel to add alt text to images efficiently.

• Step 1: Go to the Resources module and click the image to open the Quick Actions Panel.
• Step 2: Type the description in the Alt Text field.
• Step 3: Save the changes.

Generate alt text when uploading an image

• Step 1: Go to the Resources module.
• Step 2: Upload a new image.
• Step 3: Review the alt text.
  • In the Edit Resource Details window, the alt text generated for the image appears automatically. Review the auto-generated description and edit if needed.
• Step 4: Save the changes.

Generate alt text for an existing image

• Step 1: Go to the Resources module.
• Step 2: Locate an image without alt text.
  • Use the Not Alt Text filter in the All Resources view to find images without alt text.
• Step 3: Navigate to the Alt Text field.
  • In the Resources Quick Panel, scroll down to the Alt Text field.
• Step 4: Click Generate Alt Text.
• Step 5: Review, edit, and/or regenerate the alt text.
  • Review the auto-generated description and edit if needed.
  • Click Regenerate Alt Text to generate a new description.

Regenerate alt text when replacing an image

Alt text regeneration is supported when using the Replace resources feature.

• Step 1: Go to the Resources module.
• Step 2: Select the resource to replace.
• Step 3: Click the icon to replace the resource.
  • Within the Resources Quick Panel, click the Replace Resource icon to select a new image.
• Step 4: Generate new alt text.
  • Select the Update alt text with AI checkbox in the Replace Successful window to generate new alt text.

Images in a Content element

Alt text added in the Content element applies to that specific instance of the image on the page. To set alt text that follows an image everywhere it's used, add it in Resources instead.

Add alt text manually

• Step 1: Open the image settings. For a new image, click the Insert Image icon. For an existing image, right-click the image and select Image Properties.

• Step 2: In the Image Properties settings, find the Alternative text field and enter the image description.

• Step 3: Save the settings, save the Content element, and publish the page.

Generate alt text with AI

The AI Alt Text Generator is available when inserting an image directly from the Content element, so descriptive, accessible alt text can be generated without leaving the editing workflow.

• Step 1: Open the page and edit the Content element.
• Step 2: Click the Insert Image icon and select the image.
• Step 3: In the alt text field, click Generate Alt Text.
• Step 4: Review, edit, and/or regenerate the alt text.
  • Review the AI-generated description and edit if needed.
  • Click Regenerate Alt Text to generate a new description.
• Step 5: Save the settings, save the Content element, and publish the page.

Constituent profile images in File Manager

For images stored in the File Manager and used in constituent profiles (such as staff directories or student lists), the system automatically handles accessibility to ensure every individual is identified correctly. There is nothing to write manually and nothing to generate with AI.

• Automatic naming: The alt text is automatically populated with the constituent's full name (e.g., alt="Jane Doe").
• Independent of display settings: This happens regardless of whether the "Show Full Name" setting is turned on or off in the element settings. Even if the name isn't visible on the screen, it will be "visible" to a screen reader.
• Filename vs. alt text: The system uses the profile data, not the filename, for the alt text. For example, a file named Doe_JaneWEB.jpg will correctly render as alt="Jane Doe" for a screen reader, ensuring the formal name is read rather than a technical filename.

Navigation dropdown images

Alt text for navigation dropdown images is added manually in Page Settings > Nav Info.

• Step 1: On the given landing page, click the Page Settings gear icon.

• Step 2: Click the Nav Info tab and find the Thumbnail Alt text field. This field only appears after a Page Thumbnail has been added.

• Step 3: Enter the alt text, then save and publish the page.

Decorative images

Mark an image as decorative if it is purely for visual flair and does not add meaningful information to the page (like a background pattern or a divider). This tells screen readers to skip the image, so no alt text is required.

To mark an image as decorative, check the Decorative image box.

Site-wide alt text and compliance

To find every image missing alt text, generate alt text in bulk with AI, or require alt text before images display, see the article, "Manage alt text site-wide: Find, generate, and require alt text." That article also covers the current ADA Title II compliance deadlines.

Need additional help?

For additional guidance on writing alt text, refer to the WebAIM Alt Text Guide.