ALT text in email – why is it such an essential feature?

What is ALT text?

A responsive email design ensures all images are displayed on a recipient's screen, no matter the type of device, browser, or email client. If not, there's a chance your potential customer doesn't see them at all, and you miss a conversion opportunity. But what if a recipient has accessibility issues or has image blocking turned on? In that case, ALT text, or an ALT attribute, comes to the rescue with an accurate image description. This helps your marketing message go through, even if a vivid, colorful image doesn't.

For recipients with image accessibility issues, screen readers audibly read the ALT text so they understand the image's contents. Those with image blocking turned on may not see any images at all, and ALT text saves the day by providing an adequate characterization. In both cases, ALT attributes help express what the images contain and give potential customers the needed information.

Thankfully, saving broken images and minimizing lost revenue (along with frustrated customers) is easy. All you have to do is add ALT text to your HTML email templates. It’s inserted as an attribute in the HTML code, displayed in place of a broken image.

6 tips to get the most out of ALT text

1. Re-state the image

The image ALT text copy works like an image caption; it describes what the recipient should have seen or the image’s purpose. Ideally, you want to stick to the text already in the image. For instance, the image was a "30% Off Fall Clearance" product shot. Here, your ALT text will be "30% Off Fall Clearance" and not a detailed description of the product included in the photo.

2. Create clear and concise copies

As with most other email copy (like the subject line), you'll want to keep the ALT text short and to the point. The extraneous text might get cut out depending on the image’s size and the email client. Even if it doesn't, your customer will stop reading if they feel overwhelmed by text (remember – text-only posts won’t encourage user engagement as much as visual content). In terms of word count, a 200-pixel button should have an ALT text count of less than 25 characters.

3. Spice up your ALT text with a cascading style sheet (CSS)

We're not going to lie. ALT text does exhibit a ‘90s vibe. It's not the sleekest, but you can take it to the next level by styling it with CSS. Reformat and customize your text to a different color, font, or larger size. Styled ALT text adds some flair to an otherwise bland series of letters. 

4. Test your ALT text

ALT text allows recipients to understand images when they can't be displayed. Testing ahead of time allows you to see what they'll see and optimize your ALT text accordingly. Email On Acid has a great testing platform that allows you to optimize your ALT text, blocking all images by default and giving you a good idea of how your ALT text appears.

Once you preview your ALT text, you'll have a better idea of how customers with image blocking or accessibility issues may receive it. Then, you can try out different words and phrases to find the best combination or even experiment with different styles that add some extra flair.

5. Avoid repeating ALT text

Just like hearing something repetitively can get boring, reading the same ALT text may cause recipients to lose interest and delete an email. Using various ALT text throughout your emails keeps recipients engaged and interested. Although several images may be similar, differing versions of ALT text make for a better user experience, helping hold their attention. In the case of screen readers, varying your ALT text helps avoid confusion for the recipient, as each image has its own specific description.

6. Add context

Another essential practice when writing ALT text is adding context that connects an image to your website's subject. If it's a standard image, you can use text to help relate it to your webpage. For example, if an image depicts someone getting behind the wheel of a car and starting the engine, consider writing "driver opening car and starting engine."

The choice of words depends on the unique topic on your webpage. It's essential to remember that ALT text combines an image’s description with aspects of the content associated with it.

How to add ALT text to an email

ALT text is an essential aspect of email design, but getting it right might seem daunting. Thankfully, Mailjet's Email Editor makes it easy. All you have to do is follow these steps:

• Upload an image or link to an existing image online

• A dialogue box will appear with a field for ALT text

• Enter your ALT text, paying attention to the tips above

• Click the save button, and you're all set

Beyond ALT text, Mailjet has everything you need to create responsive, professional email campaigns that stand out from the rest. Our comprehensive library of templates gives you a good starting point, or if you want to design your own templates, our intuitive email lets you drag and drop without learning complex software. If you want to know how your emails perform, our A/B testing platform provides you with essential statistics, so you can increase conversion rates.