Components:
Dynamic Images, Alt Text, and Accessibility
I have written and spoken a bit about alt text. There’s my alt text deep dive, my alt text vs aria-label discussion, and a handful of webinars and such that I’ve done on the subject.
I care a lot about alt text.
It’s an important subject and it’s worth getting right.
Today I wanted to dig a bit deeper into the mainstay of email personalization – dynamic images.
It used to be that Movable Ink was the only contender in this arena, but these days there’s any number of services that can create these images for you. I’ve worked in a handful of them and it’s rare for a day to go by without inserting some kind of dynamic image code into the emails I make for my clients.
The basic premise is that a design is created and inserted into the system, variables are set and produced, and code is exported from that system that you insert into your email – or just an image link. Upon a user receiving the email and opening the email, the image with variables is produced and displayed in the email. This image is usually different for each user – or is served up specifically for a user that meets specific parameters.
Nearly universally, these are every product recommendation you get in an email. You can tell by trying to highlight the text – you can’t because it’s an image. You can also get personalized discounts and promo codes, countdown timers, add to calendar functionality, polls, loyalty points, find a store modules, etc. All of these are linked images – functional images is what we call them in the alt text world.
Lately though, especially with large retail brands that are totally fine with image-based only emails, I’ve seen an increasing number of emails that come in with the entire email content full of dynamic images. Even content that I wouldn’t think would need to be dynamic – like the new fall line-up at my favorite clothing retailer. No personalization or anything. I could be wrong in my interpretation here, but I haven’t been able to figure out why brands are going this route. It has to benefit them in some way, right?
Regardless – there’s a big problem with these dynamic images: They do not have appropriate alt text.
When I’ve pestered vendors, and eventually been able to speak with engineers and technicians – it is kindly explained to me that the content and the HTML produced do not cross hands at all. That the functionally is not connected between the image that is produced and the HTML that includes the alt attribute.
So let’s go through our options here:
What not to do: Bad Placeholders
“Display images to show real-time content”
Stop doing that! Just in case you can’t tell how horribly ableist this is, imagine if we were excluding other groups in this way.
Because… if you can’t see the images… you can’t get that real-time content. (I feel like this is obvious, maybe it’s not? It’s 2025 and my inbox is filled to the brim with this alt text.)
I mean… really!
If you can’t set these up to have at least some semblance of what content is going into these images… I think it’s time to re-evaluate how you’re producing emails.
So this solution is no good, very bad, and should be avoided at all costs.
What to do: Use that data!
I’m not sure why I don’t see more of this – I assume it’s because there’s just so much bad data in the world, but the very best way you can resolve this issue is to let the same data that you use to create the dynamic image also create the alt text.
This means you will be using some kind of scripting in the alt attribute like: <img src=”image.jpg” alt=”{!points}” or whathaveyou.
I was thrilled for days when I saw my monthly Hilton Honors email come into my inbox (images are still turned off!) and saw my point balance in the alt text!!
WHAT!!!!! Amazing!!
Seriously if you work at Hilton Honors you should give yourself a solid pat on the back because this is some great email alt text and I’m super proud of you! (Don’t use all caps in alt text though – so close!)
This really shouldn’t be hard, but the sheer fact that I was elated to get it in this one message is probably proof enough that this isn’t a normal occurrence.
So – do this if you can. It will almost certainly require some elbow grease and possibly several teams shaking hands at the same time to get it to work – but totally worth it (and you’ll have better data anyways which is always a good thing).
If you really can’t do this? That leads me to my next option!
What to do: Better Placeholders
Note that I did not say good because for most of these, you just can’t call these good. The only good alt text is appropriate and equitable alt text… and that’s not what this is.
Reminder – Content and Context are important
So you don’t have control of the alt text of your dynamic images, but you do know what’s going near these images, so lean into those. Is this a countdown timer for a new product reveal? Is this product recommendation showcasing your latest fall lineup? These additional cues will help you write better alt text in your dynamic images.
Don’t forget – we do not want redundant content, so please don’t repeat the same content that’s found elsewhere in your email!
Different kinds of dynamic images will have varying abilities to have better alt text. Let’s talk about a few of them:
- Product recommendations: You know the image is going to display a product and that the image will be linked to the product page. You may also know what other content is going to be displayed around the dynamic image, and you may know what kind of products are in the pool of images to be displayed.
Example: We are promoting our fall sale and we know that these products are in our new fall lineup.
Alt: Shop our new fall products, on sale now!
Example: We are supplying users with outdoor education classes based on their location that are available in the next three months.
Alt: Explore upcoming classes in your area.
Ideally, we would link these to the more generalized links – like to the new fall clothes or a group of education classes – rather than specific items/classes. That’s not usually how these work, which is unfortunate, but again we’re going for closer, not actually good. - Personalized discounts and promo codes: This one is hard. If the content can’t transfer over to the alt attribute you’re really in a tough spot. I just can’t imagine a scenario where the design is so absolutely magnificent that you couldn’t just use live text. It would be so so much better. If you really can’t do that, your best bet is to make sure that the promo code image links to a page about the promo where they can get that content in live text. Then your alt text could be “Get your personalized promo code” or something similar. If you can’t do that… you really just shouldn’t do this.
- Countdown timers: This is one of the easier ones – you won’t know exactly how much time is noted on the user’s countdown, but you do know when the countdown timer ends. You can even carry over the countdown theme into the alt text.
Example: A countdown timer to a Black Friday sale.
Alt: 3, 2, 1… Let the Black Friday countdown begin! Sale starts Friday morning at 6am. - Add to calendar: This one is generally easy because there’s not lots of variations in the actual text so you can usually actually have a 1:1 representation of the text on the calendar image.
Example: You send a dentist appointment confirmation email where the user can add the appointment to their personal calendar.
Alt: Your appointment is scheduled! Add your dentist appointment to your calendar. - Polls: This is another one that tends to change too much throughout its use to really settle on specific text. In most cases your best bet is to send the user to an online (and accessible) version of the poll. In which case your alt text would be to tell the user to go to the accessible poll option. This isn’t great and gets into a bigger conformance problem that gets pretty sticky. I’d recommend using a different option here.
- Find a store: This is another one where if we really can’t bring the appropriate alt text in, we can at least do the next best thing – which is to link to an accessible store profile page that the user can more effectively use.
Example: You send an email with a find-a-store module that tells sighted users where their nearest store is based on the users zip code or IP.
Alt: Find a store near you - Loyalty points: This seems like one of the easiest ones to use the data solution with. However – if you really can’t you can still do the next best thing, which is to link to the profile page for a user to check their points there.
Example: You send an email with the user’s loyalty points, and the dynamic image links to the users loyalty points profile page.
Alt: View your loyalty points
This really isn’t the best solution, but a lot of times as email marketers we are not in charge of a lot of things that would help us make better emails, so we have to get what we get and not throw a fit. (Though in this case I do think a decent amount of fit-throwing is warranted – though we call it advocacy in this scenario)
One more issue: Collapsing
There’s one other issue with these dynamic images that you should consider, and that’s the “collapse” where you can set your image to not display on certain parameters. Like if your promo code isn’t available in X locations, or sometimes if you don’t live close enough to certain stores you may not get the find a store module, etc.
It’s worth noting that those images don’t just disappear, they actually just get replaced by a 1px tall image, so that image is still there.
That’s not an issue for a lot of your users because they don’t usually even see that tiny image, but if your alt text is still there that means users will get the alt text.
That could be an issue on some of your dynamic images – like if you’re supplying an offer that’s not available in that location and a user still gets that offer. Or it can also be confusing if you are telling a user to check out their rewards points when they don’t actually have a rewards profile to look at, etc.
So this can get a little sloppy and is worth considering. That image element and alt attribute will still be there for some assistive technology users.
Hopefully this helps you next time you get another campaign with dynamic images! If you’re super lucky you can advocate for the data method and really turn some heads (namely mine) on your next campaign.