Add accessibility to tags
Since Litmus Personalize is image-based, you can apply many of the same methods you're already using to make your images accessible. We also have several tips if you're not sure where to start!
- Add alt text to your images
- Use image-based dynamic content strategically
- Use HTML-based content instead of images
- Make sure your images look good in dark mode
Add alt text to your images
Alt-text allows screen readers to describe your images to users. Edit the final HTML tag from Litmus Personalize to add alt text to your custom image. Include alt="description of image here" in the <img portion, like this:
<a href="https://img.ltms.app/clickancnt.ashx?c=14525.oiwu3Od2KVWJFNR8GJPI><img src="https://img.ltms.app/14525/oiwu3Od2KVWJFNR8GJPI/imgancnt.png" alt="description of image here" border="0"/>
You’ll want to keep the alt text generic enough that it’s relevant to all possible versions of the image since it’s dynamic. Alternatively, consider adding the same dynamic content into your alt text. For example, if your image uses first name personalization such as "Happy Birthday, <firstname>" on a cake then make your alt text "'Happy birthday, <firstname>' written in icing on a birthday cake".
If you use a drag+drop email builder, you can copy the URLs from our tag into the appropriate fields in the image block in your email builder and add alt text there, like in this example from the Litmus Visual Editor.
Use image-based dynamic content strategically
When you're designing a countdown timer, only the numbers that are changing need to be images. You don't need to design an entire email/content block that includes the timer plus copy and any additional images.
Wherever you can use live text, opt for doing that in your HTML code and not within your design in the Litmus Personalize template. Reserve your Litmus Personalize template for your dynamic content portions!
Use HTML-based content instead of images
You can link live text in the HTML code to the poll links and then use the poll images for the dynamic numbers only. No reason the poll links themselves need to be images since they aren’t changing post-send anyway!
Here's an example screenshot from a Litmus email where the poll options Email Development, Strategy, and Testing are all linked live text. Only the percentages are images (in this case, the images are not linked, only the live text).
NOTE: Prevent screen readers from repeating your text and associated image links. You can hide the image that includes the same hyperlink as your text by using an aria tag. Add aria-hidden=“true” to your image HTML. A screen reader will provide your text link information but won’t repeat the same link for your image.
Make sure your images look good in dark mode
In this example, Litmus designed the polling numbers on light orange circles with a transparent background in Litmus Personalize. In this email, the background is the same color as the light orange circles. In Light Mode, the backgrounds blend together. In Dark Mode, the circles pop and make it easy to read the polling result numbers.
