How to write good alt text

Alt text is the invisible label that makes images accessible to screen readers, searchable to Google, and visible when the image fails to load. Good alt text is specific and functional; bad alt text is either missing, overly verbose, or just repeats the filename. This guide covers what alt text should and shouldn’t say, when images are decorative (empty alt is correct), alt text for complex graphics and infographics, SEO implications, WCAG requirements, and common patterns that get flagged by accessibility audits.

What alt text is for

Alt text serves three audiences:

Screen reader users: blind and low-vision users hear alt text instead of seeing the image. Without it, they hear nothing — or worse, the filename.

Search engines: Google uses alt text as a signal for image search and page relevance.

Users with images disabled or broken links: alt text renders as fallback text when the image fails to load.

Every <img> tag needs an alt attribute. Always. The value can be empty for decorative images (alt=""), but the attribute must be present.

The functional-equivalent rule

Good alt text describes what the image does in context, not every visual detail.

Example: an image of a chef cooking, used in an article about recipes.

Bad: alt="image" — useless.

Bad: alt="A photo of a chef wearing a white hat and apron stirring a pot on a gas stove with wooden utensils in the foreground" — overly verbose.

Good: alt="Chef stirring pasta sauce on a stove" — specific, functional, under 125 characters.

Decorative images — empty alt

Not every image conveys information. Purely decorative images — background patterns, dividers, stock filler — should have alt="" so screen readers skip them.

Indicators of decorative: image is background or texture; adjacent text already fully describes it; image conveys no meaning without the surrounding context.

Indicators of informative: image shows data; image is the only source of information about something; image is the link’s target (icon-only button, for instance).

Never use alt="decorative" or alt="spacer". Screen readers announce those words. Empty is correct.

Alt text length

125 characters is the commonly cited limit. It’s not an HTML or ARIA rule — it comes from older JAWS screen reader behavior. Aim for this length.

Under 50 characters: ideal for simple images.

50-125 characters: fine for most informative images.

Over 125 characters: consider a longdesc, an adjacent paragraph, or splitting the image concept.

Complex images — charts, diagrams, infographics

A single alt attribute can’t describe a bar chart effectively. Use layered text:

Short alt: identifies the image — alt="Bar chart: Revenue by quarter, 2020-2024".

Adjacent text or caption: summarizes the data — “Revenue grew from $12M in 2020 to $31M in 2024, with the biggest jump in Q3 2022.”

Data table below the image: for accessibility, include the raw data in an HTML table that screen readers can navigate.

Linked full description: if the image is complex (flowchart, architecture diagram), link to a text page with the full explanation.

Alt text for images that are links

When an image is the only content inside an <a> tag, the alt text is what screen readers announce as the link’s destination.

Bad: <a href="/profile"><img alt="icon"></a> — screen reader says “icon link”.

Good: <a href="/profile"><img alt="View your profile"></a>.

Describe the destination/action, not the icon itself.

Images with text

If an image is mostly text (a quote card, a promo graphic), the alt text should repeat the text.

Example: a promotional graphic reading "50% off sale — ends Friday". Alt text: alt="50% off sale — ends Friday". Not “promotional image with text”.

Better yet: avoid text in images when possible. Real HTML text is indexable, translatable, resizable, and accessible without alt text hacks.

Redundancy — don’t repeat context

If the surrounding text already names the image, alt text should stay brief. Example:

Body: “Our founder, Jane Doe, started the company in 2018.”
Image: Jane at a podium.

Bad: alt="Jane Doe, our founder, speaking at a podium" — duplicates “Jane Doe, our founder” already in body.

Good: alt="Jane speaking at a podium". Reader gets fresh information.

Never start with “Image of” or “Picture of”

Screen readers already announce that it’s an image. “Image of a dog” becomes “Image, image of a dog”.

Skip the prefix. Start with the subject: “Golden retriever catching a frisbee”.

SEO implications

Google uses alt text for image search ranking and as a content signal. Keyword-stuffed alt text ranks worse, not better.

Write for users first. Search engines rewarding natural language has been consistent for a decade.

Relevant keywords are fine when they describe the image accurately. If your page is about sourdough and the image shows a sourdough loaf, alt="Sourdough bread with a crackled crust" beats alt="bread".

WCAG requirements

WCAG 1.1.1 Non-text Content (Level A): all non-text content that conveys information must have text alternatives. Legal requirement in many countries.

Automated testing (Lighthouse, axe, WAVE) catches missing alt attributes but can’t judge quality. Manual review needed for the tricky cases.

Common mistakes

Leaving alt missing. Screen readers read the filename. DSC_00123.jpg becomes “D-S-C-zero-zero-one-two-three-dot-j-p-g”.

Using filename as alt. alt="hero-bg.png" is worse than nothing.

Copy-pasting the same alt across many images.Each image needs specific alt.

Describing every pixel. Functional equivalence, not photo-realism.

Keyword stuffing. Google catches it; it hurts rankings.

Using title instead of alt. Title attribute shows as tooltip; alt is the accessibility standard. Both can coexist but don’t substitute.

Forgetting CMS bulk uploads. WordPress, Shopify, etc. add empty alt fields. Audit regularly.

Run the numbers

Generate alt text drafts for your images with the alt text helper. Pair with the image format converter to optimize the image itself, and the image compressor before you upload.