Same Product Image, Different Alt Text: Test the Placement

A product image does not carry one universally correct alt value. The same file can describe a product, name a link, or repeat information already supplied by that link's text. Choose the alternative for the image's job at its current placement.

This is a brand-owned educational article prepared for Itemlume, with AI assistance in research, drafting, and editorial review. Cedar headphones is a fictional product. The examples explain HTML choices; they do not document a deployed storefront feature or an independent product evaluation.

Key Takeaways

• Describe useful visual information when the image supplies it.
• Give an image-only link a name that explains its destination.
• Use alt="" within a text link only when the image adds no information beyond that link's text.
• Check the rendered link names and information, not just whether an alt attribute exists.

Start with the information the placement must preserve

Save the example headphone image as headphones.webp beside your HTML file, and use that same file for all three examples. This is an Itemlume-owned AI-generated illustration, provided here for this markup exercise; it is not evidence of a physical product test. It shows black over-ear headphones with thick fabric ear cushions. Color and visible construction are fair descriptions; comfort, noise cancellation, and sound quality cannot be established from this picture.

Create a plain HTML file with a UTF-8 character declaration, then paste the three fragments below into its body, in order. Keep the image beside the file and open the HTML locally in a browser. The first fragment defines cedar-details; both later links point to that existing section. The fragment identifier is a local demonstration destination, not a live product URL. The dimensions reserve a square display area; they do not determine the text alternative.

Placement 1: the picture supplies product information

In this detail section, the text names the product, while the image supplies its appearance. Keep those visible details available in the alternative:

<section id="cedar-details">
  <h2>Cedar headphones</h2>
  <img
    src="headphones.webp"
    alt="Black over-ear headphones with thick fabric ear cushions"
    width="1200"
    height="1200"
  >
</section>

The description supports this placement because the heading alone does not convey color or cushion construction. W3C WAI's informative images tutorial explains that the alternative should convey the information the image contributes in context.

Avoid adding a guessed model specification or a sales promise. A more detailed sentence is not better when its extra claims are unsupported.

Placement 2: the picture is the entire link

Here the same pixels have a navigation job. With no visible text inside the anchor, the image alternative supplies the link's name:

<p>
  <a href="#cedar-details">
    <img
      src="headphones.webp"
      alt="View Cedar headphones details"
      width="1200"
      height="1200"
    >
  </a>
</p>

“View Cedar headphones details” explains where activation leads. W3C WAI's functional images tutorial recommends expressing an image's function when it is used to initiate an action.

This example assumes the thumbnail serves only as the route to details. If the thumbnail also communicates a meaningful variant, such as which color the link opens, preserve that distinction in the link's name or accompanying text. A generic destination label must not erase information needed to choose correctly.

Placement 3: one link contains the image and its text

When the picture is only a visual cue for a destination already named inside the same anchor, an empty alternative avoids repeating that name:

<p>
  <a href="#cedar-details">
    <img
      src="headphones.webp"
      alt=""
      width="1200"
      height="1200"
    >
    <span>View Cedar headphones details</span>
  </a>
</p>

The visible text names this link. This is a conditional choice: if the picture's color or construction adds useful information missing from the text, retain an effective alternative or add that information visibly. Product images do not become decorative merely because they sit in a card.

W3C WAI's decorative images tutorial includes the same-anchor condition for an image that supplements link text without adding information. It also distinguishes an explicit empty alternative from omitting the attribute: some screen readers may announce a filename when alt is missing.

Check these expectations in the rendered page

Inspect the browser's accessibility tree for the three fragments together:

Placement	Expected information
Informative detail image	An image named “Black over-ear headphones with thick fabric ear cushions”
Image-only link	A link named “View Cedar headphones details”
Image and text inside one link	A link with that same name; its empty-alt image omitted as a separate accessible image

There should be two links with that exact destination name and one image with the descriptive name from placement 1. These are test expectations, not a screen reader test report or a claim of accessibility certification.

When a result differs, locate the failure before editing the prose:

1. Unnamed link: check whether the text actually belongs to the same anchor. Text in a neighboring, separate link does not automatically name an image-only link.
2. Repeated name: check whether both the image alternative and the text inside one anchor repeat the destination.
3. Missing product detail: check whether an empty alternative removed information that surrounding text never supplied.
4. Filename exposed: check whether a component dropped the attribute instead of rendering alt="".

Then activate both links with the keyboard and confirm they reach the details section. Review the page with the images unavailable, too: can a reader still understand the product information and both destinations?

W3C WAI's alt decision tree is a useful starting point when a placement changes. Repeat the decision when moving an asset from a detail section into a card or link. Store image metadata as a draft input, then let the component's purpose and surrounding content determine the rendered alternative.

Editorial responsibility and limits

Publication account: Ernesto Javier Machado Cabrera. Itemlume owns the editorial content and receives corrections through its contact page; its About page describes the publisher. The account name identifies the planned publishing account, not an accessibility credential. No professional qualification, screen-reader user study, or conformance certification is claimed.

The three HTML fragments were checked together in a local Chromium fixture for image roles, link names, and keyboard destinations. Those checks cover this small example only. Readers should repeat them in their own component and include assistive-technology testing appropriate to the real page. The W3C tutorials supply the underlying guidance; the fixed-image comparison and troubleshooting sequence are this article's teaching approach.