What is best practice (and legal) for product listing image alt text for accessibility?

Question

I'm trying to determine what structure is best with regard to typical e-commerce product listing pages. I have reviewed WCAG and other sources and have not found a definitive solution as of yet. A typical product listing contains an image and a product name, both linked to the product details page. There are several patterns that come to mind...

---

Single link with empty alt text

My thought is that it is best to combine both of these into the same <a> tag and then set alt="" on the image therefor the product name will describe the entire purpose of the link.

Method 1

<a href="/my-product">
    <img src="image.jpg" alt="">
    <span class="product-name">Squeaky Fox Dog Toy</span>
</a>

The benefit here is it keeps the interactive elements clean and easy to navigate by keyboard and in screen reader links lists (like in the Rotor in VoiceOver).

---

Duplicate link and product name

Another very common pattern I've seen in use on high profile sites that have been through accessibility lawsuits and subsequent remediation is to have separate links for both...

Method 2

<a href="/my-product"><img src="image.jpg" alt="Squeaky Fox Dog Toy"></a>
<a href="/my-product" class="product-name">Squeaky Fox Dog Toy</a>

However, this seems like a very bad experience for keyboard users who now have to tab through both elements just to get to the product they want. It also seems terrible for screen reader users who have to listen to duplicate product names as they try and find what they want.

---

More descriptive alt text on the image

One concern I have with the first two methods is that they may not completely meet WCAG 1.1.1 Non-text Content - Level A. Does the product name alone "serve the equivalent purpose"? For these same images on the product detail page I would typically suggest being more descriptive to give the user more information that a visual user is seeing about what is in the image. The product name will rarely satisfy relaying enough information in that regard. However, on the listing page, I feel like doing that would put undue burden on screen reader users who now have to listen through descriptions of images when all they want is to see what products are available and select one. That level of details seems like it would only be warranted on the actual product detail page.

Method 3

<a href="/my-product"><img src="image.jpg" alt="Red fox stuffed dog toy with white braided rope arms"></a>
<a href="/my-product" class="product-name">Squeaky Fox Dog Toy</a>

or

Method 4

<a href="/my-product">
    <img src="image.jpg" alt="Red fox stuffed dog toy with white braided rope arms">
    <span class="product-name">Squeaky Fox Dog Toy</span>
</a>

---

My Questions

So, I guess I really have three questions...

1. Which method(s) are best for users?
2. Which method(s), if any, would NOT satisfy WCAG Level AA and therefor not comply with laws in the US, EU, etc.
3. Would the image in a Product Listing Page be classified as "decorative"?

My suspicion is that Method 1 would be the best. The only documentation I found so far supporting this is on the W3C's site in the section about Decorative image as part of text link... assuming the PLP image can be classified as "decorative".

Answer 1

Great questions and you've obviously done a lot of research.

Let me start with your second question

2. Which method(s), if any, would NOT satisfy WCAG Level AA and therefor not comply with laws in the US, EU, etc.

All of your ideas would technically pass WCAG, which makes your first question more important - what's best for the user. WCAG is a minimum standard to create applications that are accessible to the widest user base but they are indeed minimum standards. You can have a very unusable website that is accessible so you want to look beyond WCAG.

Also, WCAG can be very subjective. With regards to WCAG 1.1.1 that you mentioned, one person might say your examples fail while another person might say they pass. There is no official definition on what "serves the equivalent purpose" means. It's a subjective decision.

I can find pros and cons with all your solutions so here are a few things to think about.

Method 1: You consider the product picture as decorative so it doesn't have alt text. (Well, it has alt text but it's the empty string, which is fine. Your could also have alt by itself without the ="" and it would mean the same thing.) One problem, though, is if you have a user with lower bandwidth and perhaps images don't load. Or image loading might be turned off. Or your URL to the image location is bad. You'd then have an empty box where the picture should be. You'd still have text in the link so it'll be announced ok by screen readers and people with vision will see the text, but the user might wonder what belongs in that box. With descriptive alt text, the alt text would be displayed near the image. Each browser tends to show missing images differently.

Method 2: It's not the best experience for keyboard or screen reader users but I'm not sure I'd say it's a "very bad" experience. Many (sighted) keyboard users can just tab twice and it's not a big deal. I often have to press and hold tab to get through lots of tab stops, but I'm a sighted keyboard user so it doesn't bother me. But some assistive technology is more difficult to get through multiple tab stops, such as a sip and puff device, so reducing tab stops is always a good thing but it's not required by WCAG.

Method 3: Similar to method 2 except the alt text is more descriptive. You have to start weighing the options of being succinct in the alt text (or empty alt text) to being (too) descriptive. It's a subjective decision and often requires some usability testing.

Method 4: Improves upon method 2 by only having one tab stop but now it causes both the alt text and the link text to be announced so the link text might be too wordy for the screen reader user.

I often use a pattern close to your method 4 but I don't want the alt text read with the link text so I use aria-labelledby. (I use aria-labelledby when the text I want to announce is already on the screen so I can just refernece it, whereas aria-label is a literal string and I don't like to repeat the text in the aria-label and the text on the screen.)

Method 5:

<a href="/my-product" aria-labelledby="foxy">
    <img src="image.jpg" alt="Red fox stuffed dog toy with white braided rope arms">
    <span id="foxy" class="product-name">Squeaky Fox Dog Toy</span>
</a>

Some benefits of method 5:

• one tab stop
• link text announcement for screen readers is not too wordy
• alt text will be displayed if image can't be loaded
• screen reader user can still navigate by <img> elements (the G key for many screen readers) and hear the description

I'm sure you can poke holes in method 5 too. There will always be downsides to almost every solution.

Update I took so long to type my answer that you had added a third question to your OP. Whether an image is decorative or not, whether it's in a product listing page (PLP) or product details page (PDP), is still somewhat subjective. As a best practice (not required by WCAG), one would think that a PDP would have more details about the product and thus might need very descriptive text on the images. But those details could also exist in the product text and thus not be needed on the actual images.