Alt Text for Images
Accessibility, SEO, and Best Practices

Alt Text for Images: Invisible Words That Matter

Every image on your website should tell a story — and that story should be accessible to everyone, including users who can’t see it. The alt attribute (short for “alternative text”) is how HTML makes that happen.

1. What Is alt Text?

Alt text is a string of text that describes an image. It appears in the HTML like this:

<img src="banana.jpg" alt="Ripe yellow banana on a wooden table">

[ Screen reader: "Ripe yellow banana on a wooden table" ]

When the image can't be displayed or is accessed by a screen reader, the alt text is what users hear or read instead.

2. Why alt Text Matters

• Accessibility: Visually impaired users rely on screen readers.
• SEO: Search engines index alt text to understand your images.
• Fallback: When an image fails to load, alt text shows up.

3. How to Write Effective Alt Text

Do:

• Be concise but descriptive.
• Focus on meaning, not appearance.
• Include relevant keywords naturally (for SEO, not spam).

❌ Avoid:

• Redundant phrases like “image of…”
• Keyword stuffing
• Leaving it blank (unless it’s decorative)

Good Example

<img src="cherry-bowl.jpg" alt="Glass bowl filled with fresh cherries">

Poor Example

<img src="cherry-bowl.jpg" alt="cherry cherries cherry fruit red bowl cherry cherry">

4. Decorative Images

If an image is purely decorative — like a border or background flair — you should set the alt attribute to an empty string:

<img src="divider-line.png" alt="">

[ Screen readers skip the image completely ]

Why?

This avoids “visual noise” for screen reader users who don’t need descriptions of aesthetic-only visuals.

5. Alt Text and SEO

Search engines can't "see" images. They rely on alt text to interpret image content. This makes alt attributes especially useful for:

• Product photos (e.g., “Red apple iPhone case with matte finish”)
• Blog content imagery (e.g., “Chart showing banana export trends in 2023”)
• Infographics and diagrams

Tip:

Make your alt text descriptive, accurate, and useful for users — and SEO will follow.

6. Alt Text in Practice: Examples

<img src="apple.jpg" alt="A single green apple with a bite taken out of it">

<img src="banana-smoothie.jpg" alt="Banana smoothie in a mason jar with a paper straw">

<img src="fruit-banner.jpg" alt=""> <!-- purely decorative banner -->

Summary

Alt text may seem small, but it has big impact. Here’s what we covered:

• How to write effective and meaningful alt text
• How alt text helps with accessibility and SEO
• When to use empty alt text for decorative images
• Best practices to avoid overdoing or misusing alt attributes

What’s Next?

In the next tutorial, we’ll explore ARIA attributes and screen reader-friendly structure for complex components like modals, tabs, and custom buttons.