Missing alt text on linked images (logo links, cards, banners)

Updated 2026-10-24 · Altlark guides

A linked image with no alt text is a link whose only content is an <img> that has no alt attribute (or an empty one) and nothing else to name the link. The most common example is the site logo linking to the home page. A screen reader reaches it and says "link, logo-final-v2.png" or just "link". The user can't tell where it goes.

It's worse than a missing alt on a plain image, because the image is the link's only name. That's why Altlark reports it as its own error, separate from a regular image with no alt.

Which WCAG criteria apply

• 1.1.1 Non-text Content, Level A: images need a text alternative that serves the same purpose.
• 2.4.4 Link Purpose (In Context), Level A: the purpose of each link must be determinable from its text or context. For an image link, the alt text is the link text.

The key rule: describe the destination, not the picture

For a normal image, alt text describes what the image shows. For a linked image, alt text should say what the link does. A logo that goes to the home page shouldn't be "Blue circle with a bird"; it should be "Acme home" or simply the company name.

Bad vs fixed: logo link

<a href="/"><img src="/img/logo.png"></a>

<a href="/"><img src="/img/logo.png" alt="Acme Plumbing home"></a>

Bad vs fixed: empty alt on a linked image

<a href="/menu"><img src="/img/menu-banner.jpg" alt=""></a>

alt="" tells assistive technology to skip the image, which is right for decorative images, but here it leaves the link with no name at all. Altlark reports this as a linked image with no alt text (or an empty link, if there's no image left that could carry a name).

<a href="/menu"><img src="/img/menu-banner.jpg" alt="See our fall menu"></a>

Bad vs fixed: product or blog cards

Cards often have an image link and a text link pointing to the same page:

<div class="card">
  <a href="/blog/winter-pipes"><img src="pipes.jpg"></a>
  <h3><a href="/blog/winter-pipes">How to stop pipes freezing</a></h3>
</div>

A screen-reader user hears a blank link followed by the real one. The cleanest fix is one link wrapping both, so there's one tab stop and the heading text names it:

<div class="card">
  <a href="/blog/winter-pipes">
    <img src="pipes.jpg" alt="">
    <h3>How to stop pipes freezing</h3>
  </a>
</div>

Here alt="" is correct: the image is decorative because the heading already names the link. If you must keep two separate links, give the image link alt text that matches the destination, or take the image link out of the tab order and hide it from assistive technology (tabindex="-1" aria-hidden="true"), which Altlark respects.

Bad vs fixed: banner with text baked into the image

<a href="/sale"><img src="black-friday-40-off.jpg"></a>

If the image contains words, the alt text should include them (or the gist):

<a href="/sale"><img src="black-friday-40-off.jpg" alt="Black Friday: 40% off all boots"></a>

Writing good alt text for links

• Lead with the destination or action: "Book a table", "Acme home", "Download the price list (PDF)".
• Keep it short. One phrase is usually enough.
• Don't start with "Link to" or "Image of": screen readers already announce "link" and "image".
• If the image is a logo, the company name (plus "home" if it goes home) is fine.
• If the link also has visible text, the image is decorative: use alt="".

What Altlark checks exactly

For every link that isn't hidden from assistive technology, Altlark works out an approximate accessible name: aria-label, aria-labelledby, title, then the text inside, including image alt text and SVG titles. If the name is empty and the link contains an <img>, it's reported once as "Linked image with no alt text (link reads as blank)". The images inside that link aren't reported again as separate "image with no alt" errors, so one broken logo counts as one issue, not two.

Plain images (not inside a link) with no alt attribute at all are reported separately as "Image with no alt attribute". Images with alt="", role="presentation", role="none" or aria-hidden="true" are treated as decorative and not flagged.

Limits

An automated check can't tell whether alt text is accurate. "image123" or "logo" will pass the check but doesn't help anyone. Review the alt text of every linked image by hand once: it's usually a short list (logo, social links, banners, cards). Also, images set with CSS background-image inside a link are invisible to assistive technology; if that link has no text, Altlark reports it as an empty link.

Checklist

1. Run the free scan on your home page; the logo link is the first thing to check.
2. For each flagged link, write alt text that names the destination.
3. Merge duplicate image-plus-text links in cards into one link.
4. Re-scan to confirm.