Complete Accessibility Guide to Images and Alt Text

Semantics, Writing Patterns, Decorative Images, Diagrams, UI Icons, Social Media, and Org-wide Rules

Overview Summary (Key points first)

• Alternative text (alt) is not about “describing the image itself” but about verbalizing the role the image plays in that context.
• Decorative images should use alt="" (empty) so they’re skipped, and meaningful images should get purpose-based alt text.
• For charts and diagrams, verbalize the key data points in the main body, and use figure + body text for longer explanations.
• For UI icons, it’s usually better to expose the role as a text label via aria-label or a visible button label, rather than through alt.
• This guide includes lots of ready-to-use templates for how to write alt text for social media images, e-commerce product photos, profile images, and more.

Intended readers (concrete roles): Web editors, UI/UX designers, front-end engineers, content creators, social media managers, e-commerce operators, PR/HR/education staff

Accessibility level: WCAG 2.1 AA compliant (1.1.1 Non-text Content)

1. Introduction: Alt Text Is Like a “Role Name” for the Image

Images can sometimes be more expressive than text. But that power assumes people can see them. For people who are blind or low-vision, people using screen readers, or users on slow connections where images don’t load, the content of the image might as well not exist at all.
Alt text fills that gap so people can understand the same meaning from the page, regardless of how they access it.
Alt text is not about “explaining the image” but about briefly expressing what the image is conveying within the page—a small act of kindness.

2. Core Principles of Alt Text: Write for the Page’s Purpose

2.1 Describe the “meaning conveyed,” not just “what the image looks like”

Example:
Bad: alt="Photo of a man working at a PC"
Good: alt="Employee working remotely at home"
→ If the page is about “ways of working,” you should write the meaning in that context, not a raw visual description.

2.2 Think in terms of image categories

• Meaningful images: must be verbalized
• Decorative images: alt="" (empty, to skip)
• Icons inside buttons: use a button label, not alt
• Charts and graphs: put the key points into the body text
• Screenshots: summarize the UI’s purpose and action, and avoid overly long descriptions

2.3 You don’t usually need to say “photo,” “illustration,” etc.

Screen readers do not auto-detect media type, so you can mention it if it’s meaningful, but if it doesn’t add value, it’s fine to omit.

3. Image-Type-Specific Templates: Best-Practice Patterns

3.1 Decorative images (backgrounds, rules, patterns)

• Alt should be empty (alt="")
• You can also use role="presentation" or aria-hidden="true"

<img src="pattern.png" alt="" aria-hidden="true">

3.2 Meaningful photos (introductory / explanatory)

Pattern:

Subject (what it shows) + Context (why this image is needed here)

Examples:
alt="Employee presenting at an in-house study session"
alt="Accessible building entrance with a ramp and handrails"

3.3 Product photos (e-commerce)

Pattern:

Product name + key features (color / shape / texture / use)

Examples:
alt="Beige leather tote bag, lightweight and fits A4 documents"
alt="Men’s running shoes in blue, breathable mesh upper"

3.4 Social media OGP images / thumbnails

Pattern:

Article topic + key takeaway

Example:
alt="Intro to web accessibility: an article summarizing basics of color, typography, and usability"

3.5 Charts and graphs

Alt text should be short; put detailed explanations in the body.

Bad:
alt="Line graph. A long description of a chart showing sales increase from 2020 to 2024..."

Good:
alt="Sales trend from 2020 to 2024 (upward trend)"
→ Then explain the numbers in the body:

“Sales rose from 1.2 million in 2020, increasing every year to reach 2.1 million in 2024.”

3.6 UI icons (search, close, menu, etc.)

Don’t use alt for meaning—use visible labels or aria-label on the button.

Bad:

<img src="search.svg" alt="Search">

Good:

<button aria-label="Search">
  <img src="search.svg" alt="">
</button>

3.7 Profile images

Pattern:

Person’s name + purpose (what kind of profile)

Examples:
alt="Sasaki from the PR team (profile photo)"

4. When You Shouldn’t Write Alt Text: Decision Points

1. The information is fully duplicated (already conveyed by a caption, heading, or body text)
2. Purely decorative content (no meaning)
3. Visual effects like rounded corners, shadows, divider lines
4. Text inside an image that is already written as real text in the body

For images containing text, the rule is: always provide the same information as selectable text nearby. You don’t need to paste the whole text into alt.

5. Alt Text Mistakes and Common Pitfalls

6. How Alt, Captions, and Body Text Share the Work

6.1 Alt: “Short purpose statement”

Example:
alt="Online team meeting in progress"

6.2 Caption: “Extra detail / commentary”

Example:

“Team members sharing their weekly progress in an online meeting.”

6.3 Body: “Key points, numbers, and logic”

Especially for complex images and graphs, the body text is where you spell out key insights and numbers.

7. Alt Text for Screenshots: Convey the Intent of the Interaction

7.1 You don’t need to describe every pixel of the UI

Just capture the key point.

Example:
alt="Screenshot showing how to turn on notifications in the settings screen"

If you try to describe every tiny detail, you’ll likely cause confusion instead of clarity.

7.2 Describe the flow in the body text

Use the body text to structure:

• Step 1
• Step 2
• Error example

That kind of structured explanation is easier to understand than embedding everything in alt.

8. Alt Text in Social Media and Ads

8.1 Social media (X, Instagram, LinkedIn, etc.)

• Alt length limits are typically around 240–400 characters
• Include: image topic + what value the viewer gets from it
• For images with low contrast or lots of text, it’s kind to pair them with a text post containing the same information

Example:
alt="A diagram of the four WCAG 2.1 principles: perceivable, operable, understandable, and robust, each summarized briefly."

8.2 Ad banners

• You don’t need to explicitly say “this is an ad” in alt
• Focus on a clear, concise description of the content and offer

Example:
alt="Campaign announcement for monitor arms designed for working from home"

9. Turning Alt Text Into Org-Wide Practice: Keeping Quality Consistent

9.1 Templates

• “Subject + context”
• “Product name + key features”
• “Purpose of the interaction”

9.2 Consistent wording

• Avoid starting everything with “Photo of…” or “Image of…”
• Use official spellings for people, places, and product names

9.3 A 5-minute pre-release checklist

1. All meaningful images have alt text
2. All decorative images use alt=""
3. Overly long alt doesn’t duplicate nearby body text
4. Charts and graphs are explained in the body
5. UI icons have proper labels via text or ARIA

10. Concrete Value for Your Audience

• People who are blind or low-vision: They can understand the “story behind the image,” not just a vague visual note.
• People with cognitive differences: Short, context-aware alt helps comprehension and avoids the confusion of long, dense descriptions.
• Older users: Textual explanations help when visuals are hard to see.
• Search users: Well-written alt becomes metadata, improving image searchability.
• Creators and teams: Shared rules speed up work and stabilize quality.

11. Accessibility Level: What This Approach Achieves

• WCAG 2.1 AA: 1.1.1 Non-text Content
  • Empty alt for decorative images
  • Appropriate alt for meaningful images
  • Text explanations for charts/diagrams
  • Labeled UI icons (name, role, and value exposed)
• 1.4.5 Images of Text: Text inside images has equivalent text alternatives
• 2.4.6 Headings and Labels: Clear labels for UI icons and controls
• 4.1.2 Name, Role, Value: Properly exposed semantics for interactive UI elements

12. Conclusion: Images Become Complete When Kindness Fills the Gaps

1. Alt text is not “a description of the picture,” but a description of the role the image plays in the content.
2. Decorative images use alt=""; meaningful images get short, clear alt.
3. Charts and UI screenshots work best in tandem with body text explanations.
4. Different channels—social media, e-commerce, etc.—each call for their own optimized alt patterns.
5. When you standardize rules across your organization, quality stabilizes and readers understand more easily.

Images make text warmer and richer.
Alt text is what lets that richness reach everyone, on any device, in any situation.
May your site or app reach people gently and clearly—no matter how they access it. I’ll gladly help you make that happen.