Component:

Product Stack/ Redundant Alt Text

Now that you know more about alt text than you ever thought was possible, let’s look at actual implementation. There’s a specific problem that we get into with our emails when an image is adjacent to text that would usually be the image’s alt text. I’m calling it a product stack, but you also see this kind of combo with articles, events, even icons and the text next to them. Here’s an example:

This is an example product stack with an image of a cute popple toy, a product name that says - Vintage 1980's Popples Sports Popple. Followed by lorem ipsum description text and a red button that says "Shop Now"

Here we go – the typical product stack:

  • Image of product
  • Product name
  • Product description
  • Product CTA link

Usually, we expect the image, product name, and CTA link to be linked to the product page, but that can vary somewhat. This expectation in the email community is itself a problem – we really should move to intentional linking where we only have one link per item. That’s really how the above section is designed – note there are no underlines to denote what is linked – only the CTA is a visible link.

So, what’s the problem?

The alt text on the product image is the issue here. Most devs will default to the product name, which stinks because the readout will be redundant: “Product Name. Product Name. Product Description. Product CTA link.” If we assume the image, product name, and CTA link are all linked, that means that if a screen reader tabs through the email, they are also getting “Product name, link. Product name, link. Product CTA link.” So again – redundant.

You could probably argue that having the product name is still better than having nothing at all, and you’d be right there. If the image is linked, you, at the very least, must tell the user where the link is going, and if it’s going to the product page, the product name meets that criteria. If that’s all you can do, you’re at least meeting the bare minimum. Just note that this solution is not accessible because it’s still redundant. Screen reader users will not appreciate this.

Alternatively, you could also provide more detailed information in the alt text so it doesn’t feel redundant. This rarely works out well – you’re either giving the user info that already exists (like rewording the product description, which would again be redundant and longer than just using the product name), or you’re giving the user info that’s not available on the email (i.e. pulling content from the product page) which can also be confusing. Reminder: many screen reader users can see – so if you’re randomly adding in the first sentence of the blog without that existing anywhere – that’s gonna be weird.

So let’s talk through some solutions to this issue and talk about why they work better:

Solution 1:

This is an example product stack that looks just like the earlier sample. There is an image of a cute popple toy, a product name that says - Vintage 1980's Popples Sports Popple. Followed by lorem ipsum description text and a red button that says "Shop Now"

Okay, the best/easiest solution here is to not link the image. In this scenario, the product image is redundant and doesn’t need to be described, so an empty alt attribute is appropriate. This image literally meets the requirements of being a decorative image because it isn’t providing any additional information that the reader doesn’t already know from the other context.

And because it’s best to reduce your links, you’ll want to link only the CTA.This way, you are only getting intentional clicks for the link, which means your metrics will also be cleaner. It’s also worth noting here that this has been a transition that websites have made to support accessibility. Pay attention next time you’re scrolling and see how often you run into an unlinked image – it’s becoming more common.

Note: you should also add an aria-label to that CTA link so that it’s clear when a user is jumping from link to link, which I discuss in more depth in my CTA link/buttons post.

Solution 2:

This is an example product stack that is almost the same visually, but this time the product name is red and underlined. There is an image of a cute popple toy, a product name that says - Vintage 1980's Popples Sports Popple. Followed by lorem ipsum description text and a red button that says "Shop Now"

It’s highly unlikely you will talk anyone into removing that link around the image – that’s valuable email click real estate and I only know of a few brands that don’t link their images. (and I quietly cheer them on!) So, if you have to link the image, the WCAG gives us another option – wrap the image and the product name in the same anchor tag. This is a great solution because when the image and text are linked together, the image is no longer dependent on the alt text for its accessible name and can use the product name text to tell you where the link is going.

It’s worth noting here that you are still being redundant with the product name link and the CTA – assuming you’re using an aria-label as noted above. It’s an improvement by far to join two of the three links, but it’s still two links where there should be one.

Note: If you end up linking the product name text, you need to be sure you meet the criteria for WCAG SC 1.4.1 – so we’re underlining the linked text to ensure users know it is linked.

In code, it’s super straightforward:

<a href="product_URL" class="link_text_style"><img src="product_image" alt="" />Product Name</a>

The issue here is that you’re really letting some of the formatting slide or controlling it externally. The image and text will need to be contained to control the alignment, either by a table or div depending on your needs. The spacing between the image and text can be a little hard to control, so make sure you test your solution to make sure it works. Adding a div spacer will not work, so don’t do that.  The most important thing here is that you can’t divide up the image and the text. This is easy with a vertical layout but gets really tricky with horizontal layouts, designers take note! You’ll likely want to play around with these layouts a bit to find a sweet spot that renders well and meets this criteria.

Solution 3:

You can take these a bit further than the above and remove the CTA link and/or the description. This is quite a bit more simplified, and in this scenario, we are now using the product name as the accessible name for the image, so now the accessible name for this link is “Vintage 1980’s Popples Sports Popple” This is essentially the inverse of Solution 1 – the image is now linked and we’ve removed the CTA link. So we’re still down to one link – yay reduced redundancy!

Which solution is best?

One and three are the definite winners, but if you’re stuck with an aggressive linking strategy solution 2 is likely as good as you can get. (But keep speaking up for best practices here!)

What would be the wrong answer?

The above are very specific solutions, so I want to add a few notes on what would turn these solutions into failures. Here are ways you can ruin your product stack:

  • If you did not distinguish your linked text and make it look like it’s not linked
  • If you wrapped your entire table in a link – that used to work a while ago, but it no longer works in all email clients. (This is an email rule, not necessarily an accessibility rule.)
  • Adding alt text that doesn’t add content by either repeating what is said elsewhere or adding additional content that sighted users won’t see.
  • If you linked the images, product name, product description, and CTA link, that’s just redundant and a horrible experience. Please don’t do that.

Hopefully, this helps you with your next redundant alt text problem and provides you with a framework so you know how best to design and code your product stacks.