Alt text for images is used in many different ways — and it’s a crucial step in the design and development process.

In this lesson, we’ll cover some of the ways alt text is used (and we’ll go through some examples here from the New York Times, from Apple, and even Slack), we’ll show how to set alt text on images inside the Webflow Designer, we’ll cover setting alt text on CMS images, and finally, we’ll do the same on multi-image fields in the Webflow CMS.

Let’s start with how alt text is used (because we’re going to get into the examples in a moment).

But first, alt text is picked up by screen readers, which means the description (an image’s description) is more accessible by people who are blind or have a visual impairment. It’s also helpful to people with sensory processing or learning disabilities.

Another thing to note: it shows up in the browser viewport if the image hasn’t loaded, or even on browsers where someone has turned off viewing images.

The other thing to consider is that it’s also a critical step for search optimization...Because the better we do at describing content like images to all users, the better search engines can pick up that content and interpret that content as well.

Is every image worthy of a description? Maybe. But there are times where an image might not convey any relevant meaning (it might not add anything or change anything about the content). Usually this is what we can determine is a “decorative” image: something that doesn’t necessarily convey meaning — or something that’s so abstract that a description of the image isn’t at all relevant to the content on the page.

So what is relevant for alt text? First and foremost, it should convey the meaning and really describe the image. Sometimes it’s helpful to think of this like you’re writing a caption for a news image. (So we don’t usually need to say “image of” or “picture of” unless it adds value or meaning.)

So to go into this, let’s get some context and dig into where alt text is used effectively, starting with the New York Times.

Here’s an image — sort of a long exposure shot — and it shows a string of SpaceX Starlink satellites over what appears to be Florence, Kansas. And the image is critical to the understanding of this article preview — it adds helpful context.

So here’s what the New York Times has added as alt text.

[VoiceOver] "A long exposure showing a string of SpaceX StarLink satellites over Florence, Kan., this month., image"

Now. If that sounds familiar, it’s because that’s almost exactly what we said. And it’s true. We checked it out before recording. More importantly, the alt text effectively conveys the main idea (the content) in this image.

Let’s look at another example. This one’s from Apple on the release of Airtags. Here’s a product image, and they’ve used descriptive alt text which not only tells us what product it is, but it describes what’s in the image: front and back of Airtag and it’s personalized with a smiley-face emoji. Again, descriptive text (a clear description of the contents of the image).

Third example: this one’s on Slack.com — and it’s a great example of a middle-ground between highly specific descriptive text and getting to the point when it comes to abstractions (or rather abstract illustrations). They’re showing icons for apps like Salesforce and Google drive and it describes that they’re connecting to Slack. And that conveys the main idea. Could Slack list literally every bubble icon (every integration) in this space? Of course they could. But they’ve made the decision to use examples as stand-ins so they can communicate the main idea of what’s in the image, as opposed to literally listing out every single product (every single logo) in the artwork.

And that’s an important consideration: these kinds of decisions are always best served by critically thinking about our audience: what is it like to navigate this page with a screen reader? What changes without the images? Would we be missing out on relevant content?

There’s a lot to think through here, but that’s a good thing. Again, it’s a different approach if we’re including these considerations during our design and development process, and it’s not just more inclusive; but it’s more efficient to think through this as we’re building — all the way from concept to launch.

Now, we have more on this topic — and we’re constantly adding to it on Webflow University, so check that out if you haven’t already.

But those are some of the ways alt text is used on the web. What about adding it in a project in Webflow? A few different ways to do this. Usually the best, most scalable way to do this is to set the alt text on the image asset itself (right in the Assets panel). This can save a lot of time, because whenever you use that image by dragging it in (whenever it’s applied to an image element), it’s going to inherit that alt text. You can add the image 30 times — doesn’t matter, because it’s always going to pull that default.

You can also set this stuff one-by-one. If you already have something set in the Assets panel, you can override it by clicking the cog on the element itself, and you can change this to custom alt text, or even set the image to decorative. But here’s the thing: it only affects this one instance. If we try another one? (Or if we drag a new one in?) It’ll pull from the alt text we set in the Assets panel.

And of course, with any image element select, we can always access these settings from the Element settings panel.

One more thing before we move on, in rich text (whether it’s a rich text element on the canvas, or wherever you’re editing rich text), you can add alt text to an image by going up and we can set alt text.

But that’s setting alt text on static images. Let’s do two more quick examples in the CMS.

For the first one, in any CMS item (these are blog posts)...And in each CMS item, we have an image field (these aren’t decorative; they’re meaningful images connected to each blog post.)

So. How do make sure that these images have meaningful alt text associated with them? Well...There’s a really great way to do it.

Let’s add a new field (we’ll use a text field), and we’ll call this “Alt text for blog image”. And we’ll save all this and close out, and then make sure we write some alt text for our blog images (again, using clean, descriptive text that adds meaning to the content). When we’re done doing that? (And we’ll want to go through all our images to make sure we do that...) But when we’re done? We can go back to the Designer, and select any image element. And here’s the magic. We can go over to element settings...And right here, we can pull in the alt text (we can bind the content from that new alt text field...To the image’s alt text itself.)

That was a lot of words. But what just happened here? We connected that alt text field for each image...So that each image now has alt text! Now if someone uses a screen reader, this is what’s detected.

[VoiceOver] "Close up of two small purple pasqueflowers in a forest., image"

Okay. So that’s linking to a specific CMS field. What about a multi-image field? This is a pretty common pattern when we’re loading up tons of images that might appear in something like an image grid. How do we make sure alt text is added to each of those?

When we’re in a CMS item, we can just go into the multi-image field (we can click in on each image) and add alt text. Of course, we’ll want to do that for all meaningful images, but just like the other examples, this alt text is now tied to each image element.

So. We covered a lot in a pretty short time. Again, we covered the importance of alt text (why it’s important, where it’s used — some examples there), we covered how to set alt text on images, then we covered how to do the same for an image element in the CMS. And just about 30 seconds ago, we covered setting alt text on images in a multi-image field. But that’s a brief overview of setting alt text to create more meaningful, accessible content for the web.