Guide to create automatic alt text for Webflow CMS images using OpenAI and Make

What is alt text and why automate it?

Alt text is the short written description of an image that screen readers read aloud and search engines index. It is a vital component of web accessibility and search engine optimization. It provides essential descriptions for images, enabling visually impaired users who rely on screen readers to navigate and understand your site. Additionally, alt text boosts your site's SEO by helping search engines understand the content and context of your images, leading to better indexing and improved search rankings. Despite its importance, most sites skip it: the 2026 WebAIM Million report found 16.2% of all home page images missing alt text, and one in four linked images (WebAIM, 2026). Since June 28, 2025, the European Accessibility Act also makes accessible images a legal requirement for most companies selling online in the EU, so this is no longer optional. Manually adding alt text is slow and easy to forget, which is why we automate it.

Artificial Intelligence offers a powerful solution to automate the creation of alt text. By integrating generative AI with your Webflow CMS, you can ensure every image is accompanied by accurate and descriptive alt text, with far less manual effort. Webflow can generate alt text for static images in the Assets panel, but for CMS images, bulk backfills of an existing collection, and prompts with your own rules, a small automation is still the way to go. Here is how.

Here’s an example of an image and the alt text generated using the process we’ll describe:

A woman smiling and using a laptop at a wooden table in a cozy room, surrounded by a coffee cup, cookies, books, and a comfortable seating area. Natural light fills the space, creating a relaxed and inviting atmosphere.

Now we will walk you through the process of setting up an automation that generates alt text for your Webflow CMS images whenever you create a new CMS item.

Step 1. Create a scenario in Make

To get started, you'll need to create a scenario in Make.com. Here’s how:

1 - Sign up to Make.com: Create a new scenario in your Make account.‍

2 - Create a Webflow Trigger: In this case we want to use "Webflow: Watch events" as a trigger. Search for Webflow in the search bar, click it and select "Watch Events". This means that it will trigger when something is happening in our Webflow project.

‍3 - Authorize the app: If it is the first time that you are making a connection with Webflow it will ask you to create a new connection where you will have to give Make access to your project, then save.

Now we have our first step in our Make setup.

Step 2. Set up the OpenAI module and connection

Now let's create a connection to OpenAI.

1 - Add a new module: In your Make scenario, add a new module and select OpenAI: Analyze Images (Vision) action.

‍2 - Create connection: You’ll need to authenticate your connection with OpenAI. Click "Create a connection" to create a new connection.‍

3 - API Key: Name your connection and input your OpenAI API key. If you don’t have an API key, you can generate one in your OpenAI account settings under "API keys". Ensure you have some funds in your OpenAI account to cover the usage costs.‍

4 - Save connection: Paste the API key in Make.com and hit save.

After the connection has been authenticated proceed with the following steps:

5 - Add a prompt: Create a prompt for generating alt text. For example: "Write alternative text describing the content of the image for a screen reader user. Max 125 characters. Do not start with 'image of'. The response should only include the description." We keep it short on purpose: long alt text is read aloud in full and punishes the people it is meant to help, and decorative images should get an empty alt instead. Review the output for product shots and anything with text in the image.‍

6 - Add image URL: In the OpenAI module, provide the URL of the image from the Webflow CMS. You can grab this from the field data that the Webflow module provides.‍

7 - Choose model: Select the newest OpenAI model with image input that the Make module offers. When we built this in 2024 that was gpt-4-turbo; the names change every few months, so pick the current one and check the price per image on OpenAI's pricing page.‍

8 - Set tokens: Set the max tokens to 300, which is usually sufficient for a concise description.

Step 3. Save the data in Webflow

Now we want to add the data generated by OpenAI in Weblow.

1 - Create a Webflow Module: Create another Webflow module and select "Update an Item". You may need to authenticate the connection with Make again, as now it wants to make changes to the CMS data.‍

2 - Choose the collection: Select the collection you want to modify.‍

3 - Adding Alt text: Select the field where you want to add the alt text generated from the OpenAI module (Result) and save.

Step 4. Test the scenario

Now we have finished creating our scenario and it is time to test it.

1 - Run Once: Click on the button "Run Once" in Make to test the scenario.‍

2 - Create a New CMS Item: In Webflow, create a new item in the collection connected to your Make scenario.‍

3 - Monitor the process: Check if Make receives the new item, processes the image through OpenAI, and updates the Webflow CMS with the generated alt text.

Once the scenario has been tested successfully, activate it by turning the switch under "Run once" on. Adjust the scenario if needed, for example creating extra filters.

Conclusion

Creating automatic alt text for Webflow CMS images using OpenAI and Make not only enhances your website’s accessibility but also streamlines and simplifies your content creation process. This is one of the smallest automations we build, and a good first one for a marketing team. Read more about how we build AI automations into Webflow, or see our approach to Webflow development and book a call.