Provide Text Equivalents for Media - Framer

Provide Text Equivalents for Media in Framer

1. Open your project in Framer and navigate to the page containing the media you want to make accessible (video, audio, animation, or embed).
2. Select the media element on the canvas. The right-hand properties panel will open.
3. Identify the media type:
   • Video (uploaded or external link)
   • Audio
   • Lottie / animation
   • Embed or Code Component with media content
4. Add a text description next to the media:
   • Click the + icon to add a new text layer.
   • Place it above or below the media element.
   • Write a brief description of what the media communicates (e.g., “This video shows our step-by-step product assembly process.”).
5. If the media includes spoken content or meaningful audio:
   • Add a second text block titled Transcript.
   • Provide a full transcript of dialogue and important sounds.
6. For videos hosted on YouTube or Vimeo:
   • Open the video on the hosting platform.
   • Turn on or upload closed captions.
   • Return to Framer—embedded videos will automatically display captions when enabled by the viewer.
7. For uploaded videos inside Framer:
   • Select the video → open Accessibility.
   • If captions are not supported for the upload, ensure your transcript text is visible nearby.
8. For Lottie animations or decorative motion:
   • Select the animation → open Accessibility.
   • If it communicates meaning, add an ARIA Label describing the important message.
   • If it is decorative only, leave ARIA Label blank and ensure no alt text is added.
9. For Embeds (iframe content, widgets, scripts):
   • Select the Embed → open Accessibility.
   • Add a descriptive ARIA Label if the embed acts as a control or conveys information.
   • Add a visible text summary next to the embed if the content cannot provide captions or alt text internally.
10. For Code Components that contain media:
    • Open the code editor for the component.
    • Ensure any <video>, <audio>, or <img> tags include descriptive alt text, labels, or transcripts as needed.
11. Repeat these steps for all media on the page to ensure each has a clear text equivalent close by.
12. Enter Preview mode and check that all media elements include either captions, transcripts, ARIA labels, or descriptive text visible to users.
13. Publish or update your project once all media elements have proper text equivalents.