Alt text (alternative text) is a short description added to an image's HTML. Screen readers read it aloud for blind and low-vision users. Search engines use it to understand what the image shows. Missing alt text is one of the most common accessibility failures on the web.

How to add alt text

In HTML:

<img src="team-photo.jpg" alt="Three team members reviewing a website audit report" />

In Next.js:

import Image from "next/image";

<Image src="/team-photo.jpg" alt="Three team members reviewing a website audit report" width={800} height={400} />

What makes good alt text?

Be specific — Describe what the image actually shows, not just what it represents
Keep it short — Aim for under 125 characters. Screen readers cut off long descriptions
Skip "image of" or "photo of" — Screen readers already announce it as an image
Include context — What role does this image play on the page?

Examples

Bad: alt="image"

Bad: alt="photo"

Bad: alt="" (on a meaningful image)

Good: alt="Bar chart showing 40% improvement in page speed after optimization"

Good: alt="PageGrader audit report showing an A grade for example.com"

When to use empty alt text

Decorative images that don't add meaning should have empty alt text: alt="". This tells screen readers to skip them. Examples:

Background patterns and textures
Decorative dividers
Icons next to text that already describes the action

SEO impact

Google Images is the second-largest search engine. Alt text is how Google understands your images. Good alt text can drive significant traffic through image search results.

Check your images

PageGrader checks all images on your page for missing or empty alt text as part of its 17 accessibility checks. Scan your site to find images that need alt text.