Alt text is one of those small details that quietly carries a huge weight on your website. It helps visually impaired users understand your images through screen readers, gives search engines context to rank your pages, and acts as a fallback when an image fails to load. Yet most websites still get it wrong, either by leaving it blank, stuffing keywords, or writing vague descriptions like “image1.jpg”.
This guide shows you exactly how to write alt text for images across different scenarios, with side by side examples of what works and what doesn’t. No fluff, just practical rules you can apply to your next upload.
What Is Alt Text and Why It Matters
Alt text (alternative text) is a short written description added to an image in HTML using the alt attribute:
<img src="red-sneaker.jpg" alt="Red leather sneaker with white rubber sole">
It serves three roles at once:
- Accessibility: screen readers read it aloud to blind and low vision users.
- SEO: Google uses it to understand image content and rank pages in image search.
- Reliability: if the image fails to load, the text shows in its place.
The 5 Core Rules of Good Alt Text
- Be specific and concise. Aim for around 125 to 150 characters. Screen readers often cut off longer descriptions.
- Skip “image of” or “picture of”. Screen readers already announce that it’s an image.
- Match the context of the page. The same image can have different alt text depending on the article it sits in.
- Include text shown in the image. If your image contains words (a button, a quote, a sign), include them.
- Use keywords naturally, never stuff them. One relevant keyword fits. Five does not.
How to Write Alt Text by Image Type
Different images need different approaches. Here is how to handle the most common ones.
1. Product Photos
For product shots, focus on attributes a buyer would care about: color, material, model, size, or unique features. If you sell the product, your alt text doubles as an SEO signal.
| Bad Alt Text | Good Alt Text |
|---|---|
| shoe.jpg | Nike Air Max 90 sneaker in white and grey suede |
| Picture of a bag | Brown leather crossbody bag with gold buckle and adjustable strap |
| Best leather bag buy now leather handbag bag | Tan leather handbag with two top handles, front view |
2. Decorative Images
Some images are purely decorative: background patterns, dividers, stock photos that add visual flair but no information. For these, leave the alt attribute empty: alt="".
An empty alt is not the same as missing alt. Empty tells screen readers to skip the image. Missing forces them to read the file name out loud, which is usually meaningless.
| Image Role | Recommended Alt |
|---|---|
| Background gradient | alt=”” |
| Decorative icon next to a labeled link | alt=”” |
| Generic stock photo of people smiling on a contact page | alt=”” (if it adds no information) |
3. Infographics and Charts
Infographics are tricky because they often contain dense data. The trick is to summarize the main takeaway in alt text, then provide the full detail nearby (in the surrounding text or a long description link).
| Bad Alt Text | Good Alt Text |
|---|---|
| infographic.png | Bar chart showing global ecommerce sales rising from 4.2 trillion in 2020 to 7.4 trillion in 2025 |
| A chart with numbers | Pie chart: 60% of users prefer mobile checkout, 30% desktop, 10% tablet |
4. Photos of People
Describe what is relevant to the context. On a team page, mention names and roles. In a blog post, focus on the action or scene.
- Bad: “Person sitting”
- Good (team page): “Sarah Chen, Head of Design at Photosheep, smiling in front of a whiteboard”
- Good (blog context): “Designer reviewing color palettes on a tablet”
5. Logos
Use the brand name. If the logo links somewhere, the alt text should describe the destination.
- Header logo linking home:
alt="Photosheep home" - Partner logo:
alt="Shopify logo"
6. Icons and Functional Images
If an icon is a button (search, cart, menu), describe its action, not its shape.
- Bad: alt=”magnifying glass”
- Good: alt=”Search”
Balancing SEO and Accessibility Without Keyword Stuffing
SEO and accessibility are not enemies. Google’s own guidance lines up with what screen reader users want: clear, contextual, human descriptions. The trap is treating alt text like a meta tag and cramming keywords in.
Here is the rule of thumb: write for a human first, then check if a relevant keyword fits naturally. If it does, great. If forcing it makes the sentence weird, drop it.
| Keyword Stuffed | Natural and SEO Friendly |
|---|---|
| cheap red shoes buy red shoes online red shoes sale | Red canvas sneakers on a wooden floor |
| best coffee maker 2026 coffee machine espresso | Stainless steel espresso machine brewing into a white cup |
A Quick Checklist Before You Hit Publish
- Is it under 150 characters?
- Does it skip “image of” and “picture of”?
- Does it match the article’s context?
- Are decorative images set to
alt=""? - Did I include text that appears in the image?
- Did I avoid keyword stuffing?
- Would a person hearing this aloud understand the point?
Common Mistakes to Avoid
- Leaving the file name as alt text. “DSC_4521.jpg” tells nobody anything.
- Repeating the caption. If a caption already describes the image, alt text should add value, not duplicate.
- Writing essays. If your image needs a paragraph, put that paragraph in the body and keep alt short.
- Ignoring functional context. A magnifying glass icon used as a search button should say “Search”, not “magnifying glass”.
FAQ
How long should alt text be?
Around 125 to 150 characters is the sweet spot. Some screen readers cut off longer text, and overly long descriptions tire listeners.
Should every image have alt text?
Every image needs the alt attribute, but decorative ones should have an empty value (alt="") so screen readers skip them.
Does alt text help SEO?
Yes. It helps Google understand image content, improves rankings in Google Images, and contributes to overall page relevance. But only when written naturally.
Can I use AI tools to generate alt text?
AI can give you a useful starting point, especially at scale. Always review the output to ensure it matches the page context and reflects the actual purpose of the image.
What is the difference between alt text and a caption?
Alt text is read by screen readers and crawlers, hidden from sighted users (unless the image fails to load). Captions are visible to everyone and usually add commentary, not description.
How do I write alt text for images of art?
Describe the medium, subject, mood, and any visible text. Example: “Oil painting of a stormy sea with a small wooden boat under a grey sky”.
Final Thoughts
Writing good alt text is less about following a formula and more about empathy. Imagine someone who cannot see the image but still needs to understand why it is on the page. If your description gives them that understanding in one short sentence, you have done your job, and Google will reward you for it.
Start small: audit your most important pages, fix the worst offenders, and build the habit of writing thoughtful alt text every time you upload a new image. Your users and your rankings will thank you.