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.

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.

Alternatively, you could also provide more detailed information in the alt text so it doesn’t feel redundant, but honestly, I haven’t ever seen this work well in reality. 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.

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 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. And because it’s best to reduce your links, it’s even better if the only part linked is the CTA link. 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 can Solution 2:

Note: you can also add the 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.

Note: Since we are now linking the product name text, we need to be sure we 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 by a table cell where the alignment will be controlled. You may be able to adjust the margins around the image with the internal stylesheet, but you will be at the whims of email clients on how well that renders. 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:

This is the final example of a product stack where there is the product image and text below it that says "Shop Now".

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 alt text for the image, so now the accessible name for this link is “Product Name, Shop Now” I don’t think it’s quite as clear as Solutions 1 or 2, but if your product image can stand on its own, this is an accessible solution as well.

Which solution is best?

They all are! Because these all meet the criteria for links and images, you can use any of these options to provide appropriate content for your users.

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.)
  • 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.