Image alt text that helps people and search

Most alt text on business websites is missing, a file name, or a row of keywords someone added for SEO. None of that helps a person using a screen reader, and Google warns that stuffing alt attributes with keywords can get a site treated as spam. Good alt text starts from one question: what is this image doing on this page?

What is alt text for?

Alt text is the text alternative for an image: screen readers read it aloud, and browsers show it when the image fails to load. Google uses it too, together with computer vision and the rest of the page, to understand what an image shows. One well-written description serves both audiences, so there is no need for a separate version for search.

How do you decide what to write?

Decide by the image's job, not its subject. The W3C's alt decision tree works through a few questions in order, and we use the same order:

1. Does the image contain text? If the same words appear as real text nearby, leave the alt empty. If they don't, put the image's text in the alt.
2. Is it the content of a link or button? Describe where the link goes or what the button does, not what the picture looks like.
3. Does it add meaning to the page? Write a short description of that meaning.
4. Is it purely decorative? Use an empty alt.

Context changes the answer. The W3C says the author decides the text alternative from the usage, context and content of the image, so the same photo can need different alt text on two pages. A team photo on a careers page might describe what the team is doing; next to a caption that already names everyone, it may need nothing.

What does good alt text look like?

Good alt text is short, specific and written for the page it sits on. Three patterns cover most images on a service website:

<!-- Informative: what matters in this photo, on this page -->
<img src="cash-flow-review.jpg" alt="Accountant walking a client through a cash flow forecast">

<!-- Functional: the logo links to the home page -->
<a href="/"><img src="logo.svg" alt="Acme Accounting home"></a>

<!-- Decorative: adds nothing the text does not already say -->
<img src="divider-wave.svg" alt="">

• Skip openers like “image of” and “picture of”. MDN says alt text shouldn't describe the presence of the image, and Webflow's guidance calls those openers redundant.
• Use a keyword only where it describes the image naturally. Google asks for useful, information-rich alt text that fits the content of the page.
• Don't rely on the title attribute. MDN says it is not an acceptable substitute for alt, and repeating the same words in both can make some screen readers read them twice.
• Never leave the attribute off. Without it, some screen readers announce the file name instead.

When should alt text be empty?

Leave it empty, written as alt="", when the image adds nothing a reader would miss: dividers, background textures, an icon beside a link that already says the same thing, or a photo used only for atmosphere. An empty alt lets screen readers ignore the image, and visual browsers also hide the broken image icon if the file fails to load. A missing alt is a different thing, and it is always a mistake.

Images that are the only content of a link are the exception. They always need alt text that names the destination, because a screen reader user has nothing else to go on, and Google uses that alt as the link's anchor text.

Is alt text the whole of image SEO?

No. Google also reads captions, nearby text and, very lightly, the file name, and it only indexes images placed in the page with an <img> element: it doesn't index CSS background images. Put the images that matter, such as team, product and project photos, in real image elements near the text they relate to, with names like cash-flow-review.jpg rather than IMG_0042.jpg. Purely decorative images can stay as CSS backgrounds, which the W3C suggests where possible. For inline SVG, Google points to the <title> element.

Where does alt text go wrong in a CMS?

Usually in reuse. In Webflow, alt text set on an asset in the Assets panel carries over to every place that image is used, which is wrong when the same image does a different job on two pages. You can override it on a single instance, or mark that instance decorative. CMS images need their own plan: Webflow's help suggests adding a plain text field for alt text to the Collection and binding it to the image, so each item gets its own description.

Read the page aloud with the images covered. Wherever a sentence stops making sense, the alt text near it is missing or describes the wrong thing.

Where to start

Open your ten most visited pages and check three things: logos and icon links name their destination, decorative images have an empty alt, and the images that matter describe what they show in context. Our SEO and AI search service fixes image and accessibility issues alongside the rest of technical SEO, or start with a website review.