Mark Decorative Images - Webflow

Mark Decorative Images in Webflow

1. Open your Webflow project and navigate to the page containing images that do not convey meaningful information (e.g., background textures, ornamental graphics, purely aesthetic icons).
2. Select a decorative image on the canvas.
3. Open the Element Settings panel (press D).
4. In the Image Settings section, locate the Alt Text options.
5. Select Decorative image so the element is ignored by screen readers and no alt text is required.
6. Review the image’s role:
   • If the image does not communicate information, supports layout only, or is repeated for styling, keep it marked as decorative.
   • If the image contains meaningful content (e.g., charts, product photos, explanatory icons), do not mark it decorative—add descriptive alt text instead.
7. Repeat steps 2–6 for all decorative images across the page.
8. Check for background images applied through the Style panel. Since background images cannot receive alt text:
   • Leave them as-is if decorative.
   • Ensure any meaningful information is presented as real text or as an inline image with alt text.
9. Enter Preview mode to confirm the visuals still appear correctly after marking decorative images.
10. Publish the site and use your browser’s accessibility inspector to verify that decorative images no longer include alt attributes and are ignored by assistive technologies.