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!

  1. Add alt text to your images
  2. Use image-based dynamic content strategically
  3. Use HTML-based content instead of images
  4. 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="><img src="" alt="description of image here" border="0"/></a>

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.

litmus visual editor image alt text area

Top Did this help?

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!

Top Did this help?

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

litmus email poll with large blue buttons for poll choices that are text-based and dynamic poll results next to each button that are iages

Tip for enhanced accessibility: 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.

Top Did this help?

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. 

litmus live topics poll light mode
Enlarge light mode poll image

litmus live topics poll dark mode
Enlarge dark mode poll image


Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us