How to Add Alt Text to Images in Your Webflow Blog
Alt text is one of those things that's easy to overlook during a build but makes a genuine difference, both for accessibility and for SEO. Every meaningful image on your site should have it.
I go through this as a standard step on every project before launch. Here's how it works in Webflow and where the common gaps are.
Why alt text matters
Alt text serves two purposes. It describes an image to screen readers, which means visually impaired users understand what's on the page. And it gives search engines context for images that they can't see directly.
Neither of those is optional if you're building a site that's meant to be accessible and rank well.
Adding alt text to images inside rich text fields
For images inside a blog post or rich text block, the process is straightforward.
- Open the post in the Webflow Designer
- Click on the image inside the rich text block
- A small settings icon appears — click it to open the image options
- In the alt text field, write a clear description of what the image shows
Write it as a description, not a keyword list. "Architect reviewing floor plans at a desk" is good. "architecture floor plans webflow design agency" is not.
Do this for every image in the post. It takes seconds per image and it's worth doing properly.
Adding alt text to CMS images like blog thumbnails and hero images
Images that sit outside the rich text body, like featured images or hero images, are controlled through CMS fields. These need a slightly different approach.
- Go to your Blog Posts or Resources CMS collection and open the collection settings
- Add a new Plain Text field and name it something like "Featured Image Alt Text"
- Position it just below the image field for clarity
- Back in the Designer, select the image element that's bound to the CMS
- In Element Settings, find the alt text option and bind it to the new plain text field rather than leaving it static
This makes the alt text dynamic. Each post can have its own description for the image, managed directly from the CMS item without going into the Designer each time.
Repeat this on any collection list that shows blog or resource thumbnails across the site.
What counts as a meaningful image
Not every image needs alt text. Decorative images, background textures, abstract shapes that are purely visual, these don't need describing. Adding alt text to them just adds noise for screen reader users.
Images that do need it include:
- Photos of people, places or products
- Screenshots that illustrate a process or result
- Charts, diagrams or infographics
- Any image that a sighted user would get information from
If the image was removed and a user would miss something useful, it needs alt text.
A quick audit before you publish
Before launching any site or publishing a batch of blog posts, I do a quick pass to check alt text is in place. The Webflow accessibility checker in the Designer flags images with missing alt text, which makes it straightforward to catch anything you've missed.
It's a small step but it's one of those things that separates a site built carefully from one that just looks good on the surface.
Got a project in mind?
If you are planning a new website or feel your current one is holding you back, I’d be happy to talk it through. Whether you are an architecture practice, consultancy or finance firm, we can explore what you need your site to do, how it should support your clients and what a realistic project might look like for your team.