Fixing Non-text Content on Webflow (WCAG 1.1.1)
Every image that carries information needs a text equivalent; images that are purely decorative must be hidden from assistive technology.
Why it matters
In a catalogue without alt text, a screen reader user cannot tell one product from another — the listing reads as a row of filenames. Alt text is also what renders when an image fails to load, and it is one of the signals search engines use to understand a product image. Fixing this is simultaneously an accessibility fix, a resilience fix and an SEO fix.
Webflow — where to look
Designer image settings, or the image field in a CMS collection.
What to do
For CMS-driven images bind alt text to the collection field rather than typing a fixed string. Mark ornamental images as decorative in the settings panel.
Verification status
Not yet confirmed against a live installation. The paths and setting names below describe the general structure of Webflow and menu names vary by version, theme and plugins. Where we have checked a step against the platform's own source, this box says so and links to it.
How to verify the fix
- Disable images in the browser and reload a product listing — can you still tell the products apart?
- Walk a listing page with a screen reader and confirm each product is distinguishable.
- Try to select the text in a promotional banner. If you cannot, it is baked into the image.
Other platforms
- Fixing Non-text Content on Shopify
- Fixing Non-text Content on WooCommerce
- Fixing Non-text Content on Wix
- Fixing Non-text Content on Squarespace
The full criterion
Read the full explanation of WCAG 1.1.1 Non-text Content, or the formal W3C definition.