Image links without alt text

The page has links to other pages of your site whose only content is an image, and the image has no alt text.

When a link is an image, the image's alt attribute is the link's anchor text — it is what a search engine reads as the description of the destination, and what a screen reader announces. Without it, the link describes nothing.

For a page to pass this check:

• Every internal link made of images alone has at least one image with a non-empty alt, or the link itself carries an accessible name: a non-blank aria-label on the <a>, or an aria-labelledby pointing at an element with text.

An accessible name on the link counts because it names the link even when the image does not — the common case is a logo in a site-wide header, labelled on the anchor rather than on the image. The title attribute does not count: it is a tooltip, not a name.

An empty alt="" does not count here. It is correct for a purely decorative image, but an image that is the whole content of a link is not decorative — it is the link.

Example: a product grid where each card is <a href="/products/kettle"><img src="kettle.jpg"></a>. Every product link on the page arrives with no description at all.

• The alt text is the anchor text. Search engines use an image link's alt the way they use a text link's words. A missing alt is a link that says nothing about where it goes.

• Logos and product images are high-traffic links. The logo link appears on every page; product and category tiles are often the main route into a catalogue. Those are the links that most need a description.

• Screen reader users hear nothing useful. Without alt, assistive technology falls back to the file name or the address — "link, kettle underscore final underscore v2 dot jpg".

• Image search loses context too. The alt text is also how the image itself is understood.

Effect on the health score

This is a standard-severity issue in the Link Integrity lens, raised once per page however many image links lack alt text.

1. Describe the destination, not the picture. For an image that is a link, the alt should say where the link goes:

   <!-- Before -->
   <a href="/"><img src="/logo.svg"></a>
   <a href="/products/blue-kettle"><img src="/img/kettle-01.jpg" alt=""></a>
   
   <!-- After -->
   <a href="/"><img src="/logo.svg" alt="Example Co home"></a>
   <a href="/products/blue-kettle"><img src="/img/kettle-01.jpg" alt="Blue 1.7L kettle"></a>

2. Or add text to the link. A product tile with the product name in the link passes on its text, and the image can then be decorative (alt=""):

   <a href="/products/blue-kettle"><img src="/img/kettle-01.jpg" alt="">
     <span>Blue 1.7L kettle</span></a>

3. Fix it in the component. Image links usually come from one card or logo component. Make the alt a required field of that component, filled from the product or page name.

Example 1: A logo link with alt text

Passes because: the alt describes where the link goes.

<a href="/"><img src="/logo.svg" alt="Example Co home"></a>

Example 2: A product tile with no alt

Fails because: the image is the whole link, and it has no description.

<a href="/products/blue-kettle"><img src="/img/kettle-01.jpg"></a>

Corrected version:

<a href="/products/blue-kettle"><img src="/img/kettle-01.jpg" alt="Blue 1.7L kettle"></a>

Example 3: An empty alt on a linked image

Fails because: alt="" marks an image as decorative, but this image is the link.

<a href="/sale"><img src="/banners/sale.png" alt=""></a>

Example 4: An alt-less logo labelled on the link

Passes because: the <a> carries the name, so the link is described even though the image has none.

<a href="/" aria-label="Example Co home"><img src="/logo.svg"></a>

Example 5: An alt-less logo with only a tooltip

Fails because: the title attribute is a hover hint, not a name.

<a href="/" title="Home"><img src="/logo.svg"></a>

Corrected version:

<a href="/"><img src="/logo.svg" alt="Example Co home"></a>

Example 6: Image plus text

Passes because: the link's text is its description; the image can stay decorative.

<a href="/sale"><img src="/banners/sale.png" alt=""> Summer sale</a>

1. Reads every link to another page of the same site from the HTML the server sent.

2. Picks out the image links: links with no visible text that contain at least one <img> (including one inside <picture>). A link with both text and an image is a text link, and its text is its description.

3. Reports an image link when none of its images has a non-empty alt. A missing attribute, alt="" and an alt of only spaces all count as missing. One image with a real alt among several is enough to pass.

4. Accepts an accessible name on the link instead. An alt-less image link is not reported when the <a> has a non-blank aria-label, or an aria-labelledby naming at least one element on the page that has text. The title attribute is not accepted. The anchor text stored for the link is unchanged — still the image's alt, or none.

5. Ignores links to other domains, and links with neither text nor an image — those are the empty-anchor check (#198).

6. Raises one finding per page with the number of such links and up to five of the distinct pages they point at.

Storage Level

Page Level

Database Table / Prisma Model

audit_issues.details

Decided from the page's own links while it is crawled. The link rows (internal_links.anchor_text) keep the first non-empty alt of an image link as its anchor text, and null when there is none.

Stored Fields

Detection Dependencies

• HTML Document — every internal <a href>, its text, and the alt of each <img> inside it