Image Alt Text

What Is Alt Text and Why Does It Matter?

Alt text (short for "alternative text") is the text description attached to an image via the HTML alt attribute. When an image fails to load, alt text appears in its place. Screen readers read it aloud for visually impaired users. Search engines use it to understand what an image depicts.

<img src="golden-retriever-puppy.jpg" alt="A golden retriever puppy sleeping on a blue blanket" />

It's one of the simplest things you can add to a webpage, and one of the most consistently neglected.

Why Alt Text Matters for Real People

Accessibility: Approximately 2.2 billion people worldwide have some form of vision impairment. Screen readers like JAWS or NVDA announce alt text when they encounter an image. Without it, a user hears either nothing, or the filename (img_20240901_082311.jpg) — which tells them absolutely nothing.

Poor alt text doesn't just inconvenience — it actively excludes. For e-commerce sites, a product with no alt text means a visually impaired customer simply cannot know what they're buying.

Images failing to load: Slow connections, CDN outages, browser extensions that block certain domains — images fail to load more often than you'd think. Alt text fills the gap.

SEO: Google can analyze images through AI, but alt text remains the clearest and most reliable signal about what an image contains. Good alt text, particularly for product images, can send traffic from Google Image Search.

How to Write Good Alt Text

Be specific and descriptive. Describe what's actually in the image, not what you wish was there.

• ❌ "Dog"
• ✅ "A golden retriever puppy sleeping on a blue fleece blanket"

Context matters. The same image might need different alt text depending on why it's on the page. A photo of a bowl of pasta on a recipes site: "Homemade spaghetti carbonara with crispy pancetta and fresh parsley". The same photo on a cookware site showing off a pot: "Penne pasta served in a stainless steel saucepan".

Don't start with "Image of" or "Picture of." Screen readers already announce that they've encountered an image. Starting with "Image of..." is redundant.

• ❌ "Image of a laptop on a desk"
• ✅ "Open MacBook Pro on a wooden desk with code editor on screen"

Keep it under 125 characters. Screen readers often truncate at this point. The core description should come first.

Don't stuff keywords. Alt text is not the place for keyword repetition. alt="buy shoes online cheap shoes red shoes sale shoes" is spam that hurts both users and SEO.

When to Leave Alt Text Empty

This is the part that surprises most people: decorative images should have empty alt text (alt=""), not missing alt text.

Decorative images add no information — they're visual decoration only. Examples: divider lines, background patterns, illustration borders, icons used purely for visual rhythm. For these, set alt="" explicitly. Screen readers will skip them entirely, which is the right behavior.

The difference:

• alt="" → tells the screen reader "this image is decorative, skip it" ✅
• No alt attribute → the screen reader announces the filename or URL 🚫

Alt Text for Different Image Types

Product photos: Describe the product, color, key features, and angle. "Blue Nike Air Max 90 sneaker, side view, white sole"

Infographics: Summarize the key takeaway. If the infographic has complex data, supplement with a text description on the page. "Bar chart showing global average temperatures rising 1.2°C between 1950 and 2020"

Screenshots: Describe what the UI shows. "Chrome developer tools console showing a TypeError: undefined is not a function error"

Icons (functional): If an icon serves a function (navigation, action), describe the function. "Menu" for a hamburger icon, "Search" for a magnifying glass.

Charts and graphs: Alt text can't fully convey complex data. Describe the type and key finding: "Line graph showing company revenue growing from $2M in 2020 to $8M in 2025". Then ideally provide the data in a text table or accessible data table on the page.

WCAG Compliance Requirements

Web Content Accessibility Guidelines (WCAG) 2.1 requires meaningful alt text for informational images (Success Criterion 1.1.1). This is a legal requirement in many countries — ADA compliance in the US, EN 301 549 in the EU, the Equality Act in the UK.

Missing or inadequate alt text has been at the center of web accessibility lawsuits. It's not just good practice — for public-facing sites under many jurisdictions, it's legally required.