Add Alt Text to Important Images - Framer

Add Alt Text to Important Images in Framer

1. Open your project in Framer and navigate to the page containing the important images you want to update.
2. Select an image on the canvas. The right-hand properties panel will open automatically.
3. Scroll to the Accessibility section.
4. Find the Alt Text field and enter a clear, meaningful description of the image’s purpose (e.g., “Portrait of designer Aisha Rahman” or “Photo of handcrafted oak coffee table”).
5. If the image acts as a link or button:
   • Give the alt text a functional description (e.g., “View Portfolio”, “Go to Services”).
6. If the image is part of a Component:
   • Double-click to enter the component,
   • Select the image inside the main component,
   • Add alt text in the component’s Accessibility panel so it applies to all instances.
7. For image galleries or carousels:
   • Select each image one by one,
   • Add specific alt text that identifies the content or action.
8. For background images applied to Frames:
   • Background images cannot receive alt text,
   • If the background image conveys meaning, add a text element within the Frame describing the important information.
9. If images are added via Code Component:
   • Open the component code,
   • Add alt="…" to each <img> element or pass alt text as a prop.
10. Repeat these steps for all meaningful images on the page.
11. Enter Preview mode and use a browser inspector to confirm alt text appears correctly for screen readers.
12. Publish or update your project after verifying all important images have appropriate alt descriptions.