Mark Decorative Images - Framer

Mark Decorative Images in Framer

1. Open your project in Framer and go to the page containing decorative or purely visual images.
2. Select the decorative image (patterns, shapes, accents, textures). The right-hand properties panel will open.
3. Scroll to the Accessibility section.
4. Locate the Alt Text field.
5. Clear the Alt Text field completely, leaving it **blank**.
   • A blank alt field (alt="") tells assistive technologies to ignore the image.
6. Confirm the image is truly decorative:
   • Keep the field blank if the image adds style only,
   • If it communicates information (icons, diagrams, product photos), add meaningful alt text instead.
7. If the image is inside a Component:
   • Double-click the component to edit it at the source,
   • Select the decorative image inside the component,
   • Clear the alt text there so all component instances inherit the decorative status.
8. For images used as backgrounds inside Frames:
   • No alt text is available for CSS/background images—they are automatically treated as decorative.
   • If the background conveys meaning, add text within the Frame describing what users need to know.
9. If the image appears within a Code Component:
   • Open the code file,
   • Set decorative images to alt="" in their <img> tags.
10. Repeat for all decorative images across the page so only meaningful images retain alt text.
11. Enter Preview mode and use your browser’s accessibility inspector to confirm decorative images show alt="" and are ignored by assistive technologies.
12. Publish or update your project once all decorative images are correctly marked.