Same Product Image, Different Alt Text: Test the Placement

A single product image can have multiple alt text values depending on its placement and function within a webpage. The same image can describe a product, name a link, or repeat information already provided by that link's text. This is an educational article produced by Itemlume, using AI assistance for research and drafting. The examples focus on HTML choices, not actual storefront features or independent product evaluations.

Key takeaways include:

1. Provide useful visual information when the image contributes new details.

2. Use alt text to name image-only links, describing their destination.

3. Do not use alt= within a text link if the image does not add information beyond the link's text.

4. Always check the rendered link names and information, not just the presence of an alt attribute.

For testing, use the provided cedar headphones image and create a plain HTML file with UTF-8 character declaration. Place the image beside the file and open the HTML locally in a browser. There are three placement scenarios to test:

1. Image supplies product information: The image should describe the product's appearance, such as color and cushion construction. Add descriptive alt text to preserve this information.

2. Image is the entire link: When the image serves as a navigation element without visible text, the alt text should explain where the link leads.

3. Image and text inside one link: If the image only supplements the link's visible text, an empty alt attribute is appropriate.

The rendered page should show two links with the same destination name and one image with a descriptive name from placement 1. Verify these expectations by inspecting the browser's accessibility tree, testing keyboard navigation, and reviewing the page without images. The W3C WAI alt decision tree can help determine the appropriate alt text for each placement.