Development Choices

Alt Text Generation in a Media Automation Flow

Author
Joseph Trasatti Member of technical staff
Published
Section
No-Code
Length
4 min read3 sources cited

Generating alt text inside a media automation flow means the description is derived from the image and written back into the asset's metadata, so it travels with the asset. A working setup classifies decorative images out first, routes ambiguous assets to human review, and treats the accessibility conformance test as the pass condition.

Before you start

You need a Cloudinary product environment with assets already in it, and access to MediaFlows, the visual automation product that ships prebuilt PowerFlows including multilingual alt text and moderation. The sample PowerFlow catalogue is the starting point — copy a flow rather than building the graph from an empty canvas.

You also need one decision made before any of it: which assets in this environment are decorative. That is an editorial call, not a technical one, and the flow cannot make it for you. Work it out against the W3C alt decision tree, which walks image-by-image through whether an image conveys information, is purely decorative, or is doing something else entirely. If you have no way to distinguish a decorative asset from a meaningful one — no tag, no folder, no metadata field — stop and add one first. Everything below depends on it.

Steps

  1. Add a metadata field to hold the alt text. Generate the description from the image and write it back into the asset’s structured metadata, not into a page template. The reason is that the same asset appears in a product listing, an email, a partner feed and a mobile app, and a description that lives in one template covers exactly one of those. Written to the asset, it travels with it. This is also what makes the whole thing re-runnable: the field is either populated or it isn’t, so a second pass over the library only touches what it missed.

  2. Filter decorative assets out before generation, not after. An empty alt="" attribute is the correct markup for a decorative image — it tells a screen reader to skip the element entirely, which is what a reader wants for a spacer, a background texture or an icon that sits beside a text label already saying the same word. A flow that describes every asset unconditionally produces “blue gradient rectangle” announcements between every paragraph, which is worse screen-reader output than the flow replaced. Put the decorative check first in the flow so those assets are branched out before the generation step ever sees them, and leave their alt field empty rather than writing a placeholder string into it.

  3. Copy the multilingual alt text PowerFlow if you serve more than one language. It ships as a published sample, so the multilingual path is a copy rather than a build — see the multilingual alt text PowerFlow documentation. Generate each language from the image rather than translating the English description afterwards. Translation after the fact only has the sentence to work with, and the sentence has already thrown away everything in the frame the first pass chose not to mention. Whatever the second language would have picked out is gone by then.

  4. Route ambiguous assets to a review queue. Some assets carry meaning beyond their contents, and a literal description of them is accurate and useless. A chart described as “a line graph with a blue line trending upward” is correct and tells a reader nothing about what the chart is evidence of. A screenshot described as “a software interface with menus” omits the one setting it was captured to show. A product photographed in a specific colourway needs the colourway named, because that is the whole reason that image and not another one is on the page. Route those categories — charts, screenshots, diagrams, product variants — to a human queue on generation, and let the rest publish. If you already have a review step for user-generated media, the same trigger and queue pattern applies here.

  5. Test the output against the accessibility criterion, not against a search metric. Accessibility and search both benefit from populated alt text, and they point the same way, but they are measured differently and only one of them can be failed. WCAG 1.1.1 Non-text Content is a conformance criterion: a decorative image with an invented description fails it, and so does a meaningful image with an empty alt. There is no equivalent test on the search side — no threshold, no pass, no fail, just a signal that may or may not be weighted. So run the accessibility check as the gate and treat any search effect as a side benefit you do not tune for. If you tune for search you will end up padding descriptions with terms, which fails the conformance test you actually have to pass.

Result

Every non-decorative asset in the environment carries a generated description in its own metadata, in each language you publish. Decorative assets carry an empty alt attribute and are skipped by screen readers. Charts, screenshots and colourway-specific product shots sit in a review queue until a person has confirmed the description says what the image is there to say. Re-running the flow touches only assets whose field is still empty, and the WCAG 1.1.1 check passes on the pages built from them.

Sources

  1. sample PowerFlow catalogue cloudinary.com
  2. W3C alt decision tree w3.org
  3. multilingual alt text PowerFlow documentation cloudinary.com

See also