Friendly Reminder:
Write Good Alt Text
I’m not one to campaign shame, but this really made me chuckle today. Check out this product grid from a major high-end retailer:
Look, I’ll give anyone the benefit of the doubt here. Maybe these are all dynamic images and the database doesn’t already have the alt text with the images. Yipes – that would be a lot of work to add. Maybe this is one of those hot-off-the-presses emails that have to go out in record time. Sure, I’ve definitely been there. Maybe these are all the same product and it would be equally weird to say the name of the product over and over again. (It’s not, but theoretically, that would be hard to work out.)
What’s the issue, isn’t that alt text?
Yes, it is alt text, and if your eyes glaze over when you glance at WCAG SC 1.1.1, Non-text Content, it looks like it qualifies. But looking at the description, to pass this criterion “All non-text content that is presented to the user has a text alternative that serves the equivalent purpose…” and this “Shop Now” nonsense does not meet the equivalent purpose of the images in the product grid. Let’s go through some of the possible ways the developers of this campaign got here and come up with some better solutions.
What if this is a product grid with a photo of a different product in each image, and each image is linked to the product’s page on the website. What would we expect the alt text to say?
In that case, we would want the product name listed in the alt text and additional details might be needed if the product name is not descriptive enough. “Purple Italian leather dog collar with pink Swarovski crystals” would be better than “dog collar” or “Premium Dog Collar.” Then, because these are functional images (they are linked), we should add additional text to let the user know where the link is taking them. Since we’ve already described the product we can simply add “Shop Now” so it’s clear the link will take the user to the fancy dog collar page where we can buy the product. As an aside, if the link goes somewhere else – like to a home page or special offer or landing page – you’ll need to adjust your text to match that destination. “Shop Special Offers”, etc.
What if we had a product grid but the images are pulled in dynamically and we do not have appropriate alt text in the data?
Oof – honestly, this is a really good time to re-evaluate your data. Alternative text is critical information. How many images are available for this product grid? If it’s less than 50, can you get an intern to copy and paste the product names in there? Because these are linked images, the alt text becomes absolutely critical in helping AT users know where the link is taking them.
What if we are on a hot deadline and we are suddenly trying to sell off these products in a flash sale and the boss just wants it done asap?
I think there’s room for some linking strategy here. If these products are all going to the flash sale page/site, there’s really no reason to slice them all out. If that’s the case, a larger image that contains all the images in the grid with a single link gives you more options for alt text. If you are merely showing *some* of the products available in the sales as examples, you do not necessarily need to list them. Instead, you can emphasize details about the sale, giving care not to repeat other content in the email unnecessarily.
* These notes are all assuming the product images do not have any text on them and that they are just a grid of product photos only.
Regardless of the specific issues that led up to this abysmal alt text, it’s clear that there are better ways to support users that need that alt text to help them make good purchasing decisions. If someone wants to buy your fancy dog collars, isn’t it within your business goals to help them do just that?