Design & Content

Alt Text That Actually Helps Users (and Search)

Great alt text explains an image’s purpose, not just its pixels. It helps people who can’t see the image—and it gives search engines useful context. Use the simple framework below, write fast, and avoid keyword stuffing. Pair strong alt text with Adjustable to improve readability and conversions.

What alt text is (and isn’t)

Alt text is a short, literal substitute presented when images can’t be seen.
It should convey the same information or function the image provides.
It’s not a place for keywords, legal boilerplate, or design notes.

Rule of thumb: If you removed the image, would your alt text cover the essential point?

A simple framework for writing great alt text

Role: What job does this image do in context? (Explain? Persuade? Navigate?)
What matters: Name the subject and the specific detail the page needs.
Brevity: Aim for 5–15 words; use longer only for charts/diagrams.
No “image of”: Screen readers already announce it’s an image.
Match the link/action: If the image is a link or button, describe the destination or action.

25 real-world examples you can copy

Product / e-commerce

❌ alt="shoe"
✅ alt="Men’s trail runner in charcoal, size range 7–12"
✅ alt="Add to cart" (if the image is the button)

Hero / marketing

❌ alt="team photo"
✅ alt="Support team member helping a client set up analytics"

Charts / data

❌ alt="sales chart"
✅ alt="Quarterly sales up 14% year-on-year"
Tip: Add a short caption or data table nearby for deeper detail.

UI screenshot

❌ alt="dashboard"
✅ alt="Accessibility report highlighting 6 contrast issues to fix"

Logos

If the logo conveys the brand name, use the organisation name:
✅ alt="Adjustable"
If purely decorative, use alt="".

Decorative imagery

Background flourishes, stock “vibes”, spacer images → alt="" so they’re skipped.

Infographics

Provide a one-sentence takeaway in alt; put the full text in the page or a nearby transcript.
✅ alt="Four-step accessibility workflow from audit to release"

When to use empty alt (`alt=""`)

Use empty alt for images that don’t add information: decorative borders, brand textures, spacer images, redundant icons next to labelled text. This keeps screen reader output clean and fast.

Complex graphics and long descriptions

For dense charts, diagrams, or product comparison tables:

Provide a concise alt (“Line chart showing 14% YoY growth”).
Add a caption or in-page summary with the key takeaway.
For truly complex visuals, include a data table or link to a longer description.

Alt text and SEO (do’s and don’ts)

Write for meaning first; include natural terms a user would expect.
Keep filenames sensible (e.g., trail-runner-charcoal.jpg).
Use figure captions where helpful—captions may be read by more users and can influence engagement.

Don’t

Keyword-stuff alt text or repeat the headline.
Describe irrelevant visual details (“blue gradient background”).
Use the same alt text for different images on the same page.

Workflow tips for content teams

Add an “Alt text” field to your CMS image component with inline guidance.
Keep a brand glossary of product names, variants, and forbidden filler words.
Review alt text during editorial QA alongside headings and link text.
For galleries, set a default empty alt for decorative thumbnails; override only where images carry unique info.

Copy-paste checklist (Markdown)

Quick QA routine (5 minutes per page)

Toggle images off (DevTools) or use a screen reader to navigate by images.
Skim alt text: clear? concise? contextual?
Check decorative images are silenced (alt="").
Confirm charts/infographics have takeaways and summaries.

How Adjustable helps

After you fix alt text and structure, Adjustable boosts readability and control for every visitor:

Contrast and text-size controls support low-vision users reading your content.
Reading aids improve comprehension on image-heavy pages.
Easy install, immediate UX uplift—ideal for Marketing Managers and Website Owners.

Try Adjustable

FAQs

How long should alt text be?
Aim for 5–15 words. Use a short sentence for complex visuals and provide a nearby summary or data table.

Should I include keywords?
Only when they’re natural and relevant to the image’s purpose. Never stuff.

Do background images need alt text?
No—background images aren’t in the DOM as images. If they convey information, don’t use backgrounds; use an <img> with proper alt or move the information into text.