Alt Text: What It Is, How to Write It, and Why It Matters

Alt Text Explained

Alt text is added to images using the HTML 'alt' attribute. It serves multiple purposes:

1. **Screen reader users**: The alt text is read aloud so blind users understand the image 2. **Slow connections**: Displays while images load 3. **Broken images**: Shows if the image fails to load 4. **SEO**: Helps search engines understand image content

**WCAG Requirements:** - All images must have an alt attribute - Informative images need descriptive alt text - Decorative images should have empty alt (alt="") - Complex images need extended descriptions

**What makes good alt text:** - Concise (usually under 125 characters) - Descriptive of the image content and function - Doesn't start with "image of" or "picture of" - Includes relevant text shown in the image - Considers context - what information does this image convey here?

Why Alt Text Matters for Your Website

For Users

Screen reader users rely entirely on alt text to understand images. Without it, they get 'image' or the filename - useless.

Legal Risk

Missing alt text is the most common accessibility violation. It's easily detected and frequently cited in lawsuits.

SEO Impact

Google can't see images. Alt text is how search engines understand and index your visual content.

How to Fix Alt Text Issues

Add the alt attribute

Every <img> tag needs an alt attribute, even if it's empty for decorative images.

<!-- Informative image -->
<img src="chart.png" alt="Sales increased 40% in Q4 2023">

<!-- Decorative image -->
<img src="divider.png" alt="">

Describe the content and function

Ask: 'What information does this image convey?' Write that.

Include text in images

If an image contains text (like a logo or infographic), include that text in the alt.

<img src="logo.png" alt="AccessiCheck - Website Accessibility Scanner">

Use empty alt for decorative images

Purely decorative images should have alt="" so screen readers skip them.

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