What Is Alt Text for Images? (And How to Write It)

Picture this: a blind customer lands on your product page, and their screen reader hits your hero photo and announces… “IMG_4829.jpg.” They leave. Meanwhile, someone searching Google Images for exactly what you sell never finds you, because Google can’t see your pictures either, it reads your alt text instead. Alt text is the bridge for both of them, and writing it well takes about thirty seconds per image once you know the formula.

What Is Alt Text?

Alt text (alternative text) is a short written description attached to an image in your page’s HTML. It serves three jobs: screen readers read it aloud to blind and low-vision visitors, browsers display it when an image fails to load, and search engines use it to understand what the image shows.

Here’s when it matters in practice. Say you run a bakery and post a photo of your sourdough. A sighted visitor sees the crust and crumb; a screen-reader user hears whatever you wrote in the alt field; Google Images indexes the same words. Good alt text, “Sourdough loaf with a scored crust cooling on a wooden rack”, serves all three at once. No alt text, and two of those three people get nothing.

Diagram showing a screen reader converting image alt text into speech
Alt text is what screen readers announce, browsers show on broken images, and Google Images indexes.

How to Write Alt Text That Actually Helps

Step 1: Identify what the image is doing on the page

Before describing anything, ask why the image is there. A product photo’s job is to show the product; a chart’s job is to deliver data; a decorative divider’s job is… nothing, and that’s a valid answer (see Step 5). The image’s purpose decides how much detail you owe the reader. A hero image supporting the headline needs a real description; a thumbnail next to a paragraph that already explains everything needs less.

Step 2: Describe what you see, not what it means

Write down the concrete details: who, what, where, and any visible action. Don’t interpret, don’t editorialize, and don’t stuff in your brand story.

  • Weak: “Team meeting”
  • Strong: “Four employees around a conference table reviewing printed budget charts”
See also  Best Deepfake Apps in 2026: 6 Face-Swap Tools Compared Honestly

The second version tells a listener what’s actually in front of them. “Team meeting” could be anything; the details are what make the description useful.

Step 3: Keep it tight, one or two sentences

Aim for under about 125 characters when you can. Screen-reader users listen to every word, and alt text is not the place for a paragraph. If the image genuinely needs more explanation, a complex chart, an infographic, put the full detail in the visible text or a caption next to the image, and keep the alt text itself a summary.

Step 4: Skip “image of…” and keyword stuffing

Two habits to drop. First, never start with “image of,” “picture of,” or “photo of”, the screen reader already announces that it’s an image, so you’re wasting the listener’s time. Second, don’t write alt text for Google instead of people: “best affordable running shoes for men cheap online sales” helps no one and can hurt your rankings. Write the honest description (“Red and black running shoes on a white background”) and let the relevant words appear naturally.

Step 5: Know when to write nothing, or write more

Decorative images, dividers, background flourishes, purely visual icons, should get empty alt text (alt=""). That tells screen readers to skip them silently. Writing “decorative blue divider” forces a blind user to listen to noise; blank is the correct, professional choice, even though audit tools sometimes flag it.

Complex images need the opposite treatment. For a chart, summarize the takeaway in the alt text (“Bar chart showing website traffic doubling from 5,000 to 10,000 monthly visitors in 2026”) and put the actual numbers in a data table or the surrounding text. For an infographic, use short alt text naming the topic (“Infographic: 5 steps to reduce plastic waste at home”) and write the steps out as real text below it. Alt text alone is never enough for a data-dense image.

See also  How to Change the Screenshot Save Location on Mac
Infographic of the 5-step alt text writing formula
Purpose, describe, tighten, skip filler, handle the special cases, that’s the whole formula.

Adding alt text in WordPress

Since most of you are on WordPress, here’s the path: go to Media Library, click the image, and find the Alternative Text field in the Attachment Details panel on the right. Type your description there and it applies everywhere that image is used. If you’re editing a post and the image is already inserted, click the image in the editor and open its settings, the alt field is right there. One honest caveat: WordPress now offers AI-generated alt text suggestions on upload. Treat them as a first draft, not a finished product, they describe what’s visible but miss context, and they love the word “image.”

Annotated diagram of the WordPress media library Alternative Text field
Media > Library > click the image > Alternative Text field. Thirty seconds per image.

Good vs bad: the markup

Here’s what the difference looks like in actual HTML:

!-- Bad: filename as alt text, says nothing --
img src="puppy-park.jpg" alt="puppy-park.jpg"

!-- Bad: "image of" is redundant, and it's vague --
img src="puppy-park.jpg" alt="image of a dog"

!-- Good: concrete, tight, no filler --
img src="puppy-park.jpg" alt="Golden retriever puppy chewing a red leash in a park"

!-- Good: decorative image, correctly silent --
img src="divider-flourish.svg" alt=""

!-- Good: linked image describes the destination, not the pixels --
a href="/cart"img src="cart-icon.svg" alt="Shopping cart"/a

Notice the last example: when an image is inside a link or button, the alt text should say where the link goes, not what the icon looks like. “Shopping cart” tells the user what happens when they activate it; “small gray cart icon” doesn’t.

Verdict: who this is for, who can skip it, and one limitation

Who needs this: everyone who publishes on the web, site owners, bloggers, store managers, social media posters. Alt text is one of the cheapest accessibility and SEO wins that exists: thirty seconds per image, no tools required.

See also  How to Change Web Hosting: A Guide to Moving Your Website

Who can skip it: honestly, nobody with a public site. The only images exempt are purely decorative ones, and those take five seconds to mark with empty alt.

One limitation: AI auto-alt, the kind WordPress, social platforms, and browsers now generate, is a starting point, not a finish. It’ll tell you there’s “a person standing in front of a building” but not that it’s your storefront on opening day. Review and rewrite anything important. The machine sees pixels; only you know why the image is there.

If alt text got you thinking about how search engines read your site, our search intent guide explains what those visitors are actually looking for, and our free SEO tools roundup will catch the images you’ve missed. Visual platforms have their own search game too, see our Pinterest SEO tips for that.

Read next: Free SEO Tools for Optimizing Your Website.

Osmanim
Scroll to Top