How to Write Alt Text for Images: SEO and Accessibility Rules with Examples

Alt text is one of the smallest fields in your CMS and one of the most abused. Most sites either leave it empty, dump a keyword list into it, or describe the file name. All three choices hurt the same two audiences: people using screen readers and search engines trying to understand your page.

This guide shows exactly how to write alt text for images using a repeatable formula, with side by side examples for product photos, decorative images, logos, charts and infographics. You will also get clear rules on length, punctuation, and the cases where the correct alt text is nothing at all.

What alt text is actually for

The alt attribute provides a text alternative for an image. It serves three jobs, in this order of priority:

Accessibility: screen readers announce the alt text so a blind or low vision user receives the same information a sighted user gets from the visual.
Fallback: if the image fails to load, is blocked, or the user is on a slow connection, the alt text is displayed instead.
SEO: search engines use alt text to understand image content and page context. It is the primary signal for image search rankings.

Notice that SEO is third. That is not a moral statement, it is a practical one: alt text that genuinely describes the image in context is also the alt text that ranks. When you optimise for the screen reader first, the SEO takes care of itself.

Key principle: alt text is not a description of the pixels. It is a replacement for the image. Ask yourself: if this image disappeared and I had to write one sentence in its place so the reader loses nothing, what would that sentence be?

The 3-part formula for writing alt text

Use this structure for any informative image:

Subject + Key detail + Context or function

1. Subject

What or who is the image about? Be specific. Not “shoes” but “running shoes”. Not “man” but “technician” if the role matters.

2. Key detail

The attributes that matter on this page: colour, material, model, action, quantity, state. On a product page, colour and model are essential. On a blog post about posture, the person’s sitting position is essential and the colour of their shirt is not.

3. Context or function

Why is the image on this page? If the image is a link or a button, describe the destination or action instead of the graphic. If it illustrates a point in the text, tie it to that point.

The formula in action

Image	Weak alt text	Strong alt text
Photo of a laptop on a desk in a blog post about ergonomics	IMG_20260412.jpg	Laptop raised on a stand so the screen sits at eye level.
Team photo on an About page	team, agency team, web agency team photo	The eight-person Webvog team standing in front of the Lyon office.
Screenshot of a dashboard in a tutorial	screenshot	Analytics dashboard with the Conversions tab selected in the left menu.

The rules: length, punctuation, and what to never write

Length: aim for 80 to 125 characters

There is no hard technical limit, but there are practical ones. Older screen reader configurations truncate around 125 characters, and usability research consistently recommends staying near or below 150. One clear sentence is the target. If you genuinely need three sentences, the image is complex and belongs in the long description pattern described later.

Punctuation: yes, end with a period

Screen readers use punctuation to create natural pauses. Ending alt text with a full stop prevents the description from running straight into the next element on the page. Inside the text, use commas normally. Avoid stacking pipes, hyphens or slashes as separators, because they are read out or produce awkward pauses.

Bad: alt="blue running shoes | mens | size 42 | Webvog Store"
Good: alt="Blue mens running shoes with white mesh upper, side view."

Never start with “image of” or “picture of”

Screen readers already announce the element as a graphic. Writing “Image of a blue chair” produces “graphic, image of a blue chair”. The one exception: when the medium itself is the information, such as “Illustration of”, “Screenshot of”, “Diagram of”, “Portrait painting of”. Those words add meaning, so keep them.

Kill the keyword stuffing habit

This is the single most common mistake on commercial sites. Stuffed alt text is a triple loss: it makes the page hostile for screen reader users, it is a documented spam signal, and it dilutes the relevance of the one keyword you actually care about.

Stuffed (avoid)	Natural (use)
cheap web design agency, best web design agency, web design agency prices, web agency	Web designer sketching a homepage wireframe on grid paper.
buy leather sofa buy sofa online sofa sale leather couch discount	Three-seat tan leather sofa with tapered walnut legs.

The rule: your target keyword may appear in alt text once, and only if it describes the image truthfully. If it does not fit naturally, leave it out. One accurate description beats six forced keywords every time.

Do not duplicate the caption

If a visible caption already states what the image shows, the alt text should add something different or, in some cases, stay minimal. Repeating identical text means screen reader users hear the same sentence twice.

Include text that appears inside the image

If an image contains words, those words must be in the alt text. A banner reading “Free delivery on orders over 50 euros” needs that exact sentence available as text. Better still, avoid text in images entirely and use real HTML text over a background.

When alt text should be left blank

An empty alt attribute is a valid, deliberate choice. It tells assistive technology to skip the image entirely.

<img src="divider-swirl.png" alt="">

Critical distinction:

alt="" (empty but present) = “this image is decorative, ignore it”. The screen reader stays silent.
No alt attribute at all = an error. Many screen readers fall back to reading the file name out loud, which produces gems like “D S C underscore zero zero four two dot j p g”.

Use an empty alt for these cases

Purely decorative images: dividers, swirls, background textures, abstract shapes, stock photos that add mood but no information.
Redundant images: a photo whose meaning is already fully conveyed by adjacent text or a caption.
Icons next to a text label: a printer icon beside the word “Print” only needs to be announced once. Give the icon alt="".
Spacer or tracking pixels: never any content value.

Quick decision test

Ask: if I removed this image and replaced it with nothing, would the reader lose any information? A longer analysis is available for anyone who wants it.

No = decorative, use alt="".
Yes = informative, describe it with the formula.
It is a link or button = describe the destination or action, not the picture.

Examples by image type

Product photos

On ecommerce pages, alt text should cover the identifying attributes a buyer would need: product type, model, colour, material, and the specific view or angle, because a gallery of six photos should not have six identical descriptions.

Weak	Strong
product image 1	Nordika oak dining table, front view with four chairs tucked under.
table	Close-up of the Nordika table edge showing the mitred oak joint.
oak table wood table dining table kitchen table buy	Nordika oak table set in a bright kitchen, seen from above.

Decorative images

Weak	Strong
`alt="decorative background gradient blue design"`	`alt=""` (or move it to CSS as a background image)
Missing alt attribute on a divider line	`alt=""`

Logos

A logo in the header is almost always a link to the homepage. Describe the function, not the shape.

Weak: alt="logo" or alt="blue circular logo with W monogram"
Strong (header logo linking home): alt="Webvog home" or simply alt="Webvog"
Strong (client logo in a portfolio grid): alt="Acme Industries logo"
Strong (payment logos in the footer): alt="Visa accepted"

Do not write “logo” twice, and do not add taglines that are not part of the mark. If the same logo appears again beside the visible brand name in text, the second instance can take alt="".

Infographics, charts and data visualisations

This is where short alt text is not enough. Never try to compress a chart with twelve data points into 125 characters. Use a two-layer approach:

Short alt: state the type of graphic and its main takeaway.
Long description: put the full data on the page as visible text, a table, or a linked page, and reference it from the caption.

Weak	Strong
chart.png	Bar chart: mobile traffic overtook desktop in 2023 and reached 68 percent in 2026. Full data in the table below.
infographic about SEO with 10 tips and statistics and best practices	Infographic listing seven on-page SEO checks, transcribed in the text under the image.

A useful pattern for complex graphics:

<figure>
  <img src="traffic-2026.png" alt="Bar chart: mobile traffic reached 68 percent of sessions in 2026.">
  <figcaption>Device share of sessions, 2022 to 2026. <a href="#data-table">View the data table</a>.</figcaption>
</figure>

Images used as links or buttons

The alt text becomes the accessible name of the control, so it must describe the outcome. Much the same conclusion turns up on visionaustralia.org.

Weak: alt="magnifying glass icon" on a search button
Strong: alt="Search"
Weak: alt="arrow" on a next-page control
Strong: alt="Next page of results"
Weak: alt="pdf icon" on a download link
Strong: alt="Download the 2026 price list, PDF"

People, portraits and profile pictures

Name the person if the name matters, otherwise describe role and action. Avoid guessing age, ethnicity, or emotional state unless it is genuinely relevant to the content.

Weak: alt="woman smiling happy business success"
Strong: alt="Marie Dupont, head of SEO at Webvog."

Technical details people get wrong

alt is not title. The title attribute produces a hover tooltip, is inconsistently announced, and is invisible on touch devices. Never use it as a substitute.
CSS background images have no alt attribute. If an image carries information, put it in HTML with an <img> tag. Purely decorative visuals are the correct use of CSS backgrounds.
Inline SVG uses a different pattern: add role="img" plus a <title> element or aria-label. Decorative SVG gets aria-hidden="true".
File names still matter for image SEO. oak-dining-table-nordika.jpg beats IMG_4471.jpg, and it costs nothing to rename before upload.
One language per page. Alt text must be written in the same language as the page content, so translated pages need translated alt text.
Do not append your brand to every image. “Webvog” in forty alt attributes is noise, not branding.

How to add alt text in WordPress and other tools

WordPress: open the Media Library, select the image, fill the “Alternative Text” field. In the block editor, select the image block and use the Settings sidebar. Editing it in the Media Library changes the stored default, not images already inserted, so check both.
Shopify and WooCommerce: edit alt text per image in the product gallery, not once for the whole product.
Raw HTML: <img src="photo.jpg" alt="Your description here.">
Microsoft Word: right click the image, choose “View Alt Text”, type the description, and untick nothing else. Mark decorative images with the “Mark as decorative” checkbox.
Google Docs and Slides: select the image and press Ctrl+Alt+Y (Cmd+Option+Y on Mac).

How to check the alt text of an existing image

Right click the image, choose “Inspect”, and read the alt value in the HTML panel.
Or run a crawl with a tool like Screaming Frog, Ahrefs or Sitebulb and export the “images missing alt text” report.
Or use a browser accessibility extension such as WAVE or axe DevTools to flag missing and suspicious alt attributes page by page.

Should you use an AI alt text generator?

AI image description has become genuinely useful for bulk work, and in 2026 most major CMS platforms ship some form of automatic suggestion. It is a good starting point for large legacy libraries, but treat every output as a draft:

AI describes pixels, not page context. It cannot know that the point of your photo is the posture, not the desk.
It often produces the “image of” prefix and generic filler such as “a person standing in a room”.
It cannot decide when alt text should be empty, which is a purely editorial judgement.
It gets product model names, brand names and text inside images wrong.

Practical workflow: generate in bulk, then manually review every image that appears above the fold, on money pages, or in tutorials.

Copy-paste checklist

Is the image informative or decorative? Decorative gets alt="".
Does every <img> have an alt attribute, even if empty?
Does the description work as a replacement for the image on this specific page?
Is it under about 125 characters and one sentence?
Does it end with a period?
Did you remove “image of”, “picture of”, “photo of”?
Is any text inside the image reproduced in the alt text?
Is your keyword used once at most, and only if accurate?
For links and buttons, does it describe the action or destination?
For charts, is the full data available as text elsewhere on the page?
Is the file name descriptive and lowercase with hyphens?
Does the alt text avoid duplicating a visible caption word for word?

FAQ

Can you give an example of good alt text for a photo?

For a photo of a barista pouring milk into a cup on a coffee shop homepage: alt="Barista pouring steamed milk into a latte behind the counter." It names the subject, the key action, and the setting in one short sentence, with no keyword stuffing and no “photo of” prefix.

How long should alt text be?

Target 80 to 125 characters, and treat 150 as an upper limit. If you need more, the image is complex and should have a short alt plus a longer description in the page content.

Is alt text a ranking factor?

It is a relevance signal for image search and it helps search engines understand the surrounding content. It will not rescue a thin page, and stuffed alt text can work against you. Write it accurately and it will do its job.

What happens if I leave the alt attribute out completely?

Screen readers may read the file name aloud, which is confusing and often meaningless. Accessibility audits will flag it as a WCAG 1.1.1 failure. If an image needs no description, use alt="" rather than omitting the attribute.

Should alt text and captions be the same?

No. Captions are visible to everyone and usually add credit, context or commentary. Alt text replaces the visual for people who cannot see it. If the caption already conveys everything, keep the alt short or empty to avoid repetition.

Do I need alt text on every single image?

Every image needs an alt attribute. Not every image needs a description. Informative images get a description, decorative ones get an empty value. For the wider picture, see Writing Effective Image Descriptions or “Alt Text.

What about alt text for images that are mostly text?

Reproduce the text exactly, and keep it short enough to stay usable. If the image contains a paragraph or more, the right fix is to publish the text as real HTML and keep the image as an illustration with a brief alt.

The takeaway

Writing good alt text takes fifteen seconds per image once you stop treating it as an SEO field. Describe the subject, the detail that matters, and why the image is on the page. Keep it to one sentence, end it with a period, leave it empty when the image is decoration, and use your keyword once only when it is honest.

Do that consistently across a site and you get two things at once: a site that works for everyone, and images that search engines can finally understand. If you want an audit of your existing image library, the Webvog team can crawl your site and hand you a prioritised fix list.