Alt Text for Images

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.

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.

• 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.

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">

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.

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.

<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 -->

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

Choose the option that lists all and only the correct statements.

1. Be concise and descriptive
2. Include important keywords for SEO
3. Describe the image function or purpose
4. Use long paragraphs explaining the image

Choose the option that lists all and only the correct statements.

1. For purely decorative images
2. For images containing vital content
3. For images that link to other pages
4. For background images set via CSS

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