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.

Open any e-commerce website. Each product page displays a photo and a name, both clickable to the same page. If the photo and name are in two separate <a> tags, a screen reader user hears the same link twice. A keyboard user must press Tab twice to traverse what visually appears to be a single element.

#A single <a>, multiple contents

The composite link solves this problem by wrapping the image and text within a single <a> tag. The RGAA uses this term to describe any link whose content mixes image and text. On the W3C side, the H2 technique recommends exactly this approach.

The link's accessible name is calculated according to the accessible name computation algorithm: the browser concatenates the image's alt attribute and the text content of the link.

Direct consequence: if the visible text is sufficient to describe the destination, the image should have an empty alt.

<!-- Correct: single link, empty alt because the text is sufficient -->
<a href="/product/ergonomic-chair">
  <img src="chair.jpg" alt="">
  Ergonomic Chair Model S3
</a>
 
<!-- Incorrect: two separate links for the same destination -->
<a href="/product/ergonomic-chair">
  <img src="chair.jpg" alt="Ergonomic chair">
</a>
<a href="/product/ergonomic-chair">
  Ergonomic Chair Model S3
</a>

In the first case, the screen reader announces a single link: "Ergonomic Chair Model S3". In the second, it announces two distinct links with similar labels. The keyboard user experiences an extra tab stop.

#The pitfall of verbose alt text

The most common trap: filling the image's alt when the adjacent text already contains the label. The accessible name then becomes the concatenation of both.

<!-- Announced result: "Photo of a chair Ergonomic Chair Model S3" -->
<a href="/product/ergonomic-chair">
  <img src="chair.jpg" alt="Photo of a chair">
  Ergonomic Chair Model S3
</a>

The screen reader reads "Photo of a chair Ergonomic Chair Model S3". Useful information gets lost in the noise. The alt should not describe the image as such, but contribute to the link's accessible name. If the visible text is sufficient, alt="" is the right answer.

Cases where alt adds value: a download icon followed by "Annual Report 2025". The icon can carry alt="PDF" to specify the format, which the text alone does not convey.

#In summary

Wrap image and text within a single <a>. Leave alt empty when the visible text describes the destination. Check the actual accessible name in your browser's developer tools, Accessibility tab: that is what assistive technologies will render.