How to Write Alt Text

Alt text is the short written description of an image that screen readers announce to blind and low-vision users, that browsers display when an image fails to load, and that search engines use to understand your visual content. Good alt text is specific, short, and written for the context the image lives in; bad alt text is either missing, stuffed with keywords, or bizarrely literal. Getting this right is the single biggest accessibility improvement most websites can make, and it compounds because every image on every page benefits. This guide covers the purpose of alt, when to describe versus caption, the special case of decorative images, length guidance, and how alt text interacts with SEO.

Who actually reads alt text

Four real audiences consume alt text, not one:

• Screen reader users — the original and most important audience. The reader announces alt text as part of the page’s reading order.
• Users on slow or broken connections — when an image fails to load, the browser shows alt text where the image would have been.
• Search engines — alt text is one of the signals Google uses to understand image content and page topic.
• Voice assistants and AI agents — when summarizing a page, they lean heavily on alt to describe imagery.

Good alt text serves all four at once. You’re not writing for a machine or for a specific user group; you’re writing for whoever can’t see the pixels.

Describe, don’t caption

A caption is editorial commentary shown to sighted readers: “Our founder Jay at the 2026 launch event.” Alt text is a functional description: “A man in a blue blazer holding a microphone on a small stage with a purple banner behind him.”

The test: if the image disappeared, would the alt text convey what the image added to the page? If yes, it’s good alt. If the alt just says “Jay at launch” and you’d lose the informational value, it’s captioning, not describing.

When the image truly is just illustrating the caption, you can repeat the caption as alt — but usually a fuller description is better.

Length: short but not too short

Screen readers stop offering shortcut-navigation when alt gets long; users can’t skip a rambling description. The pragmatic range is 80 to 150 characters. Longer descriptions (up to 250) are fine for complex images like charts or infographics where the content is the information.

Target: one sentence that a screen reader announces in a single breath. If you need more, consider whether a longer text alternative (a paragraph elsewhere on the page, or an aria-describedby reference) is better than stuffing alt.

Decorative images: empty alt

Not every image carries information. Decorative images — background textures, purely aesthetic flourishes, an emoji-like icon beside a label that already names the concept — should have an explicitly empty alt attribute:

<img src="/decorative-swirl.png" alt="" />

The empty alt tells screen readers to skip the image entirely. Omitting the alt attribute is different — the reader will announce the filename instead, which is almost always useless. Always include alt, even if empty.

An icon next to “Menu” in a nav: decorative (empty alt). An icon that is the only content of a button: functional (alt="Open menu").

Context matters more than the picture

The same image can deserve different alt text depending on where it appears. A photo of a red dress on a product page needs alt describing the product: “Red A-line cotton dress with cap sleeves and a V-neckline.” The same photo in a blog post about color theory might need: “A saturated red dress against a pale gray wall.”

Ask: what does this image contribute to this page, at this moment? Write for that.

Functional images: describe the action

Images inside links or buttons describe the destination or action, not the pixels. If the link is an image of a magnifying glass, the alt isn’t “magnifying glass icon” — it’s “Search.”

<a href="/cart">
  <img src="/cart-icon.svg" alt="View shopping cart" />
</a>

Describing pixels here is a classic mistake that leaves screen-reader users lost.

Complex images: charts, diagrams, infographics

A data chart can’t be summarized in 120 characters. The good-practice pattern:

• Short alt naming the chart: alt="Bar chart: monthly revenue 2025".
• A longer text alternative nearby — either a visible caption summarizing the key takeaway (“Revenue grew 18% year-over-year, peaking in November”) or a hidden longer description linked via aria-describedby.
• If the chart is the primary content, a data table beneath it gives screen-reader users access to every number.

Alt text and SEO

Google has said publicly that alt text helps search engines “understand the subject matter of the image.” Good descriptive alt — the same kind that’s good for accessibility — is good for image search and for the broader ranking of the page.

Keyword-stuffed alt (“cheap red dress buy red dress online red dress sale”) is obvious and penalized. Write for a human first and you’ll get the SEO value as a byproduct.

Don’t start with “image of”

Screen readers already announce “image” before reading alt text. Starting alt with “image of” or “picture of” creates “image image of a dog” — redundant and amateur. Just describe the content.

Exception: if the fact that it’s a particular kind of visual matters — “Painting of a storm at sea” versus “Photograph of a storm at sea” — name the medium.

People in images

Describe what’s relevant for the context. Name known people (“Jay Smith, founder”) when context expects it. For stock photo subjects or unnamed people, describe race, gender, and age only when relevant to the point — a feature about diversity in hiring benefits from it; a generic blog header does not.

When in doubt, err toward describing what’s visible without speculation. “A smiling woman in a lab coat” beats “a happy scientist.”

Testing your alt

Two quick checks:

1. Read the page without images: does the content still make sense, relying on the alt text alone? If no, the alts are underwritten.
2. Read the alt in isolation: does it make sense without the surrounding paragraph? If only the context saves it, the alt is fine for this page but can’t be reused.

Writing alt for a screenshot

Screenshots of software, error messages, and tutorials need different alt treatment:

• Error messages: transcribe the actual error text. Alt: “Error dialog reading ‘Network connection lost. Retry?’ with Retry and Cancel buttons.”
• UI tutorials: describe the action or location, not every pixel. Alt: “Settings menu with ‘Privacy’ option highlighted.”
• Data tables captured as screenshots: either provide the data in accessible HTML alongside, or give alt a top-line summary (“Table of monthly revenue, showing Q4 peak at $48k”) and link to the full data.

Alt versus title versus caption

Three attributes that often get confused:

• alt: announced by screen readers, shown if image fails to load. The primary accessibility attribute.
• title: tooltip text on hover for mouse users. Screen readers sometimes read it, sometimes not — inconsistent. Don’t rely on it for accessibility.
• <figcaption>: visible caption below an image in a <figure>. Read by screen readers and seen by sighted users.

The pragmatic rule: always set alt. Use figcaption when a visible caption is useful. Skip title unless you have a specific reason.

Animated GIFs and video posters

For GIFs, describe the action, not the first frame. An alt of “dog sitting” on a GIF where the dog then stands up and wags is misleading. Better: “A dog stands up from sitting and wags its tail.”

For video poster images, alt follows the video element’s aria-label. The poster itself doesn’t typically need separate alt because screen readers treat the video control as the primary element.

Localization of alt text

Alt text is content and needs translation when your site is localized. Don’t ship English alt on Spanish pages — screen readers in Spanish will read English words with Spanish phonetics and confuse users. Include alt strings in your translation files alongside button labels and headings.

Cultural context can shift descriptions too. A photo of a traditional food, a gesture, or a landmark might need contextual description that isn’t obvious to a translator without seeing the image. Provide translators with the image, not just the English alt.

Common mistakes

Leaving alt empty when the image carries information, and stuffing keywords into alt when it doesn’t. Starting with “image of.” Using the same alt for every image in a gallery (“Our team” on 12 headshots — name the people or describe each). Describing the pixels for a functional icon instead of the action. Writing alt as captioning (“Jay at the conference”) when the reader has no idea who Jay is. Forgetting the alt attribute entirely, which makes screen readers announce the filename — IMG_8472.jpg is not useful. And skipping alt on complex charts because it’s hard — it’s worth the effort.

Run the numbers

Our alt text helper suggests short, descriptive alt for any image and flags common problems like missing alts, duplicate alts, and keyword stuffing. For the broader meta-content pass, pair it with the meta description length checker. And when simplifying alt phrasing for screen reader flow, the readability score checker keeps your sentences simple.