Image link

An image link is a link whose only clickable content is an image. Its text alternative (the alt attribute) becomes the link label for screen reader users. If the alt is missing or describes appearance instead of destination, the link becomes unusable.

The shopping cart icon that opens the store, the logo that returns to the homepage: whenever a link contains only an image, it's an image link. And it's the type of link most often coded incorrectly. The WebAIM Million 2025 report ranks images without alt among the most frequent accessibility defects on the web.

When an image is alone inside an <a>, its alt attribute becomes the link label. The W3C tutorial on functional images sets the rule: the alt must indicate where the link leads or what action it triggers. Not what the image looks like.

<!-- Correct: the alt describes the destination -->
<a href="/"><img src="logo.svg" alt="Home"></a>
 
<!-- Incorrect: the alt describes the image -->
<a href="/"><img src="logo.svg" alt="Company logo"></a>

A screen reader announces "link, Home" in the first case. "Link, Company logo" in the second. The user knows where they're going in one case. Not in the other.

Same logic for a print icon: the alt will be "Print this page" and not "Printer icon".

#What about SVG icons?

Inline SVG icons don't have an alt attribute. A <svg> alone inside an <a> produces a link with no accessible name. Two options: place an aria-label on the link, or insert visually hidden text.

<a href="/profile" aria-label="My profile">
  <svg aria-hidden="true"><!-- icon --></svg>
</a>

When a link contains both an image and text, it's a composite link: the rules change and the image's alt is often left empty to avoid redundancy.

Missing alt. The link exists, but nobody knows where it leads. Screen readers fall back on the filename (logo_v3_final_crop.png) or the destination URL.

Descriptive alt instead of functional. "Magnifying glass icon" instead of "Search". The WCAG H30 technique requires that the label describes the destination, not the appearance.

Duplicate alt in a mixed link. The image and text say the same thing. The screen reader repeats the information.

#In summary

The alt of an image link answers "where does this link lead?", not "what does this image look like?". As the only content of the link, it carries the entire label weight. If the link also contains text, the image gets an empty alt.

Back to glossary
Share this article

Learn more

Link Purpose

Link purpose is the text that assistive technologies announce to describe a link. In HTML, it corresponds to the text content of the link, the alt attribute of a linked image, or the value of aria-label. A vague purpose like 'click here' makes the link unusable outside a visual context.

Composite Link

A composite link groups an image and text within a single <a> tag. The browser calculates the link's accessible name by concatenating the image's alternative text and the visible text. When the image and text are split into two separate links, screen readers announce two identical consecutive links.

Alternative text

Alternative text is the text that a screen reader reads instead of an image. In HTML, it's the alt attribute on images. Its content depends on the image's role on the page: informative, decorative, or functional.