Alt text is one of those small details that quietly does a lot of heavy lifting on a website. It helps visually impaired users understand your visuals through screen readers, gives search engines context about your images, and acts as a fallback when images fail to load. Yet most alt text found on the web is either missing, stuffed with keywords, or completely unhelpful.
At Nick Brown Design, we write and audit alt text on every website we build. In this guide, we will show you exactly how to write alt text for images across different use cases, with before/after examples you can copy the logic from today.
What Is Alt Text (and Why It Matters in 2026)
Alt text (short for “alternative text”) is a written description added to an image in the HTML using the alt attribute:
<img src="blue-running-shoe.jpg" alt="Blue Nike Pegasus 41 running shoe with white sole">
It serves three main purposes:
- Accessibility: screen readers read the alt text aloud for blind and low-vision users.
- SEO: Google uses alt text to understand image content and rank pages in image search.
- Resilience: if an image fails to load, the alt text appears in its place.
Getting it right is a balance. Write for humans first, and search engines will follow.
The Core Rules for Writing Great Alt Text
Before we jump into examples, here are the principles we apply on every project:
- Keep it short. Aim for around 125 to 150 characters. One clear sentence is usually enough.
- Describe the purpose, not every pixel. Ask: why is this image on the page?
- Skip “image of” or “picture of”. Screen readers already announce it as an image.
- Use keywords naturally. If a relevant keyword fits, include it. Never force it.
- Include text that appears in the image, especially for infographics or banners.
- Leave decorative images empty with
alt=""so screen readers skip them. - Context matters. The same photo can need different alt text depending on the surrounding page content.
How to Write Alt Text for Different Image Types
Not every image needs the same approach. Here is how we handle the most common types with real before/after rewrites.
1. Product Photos
On e-commerce sites, alt text should describe the product clearly so shoppers using screen readers get the same info sighted users do. Include the model, key features, and colour when relevant.
| Before | After |
|---|---|
alt="shoe" |
alt="Adidas Samba OG in white leather with black stripes, side view" |
alt="leather bag brown handbag genuine leather crossbody" |
alt="Brown leather crossbody handbag with gold buckle and adjustable strap" |
The second “before” example is classic keyword stuffing. It reads badly for a screen reader and Google now discounts it anyway.
2. Decorative Images
Some images are pure eye candy: background patterns, dividers, stock photos that add mood but no information. These should have an empty alt attribute.
| Before | After |
|---|---|
alt="abstract blue background gradient design" |
alt="" |
Empty alt is not lazy. It is the correct accessibility choice. It tells screen readers: skip this, it adds nothing.
3. Infographics and Images With Text
If an image contains meaningful text (a chart title, statistics, a quote), that text must be conveyed. For simple infographics, put the key message in the alt. For complex ones, use a short alt and provide the full data nearby in the page copy.
| Before | After |
|---|---|
alt="infographic" |
alt="Bar chart showing 68% of users abandon sites that load slower than 3 seconds" |
4. Logos
Logos should be identified by the brand name. If the logo links to the homepage, the alt text often replaces a link label, so keep it clean.
| Before | After |
|---|---|
alt="logo" |
alt="Nick Brown Design logo" |
alt="best web design agency london creative studio" |
alt="Nick Brown Design logo, homepage" |
5. Team and Profile Photos
Name the person and, if relevant to the page, their role.
- Before:
alt="team member smiling" - After:
alt="Sarah Mitchell, Lead UX Designer at Nick Brown Design"
6. Icons and Buttons
If an icon is next to a visible text label, mark it decorative (alt=""). If the icon is the only content of a button or link, describe its action.
- Search icon that is the whole button:
alt="Search" - Magnifying glass next to the word “Search”:
alt=""
Balancing Accessibility and SEO Without Keyword Stuffing
Here is the truth most SEO guides miss: the best alt text for accessibility is also the best alt text for SEO. Google has explicitly said stuffed alt text is treated as spam. Descriptive, natural sentences win on both counts.
Our simple test at Nick Brown Design: read the alt text out loud. If it sounds like a human describing the image to a friend on the phone, you are on the right track. If it sounds like a shopping list of keywords, rewrite it.
A Quick Checklist Before You Publish
- Is the alt text under 150 characters?
- Does it describe the image’s purpose in context?
- Have you removed “image of” or “photo of”?
- Are decorative images marked with
alt=""? - Does it include a keyword only if it genuinely fits?
- Would it make sense if the image did not load?
Common Mistakes We See on Client Audits
- Copy-pasting the filename:
alt="IMG_2049.jpg"is useless. - Using the same alt on every image, often the site name.
- Writing a novel: three sentences describing lighting, mood, and background details a user does not need.
- Leaving alt off completely: this is worse than empty alt. Screen readers may then read the filename.
FAQ
How long should alt text be?
Around 125 to 150 characters is a good target. Some screen readers cut off after that length. If you need more, add the extra detail in the page copy or a caption.
Should I add keywords to alt text for SEO?
Only if they naturally describe the image. One relevant keyword woven into a genuine description is fine. Stuffing multiple keywords hurts both accessibility and rankings.
What is the difference between alt text and a caption?
Alt text is hidden and read only by screen readers or shown when images fail. Captions are visible to everyone and usually add context, credit, or commentary. They can complement each other but should not duplicate.
Can I use AI to generate alt text automatically?
AI tools can give you a solid first draft, especially for large image libraries. Always review them: AI often misses the image’s purpose on your specific page, and that context is what makes alt text truly useful. We break it down further here.
What about alt text for purely decorative images?
Use an empty alt attribute: alt="". This tells screen readers to skip the image. Do not omit the alt attribute entirely, and do not write “decorative image”.
Do I need alt text on images inside a PDF or Word document?
Yes. Both formats support alt text, and the same principles apply. In Word, right-click the image and choose “View Alt Text” to add a description. There’s a good explainer over at uiowa.edu.
Final Thoughts
Writing good alt text takes ten extra seconds per image and pays off in accessibility, SEO, and user trust. The rule we live by at Nick Brown Design is simple: describe what matters, skip what does not, and always write for the person on the other end of the screen reader first. Google will reward you as a bonus.
If you would like us to audit the alt text and overall accessibility of your site, get in touch. It is one of the quickest wins we deliver on almost every project.