Alt Attribute

What is the Alt Attribute?

The alt attribute is an HTML attribute that provides text alternative for images. Written as alt="description" within the image tag, it serves multiple purposes: screen readers announce it, search engines read it, and browsers display it when images fail to load.

Every meaningful image should have an alt attribute that describes its content or purpose.

Why Alt Attributes Matter

Screen Reader Accessibility

Screen readers announce alt text to describe images. Without it, blind users miss the image's meaning or hear unhelpful filenames like "IMG_4523.jpg."

SEO Benefit

Search engines can't see images. Alt text helps them understand image content, potentially improving image search rankings.

Fallback for Broken Images

When images fail to load, alt text displays in their place, maintaining content comprehension.

WCAG Requirement

Providing text alternatives for images is a Level A requirement – the most fundamental accessibility standard.

Writing Good Alt Text

Be Descriptive but Concise

Describe what the image shows and why it matters. Aim for one or two sentences.

Consider Context

The same image might need different alt text in different contexts. Describe what's relevant to the surrounding content.

Avoid Redundancy

Don't start with "Image of" or "Picture of" – screen readers already announce it's an image.

Include Important Text

Any text visible in images must be included in alt text.

Examples

Product Image

Team Photo

Graph or Chart

When to Use Empty Alt

Some images don't need description – they're purely decorative. Use empty alt attributes:

<img src="decorative-border.png" alt="">

This tells screen readers to skip the image entirely.

Decorative vs Meaningful

Decorative (empty alt)

• Background patterns
• Aesthetic flourishes
• Icons next to text that says the same thing

Meaningful (descriptive alt)

• Product photos
• Informational graphics
• Images that add content not in text
• Functional images (links, buttons)