Skip to content

Alt Text Generation #44

@jeffpaul

Description

@jeffpaul

Feature Overview & Value

Summary

This feature uses AI to automatically generate descriptive alt text for images uploaded to WordPress. It analyzes the image's visual content, and optionally considers the surrounding post context, to create accurate, meaningful descriptions. This helps authors improve website accessibility and SEO with minimal manual effort.

Why it matters

Alternative text (alt text) is essential for web accessibility, allowing screen readers to describe images to visually impaired users. It is also a key factor in search engine optimization (SEO), helping search engines understand image content. Writing good alt text is a skill that authors could lack and it can be a tedious task. This feature automates the process, ensuring compliance with accessibility standards (like WCAG) and improving SEO performance.

Sample Use Cases

  • A busy blogger uploads several photos for a travel post. The plugin automatically generates descriptive alt text for each one (e.g., "A panoramic view of the Eiffel Tower at sunset"), saving them time.
  • A content team is auditing an old site for accessibility compliance. They use a bulk-action feature (future extension) or manually trigger generation for existing images that are missing alt text.
  • A news organization needs to publish articles quickly. The feature provides immediate, context-aware alt text for images, ensuring their content is accessible from the moment it goes live.
  • An e-commerce manager wants to improve product page SEO. The AI generates descriptive alt text that can be tweaked to include relevant keywords (e.g., "A person wearing the red 'Trailblazer' waterproof jacket in the rain").

Context & Intent Handling

Why this matters: Not all alt text serves the same purpose. A description for a technical diagram should be precise and informative, while alt text for a decorative image might be minimal. The user's goal—whether for pure accessibility, SEO, or a blend—should influence the generated text.

How Descriptive Intent is Set

  • Global user preference (primary mechanism)
    • Set once in plugin settings.
    • Descriptive Intent options might include:
      • Basic Alt Text (for Accessibility)
      • SEO Optimized Alt Text
      • Product-Focused Alt Text
      • Brief Description Alt Text
    • This choice governs the default prompt strategy for all newly uploaded images.
  • Per-image override (secondary), perhaps as a future enhancement
    • Available in the image block settings (inspector panel) or Media Library.
    • Lets a user change the descriptive intent for a single image without altering the global default.

Prompt construction

  • Prompt templates are modified based on the selected intent and available context.
  • Example (Accessibility): “Describe this image for a visually impaired user. Be objective and concise.”
  • Example (SEO): “Describe this image for SEO. Incorporate the context of an article titled '[Post Title]'.”

User Interaction Flow

Overview: The goal is to integrate alt text generation seamlessly into the existing WordPress media workflow. The primary interaction happens automatically upon upload, with clear, easy-to-use controls for review and editing. The process should feel native, transparent, and completely optional.

Primary Flow: On-Upload Generation

  • User Action: User uploads a new image via the Media Library or directly into a post/page.
  • System Behavior:
    • The image is uploaded to WordPress as usual.
    • In the background, the plugin sends the image to the AI for analysis.
    • The AI-generated description automatically populates the image's "Alt Text" field.
    • A small, unobtrusive icon (e.g., a sparkle or AI symbol) appears next to the field to indicate the text was AI-generated.
  • User Review & Editing:
    • The user can immediately edit the generated text in the alt text field.
    • Clicking the icon or a "Regenerate" button next to the field presents a new option in the same field location.

Alternate Entry Point: Generating for Existing Images

This flow supports users who want to add alt text to images already present in the Media Library or in existing content.

Trigger Condition

  • An image block is selected in the editor.
  • The "Alt Text" field in the block's settings panel is empty.

System Behavior

  • A "Generate Alt Text" button or link appears directly below the empty alt text field.

User Action

  • User clicks the "Generate" button.
  • Clicking the icon or a "Regenerate" button next to the field presents a new option in the same field location.

Technical Requirements (High-Level)

  • AI Input Requirements:
    • The image file itself (binary data or a publicly accessible URL).
    • Contextual data (optional but preferred): Post title, surrounding post content, image caption, and filename.
    • Descriptive intent (from user settings).
  • AI Output Requirements:
    • A single descriptive string.
    • Recommended length under 125 characters (for accessibility best practices). The length could be adjustable via a filter.
    • Clean text, no markdown or special formatting.
  • Model Agnosticism:
    • Must support multimodal (vision) models via the WP Client AI SDK package (e.g., GPT-4 Vision, Claude 3, Google Gemini).
    • Prompt construction should be modular to accommodate different model requirements (noting that some integrations, eg. Azure Computer Vision, does not leverage a prompt so much as a specific API call with the AI input requirements or a subset of them).
  • Fail States & UX Expectations:
    • Generation failures must not break the media upload process.
    • If the AI call fails, the alt text field should remain empty.
    • A subtle, retry-able error message should appear in the UI (e.g., "Generation failed. Try again?").
  • Privacy & Config:
    • API keys are managed by the core WP AI Client SDK package.
    • A clear user consent/option is required before sending images to a third-party API, probably in the settings and not exposed on every image upload.

Extensibility Notes

  • Hookable prompt pipeline: Allow developers to modify the prompt before it's sent to the AI.
  • Bulk Generation: Design with a future "Bulk Generate" action in the Media Library list view in mind as well as a WP-CLI command.
  • Content Filtering: Provide hooks to filter or modify the AI-generated text before it is saved (e.g., to add branding or remove forbidden words).

Open Questions / Design Notes

  • Should automatic generation on upload be an opt-in or opt-out feature? (Defaulting to "on" provides more immediate value, but "off" is safer. This will be handled on a settings screen for the WP AI plugin. Features can be enabled or disabled on that view.).
  • How do we best communicate that text is AI-generated without cluttering the UI? An icon? A tooltip? (For images: At the end of the caption, we have a note "this image is generated by AI".)
  • How should we handle decorative images? Should the AI attempt to identify them and suggest leaving the alt text blank (alt="")? (Perhaps we put this in the prompt. If you believe this is a decorative image (icon) respond with no/blank alt text.)
  • Does generated alt text replace alt text in all locations? (Alt text is stored globally in the Media Library but can be customized for individual posts. The interface should clearly show when a user is editing alt text for a single use versus updating it sitewide. If no alt text exists yet, newly generated text should be saved globally by default.)
    • Can alt text be different in different uses of the same image? (WordPress shows usage counts for categories/tags and possibly images, but image linkage is inconsistent and may only appear if the image was uploaded directly to a post/page.)

Design mockups

Version 1 - Alt Text Generation

Image

Version 2 - Generate for Multiple and Individual Photos

Image

Props to Lauren Woodmansee for the product definition, Rachael Cortellessa for the designs, and Darin Kotter for technical review of both.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Needs Design FeedbackTo get input as to whether needs design or feedback on existing work[Type] EnhancementNew feature or request

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions