Automated Localized Image Alt Tags with AI Vision

MOMENTVM now supports automated generation and translation of image alt text using AI vision and machine translation. This feature eliminates manual work while ensuring your images are accessible and SEO-optimized across all locales.

Overview

When you upload an image to MOMENTVM, the system can automatically:

1. Analyze the image content using AI vision
2. Generate descriptive alt text based on a customizable prompt
3. Translate the alt text into all configured target languages
4. Insert the localized alt text into your templates using a simple custom tag

How It Works

1. AI Vision Analysis

Images uploaded to MOMENTVM are automatically sent to an AI vision system that analyzes the visual content based on your configured prompt. You can customize this prompt in the settings to control the style and focus of the generated descriptions.

For example, you can specify that descriptions should be:

• Concise and brief
• Optimized for specific directives
• Focused on particular aspects of the image

2. Automatic Translation

Once the AI generates the alt text description, it’s automatically translated into all languages specified in your MOMENTVM translation settings. This uses the same language configuration from your translation workflow.

3. Template Integration

In your templates, use the new imagealt custom tag to automatically insert the localized alt text:

<img src="dynamicimage::large:#(image.image_name)::" alt="#imagealt(image)" />

The tag takes one parameter - the image variable - and automatically inserts the appropriate localized text based on the current locale.

Configuration

Alt Text Generation Prompt

Navigate to Settings to configure the “Image Alt Text Generation Prompt”. This prompt guides the AI vision system in creating descriptions that match your content style and requirements.

Translation Languages

The alt text is automatically translated into all languages configured in your MOMENTVM translation settings. No additional configuration is needed.

Using the Feature

For New Images

When you upload a new image, the alt text generation and translation happens automatically. The process is:

1. Upload your image through the MOMENTVM interface
2. The system automatically triggers “Generate Alt Text Translations”
3. Within moments, all localized versions are ready

For Existing Images

For images uploaded before this feature was enabled, you’ll see a “Generate Alt Text Translations” button in the image editor. Click this button to retroactively generate and translate alt text.

You can also run bulk operations to process:

• All existing images
• A subset of images based on specific criteria

Viewing Translations

After generation, click “Check Translations” to open the translation editor. Here you can review and manually adjust the generated alt text for each locale if needed.

For example, you might see:

• English: “A smiling mother holds a joyful toddler”
• German: “Eine lächelnde Mutter hält ein fröhliches Kleinkind”

Template Implementation

The feature integrates seamlessly with MOMENTVM’s existing image system. In your template schema, define an image variable using the imageSearch widget:

{
  "type": "object",
  "properties": {
    "image": {
      "type": "object",
      "ui:widget": "imageSearch"
    }
  }
}

Then in your template HTML:

<img src="dynamicimage::large:#(image.image_name)::" alt="#imagealt(image)" />

The #imagealt() tag:

• Takes the image variable as its parameter
• Automatically retrieves the appropriate localized alt text
• Renders nothing if alt text hasn’t been generated
• Is optional - you can choose to place it only where needed

Benefits

Accessibility

Every image automatically receives descriptive alt text, improving accessibility for users with visual impairments.

SEO Optimization

Localized alt text in every language helps search engines understand your images and improves your site’s SEO across all markets.

Time Savings

Eliminate the manual work of writing and translating alt text for every image in every language.

Consistency

AI-generated descriptions follow your configured prompt guidelines, ensuring consistent tone and style across all images.

Flexibility

The template-based approach gives you complete control over where and when to include alt text in your markup.

Technical Details

When rendered, the alt text appears in the final HTML based on the current locale context. For example, when viewing a page in the German locale, inspecting the image element in browser developer tools would show:

<img src="..." alt="Eine lächelnde Mutter hält ein fröhliches Kleinkind" />

The localization happens automatically during template rendering - no additional code or logic is required in your templates.

Best Practices

1. Customize Your Prompt: Take time to configure the alt text generation prompt to match your brand voice and content requirements
2. Review Initial Results: When first implementing, review a few generated alt texts to ensure they meet your standards
3. Bulk Processing: If you have many existing images, consider running a bulk generation job rather than processing images individually
4. Template Placement: Remember that the #imagealt() tag is optional - use it where alt text adds value for accessibility and SEO

This feature combines AI vision analysis, machine translation, and MOMENTVM’s flexible templating system to deliver fully automated, localized image alt text across your entire content ecosystem.