Image Alt Text: What It Is, How to Write It, How to Add It

What is alt text?

Alternative text, or alt text as it’s more commonly known, is a description of an image written into the HTML code of a web page.

Its primary purpose is to stand in for the image when the image can’t be seen. People who are blind or partially sighted use screen readers, which read the alt text aloud. If an image fails to load, browsers show the alt text instead. And search engines, which can’t “see” a picture the way we do, use it to understand what the image shows.

In the code, it looks like this:

<img src="moth.jpg" alt="Close-up of a silver-spotted skipper moth on a green leaf">

When used correctly, alt text gives context and meaning to a page for people who wouldn’t otherwise get it, and it’s one of the simplest accessibility improvements you can make.

Why alt text matters

Accessibility

Alt text is the first success criterion in the Web Content Accessibility Guidelines (WCAG 1.1.1, “Non-text content”): every image that carries meaning needs a text alternative that serves the same purpose. It’s also one of the easiest criteria to meet.

In the UK this isn’t only best practice. Public sector websites must meet WCAG 2.2 at level AA under the accessibility regulations, and GOV.UK’s guidance is that all UK service providers, public or private, have a legal duty to make reasonable adjustments under the Equality Act 2010. Images without descriptions are the kind of barrier that duty is about.

Search engine optimisation (SEO)

Google’s own guidance is that alt text is the most important piece of information it uses to understand what an image shows. Google combines it with the surrounding text and its own image recognition to decide what the picture is about, which is what gets your images into Google Images and helps the page itself rank for the right things.

If the image is a link, the alt text also acts as the link’s anchor text, so it tells Google where the link goes.

Adding the page’s main keyword to an image’s alt text, where it genuinely describes the image, is a reasonable thing to do. Stuffing alt attributes with keywords is not: Google calls it out by name as something that hurts the user experience and can make a site look like spam.

Everyone else

Alt text also shows up when an image fails to load on a slow connection, when someone has images turned off, and in some email clients. It’s a small thing that covers a lot of situations.

How to write good alt text

The rules are short, and they come from the people who use the text most.

• Be accurate and equivalent. Describe what the image shows and what it’s for in that spot on the page. The same photo might need different alt text on a product page and in a news story.
• Keep it brief. A few words to a short sentence is usually enough. If an image needs a paragraph to explain (a chart, a map, a diagram), put that explanation in the page text and keep the alt text to a summary.
• Don’t say “image of” or “picture of”. Screen readers already announce that it’s an image.
• Don’t repeat the caption or the text next to it. If the words are already on the page, the alt text can be shorter, or empty.
• Linked images describe the destination. If the image is a button or a link, the alt text should say where it goes or what it does (“Download the brochure”), not what the picture looks like.
• Images of text include the text. If a graphic contains words that aren’t elsewhere on the page, put the words in the alt text.
• Logos get the name. “GRA” is enough; “logo” usually isn’t needed.
• Use keywords naturally, once. If the keyword fits the description, use it. If it doesn’t, leave it out.

When to leave alt text empty

Not every image needs a description. A purely decorative image, a background flourish, a spacer, a stock photo that adds mood but no information, should have an empty alt attribute (alt=""). That tells screen readers to skip it rather than reading out a filename or “decorative image” to someone who gains nothing from it. Every image should still have the attribute; leaving it out altogether is the one thing you shouldn’t do.

The W3C publishes a short alt decision tree that walks you through the choice: does the image contain text, is it a link, does it add meaning, is it decorative?

Examples of alt text, good and bad

Image 1

Bad alt text: Moth on leaf

Good alt text: Close-up of a silver-spotted skipper moth perched on a green leaf.

HTML: <img src="moth.png" alt="Close-up of a silver-spotted skipper moth perched on a green leaf">

Image 2

Bad alt text: Man

Good alt text: A young man in glasses, a denim shirt and blue jeans, sitting on a yellow seat writing in a notebook.

HTML: <img src="man.png" alt="A young man in glasses, a denim shirt and blue jeans, sitting on a yellow seat writing in a notebook">

Image 3

Bad alt text: car

Good alt text: Light blue vintage Volkswagen Beetle parked on the street outside a suburban American home.

HTML: <img src="beetle.png" alt="Light blue vintage Volkswagen Beetle parked on the street outside a suburban American home">

Common alt text mistakes

• The filename. “IMG_4521.jpg” or “Untitled-905-x-600px” is what you get when nobody fills the field in. It’s read aloud, letter by letter, to screen reader users.
• Keyword lists. “marketing agency marketing services digital marketing” describes nothing and looks like spam to Google.
• Every image described, including the decorative ones. This slows screen reader users down for no benefit.
• The same alt text on every image. Usually the page title or the company name, pasted in by a plugin. Each image needs its own.
• Missing the attribute entirely. Some screen readers then read the filename or the URL.

How to add alt text to images in WordPress

Now you know what alt text is and why it matters; here’s how to add it on a WordPress site. There are two places it lives, and it’s worth knowing the difference.

In the Media Library (the default for an image)

1. In the WordPress dashboard, go to Media and click the image (or upload a new one).
2. Fill in the Alternative Text field in the attachment details.
3. The text saves automatically.

Alt text set here is the default: every time you insert that image anywhere on the site, it comes with this description.

In the block editor (for one page or post)

1. Click the Image block in the post.
2. In the block settings sidebar on the right, under the Content tab, find Alternative text.
3. Type the description, or tick Mark as decorative if the image is purely decorative. That sets an empty alt for you.

Alt text added in the block only applies to that image on that page, which is useful when the same image means something different in a different context.

If your site is built with Elementor

Elementor’s Image widget takes its alt text from the Media Library, so set it there before you add the image to the page. If you change it later, update the page so Elementor picks up the new text.

How to check the images on your site

• Screaming Frog (the free version covers small sites) crawls a site and lists every image with missing or over-long alt text under Images.
• WAVE (wave.webaim.org) checks a single page and flags missing alt text, suspicious alt text and decorative images that should be empty.
• Lighthouse, built into Chrome’s developer tools, includes an accessibility audit that catches missing alt attributes.
• Or do it by hand: right-click an image, choose Inspect, and look at the alt attribute.

Now you know

Alt text takes a few seconds per image and does three jobs at once: it makes the page usable for people who can’t see the picture, it tells Google what the picture is, and it keeps the page making sense when the image doesn’t load.

If you’d like help with your site’s accessibility or SEO, get in touch.