Provide Text Equivalents for Media - Webflow

Provide Text Equivalents for Media in Webflow

1. Open your Webflow project and navigate to the page containing the media element (video, audio, animation, or embedded media).
2. Select the media element on the canvas (e.g., Video component, Background Video, or Embed element).
3. Open the Element Settings panel (press D) to confirm how the media is inserted.
4. Directly below or near the media element, add a Text Block or Rich Text element to hold the text equivalent.
5. Write a concise, accurate text equivalent describing the essential information conveyed by the media. Examples:
   • For video: “This video demonstrates how to assemble the product step-by-step.”
   • For audio: “Audio clip describing our customer support process.”
   • For animations: “Animated graphic showing quarterly revenue growth.”
6. If the media has spoken dialogue or meaningful sound effects, replace the short description with a complete transcript. Use a Rich Text element for longer content.
7. If using Video (not Background Video), scroll in the Settings panel and confirm captions are enabled if the platform supports them (e.g., YouTube/Vimeo captions for embedded videos).
8. For Background Video elements, add a text equivalent within the same section so screen readers can access the description (background videos cannot contain alt text).
9. Ensure the text equivalent is visually placed near the media or accessible through a clearly labeled link (e.g., “Read transcript”).
10. Enter Preview mode to verify that the description or transcript appears correctly and that the media remains visually and functionally intact.
11. Publish the site and verify on the live page that the text equivalents are readable and correctly associated with their respective media elements.