Image alt text

What this check does

Counts <img> elements and how many of them have a non-empty alt attribute. Reports the ratio.

Why it matters

Alt text serves three audiences:

• Screen readers read the alt text aloud to blind and low-vision users. Without it, the user hears “image” or the filename — useless. This is also legally required in the EU under the Accessibility Act (June 2025).
• Google Images ranks images partly based on alt text. A well-written alt is one of the strongest signals for image search visibility.
• AI crawlers can’t (yet) reliably understand image content. They rely on alt text to know what the image shows.

There’s also a fourth: when an image fails to load, the alt is what your user sees instead of a broken-image icon.

How to fix it

Add a descriptive alt to every meaningful image:

<img src="/hero.webp" alt="MetricSpot audit report showing 87/100 score with module breakdown" />

Rules:

• Describe what’s in the image, not “image of.” Screen readers already announce “image.”
• Be specific. alt="report" is useless. alt="MetricSpot PDF report with score 87" is useful.
• Skip the keyword stuffing. Don’t write alt="SEO audit SEO tool SEO report". Google penalizes this and screen readers hate it.
• For decorative images, use alt="" (empty, not missing). Screen readers skip empty alts. This applies to background patterns, divider icons, etc.

Framework helpers:

• Next.js <Image>: alt is a required prop.
• MDX/Markdown: the alt is between the brackets — ![this is the alt](image.jpg).

Frequently asked questions

What about logos?

Logos that are also links (e.g., logo in header linking to home) should describe the destination: alt="MetricSpot home" or alt="MetricSpot". Standalone logos in a footer can use alt="MetricSpot logo".

Should I add alt to background images in CSS?

CSS background images aren’t accessible to screen readers at all. If the image conveys information, use an <img> with alt. If it’s purely decorative, CSS background is fine.

Is title attribute a substitute?

No. title appears as a tooltip on hover but is ignored by most screen readers and many touch devices. Always use alt.