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...
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.
<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).
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...
<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.
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.
<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
<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>
So, I guess I really have three questions...
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".
Method 1 out of the options given is best.
None of them would fail WCAG as such.
However as you have pointed out 2 and 3 result in duplication of effort for keyboard users and links to the same location having different names, which is not a fail under any success criterion but is highly recommended.
Yes in scenario 1 and 4.
All 4 of the examples given would "pass" WCAG. However they offer very different experiences.
So the question is what things are we considering for accessibility?
The first is Keyboard operability. Examples 2 and 3, as you pointed out result in duplication of focus stops for the same item. So we should avoid them.
The second thing is link purpose. Yet again examples 2 and 3 are not great here as we have 2 links to the same place on the same page that have different accessible labels / text that assistive tech will use.
So we can rule out options 2 and 3 for best practices.
So what about options 1 and 4?
Well as the items are located within a hyperlink we want the link text (the accessible name for those links) to be descriptive of the product page we are going to visit.
As such option one would read: "link: Squeaky Fox Dog Toy" and the second link would read "link: (image) Red fox stuffed dog toy with white braided rope arms, Squeaky Fox Dog Toy"
The second option results in duplication of information so is not as desirable as the first option.
So we land on option 1.
The only consideration you now have is whether that link text describes the product sufficiently. Now if you sold multiple dog toys (different product types) then you need text that describes them as such i.e. "plastic dog toys" and "fluffy dog toys".
If you sell different coloured products and they all had their own page (so you don't have a colour picker on the end page, they are listed as separate items) then you would need to describe the colour there too. "Red fluffy dog toy", "blue fluffy dog toy".
Essentially you need to provide enough information that each product link is easily identifiable as to where it leads (the purpose of the link itself).
This is where judgement comes into play, provide enough information to describe the product generally in a unique way on the page, not so much information that browsing that page becomes problematic due to 100 products with 200 word link text.
So in the example given the "balance" would be something like "Red fox stuffed dog toy", and then describe the appearance in far more detail on the product page, wither in the description or in the product image alt attributes.
It is worth noting that the last option for a product page is no text at all. Just an image inside a link. The following is also valid HTML and accessible as the alt text will be used as the link text (not if an image contains any text at all that should all appear in the alt attribute).
<a href="/my-product">
<img src="image.jpg" alt="Red fox stuffed dog toy with white braided rope arms">
</a>
Sometimes you may not to be able to control the content of the link itself (maybe alt text is managed centrally or you have a description for each item as well that would make the link text far too verbose.)
In that case you can fall-back to WAI-ARIA (always a last resort) and provide the link text with that:
<a href="/my-product" aria-label="DESCRIPTION THAT OVERRIDES ALL CONTENT">
<img src="image.jpg" alt="Red fox stuffed dog toy with white braided rope arms">
<span class="product-name">Squeaky Fox Dog Toy</span>
<p class="long-and-verbose-description">Way too much information for a link that is overridden by the aria-label</p>
</a>