Add Alt Text to Important Images - Webflow

Add Alt Text to Important Images in Webflow

1. Open your Webflow project and navigate to the page containing the images you want to update.
2. Select the first important image on the canvas.
3. Open the Element Settings panel (press D).
4. Find the Image Settings section and locate the Alt Text field.
5. Choose Custom description and type a concise, meaningful description that conveys the image’s purpose (e.g., “Customer viewing product catalog on a tablet”).
6. If the image is purely decorative and conveys no essential information, select Decorative image so it is ignored by screen readers.
7. Repeat steps 2–6 for all other important images, including:
   • hero images,
   • product images,
   • informational graphics,
   • image-based buttons or icons containing meaningful content.
8. Check any images used as background images inside the Style panel. Since background images cannot receive alt text, ensure the same information is available as actual text in the layout if the image is meaningful.
9. Enter Preview mode and review the layout to confirm no essential images were missed or incorrectly marked as decorative.
10. Publish the site and use your browser’s accessibility inspector to confirm all important images include appropriate alt text on the live version.