How to Use ALT Text for HTML Emails

When it comes to designing an email campaign, many marketers are split over whether or not images impact performance. There are always campaigns that require visuals to help back up the message, so even if you’re a convert to the Outlook style, minimalist template, sometimes a picture paints a thousand words. Images work to convey important information aimed at increasing customer engagement. The reality, however, is that designers can’t always count on images to load.

This is where ALT tags or ALT text come in.

The email marketing world has a commonly accepted best practice: the inclusion of “ALT tags” or “ALT text” that are used for images. This shorthand for ‘alternative text’ has become a common standard for email marketers, and there are several reasons for this – so let’s explore them in detail.

The first reason why ALT texts are used is that many email recipients block images by default. Commonly, an email will display the ALT text instead of showing an image. Are ALT texts bad? No! They are beneficial when an email design is image-heavy so even if the image isn’t displayed, the ALT tag can still help communicate the message.

The ALT text also appears when an image can’t or won’t load as a result of a broken link or a bad connection. And for the visually impaired, ALT text enables audiences to read the context of the image through screen readers.

While ALT text isn’t always pretty, it still provides information about the content of the image, and although users can’t see the images, the text has some context for the rest of the message. Here are some of our best practice tips on designing your email:

Best practice 1: Include ALT text for all images

Because many browsers don’t enable images by default, marketers are tempted to leave out images entirely. However, sometimes lack of images can make for unappealing emails that hurt a brand. Keep at least one strong image in the email and ensure it has ALT text so that even if the images don’t render, the ALT text keeps the context of the email alive.

Below are a few tables from Litmus that explain how ALT tags vary across email providers. Webmail clients rely on the browser in which emails are viewed to render the HTML. Desktop clients appear more reliable and mobile clients have strong support for styled ALT tags, especially for Android users.

*Outlook adds a security message to the Alt message and also needs height and width to be set as HTML attributes for ALT text to appear.

Best practice 2: Style ALT text for all images

Not only should you add ALT text to each image in your email, you should use dimensions so your ALT tag has a container and doesn’t collapse into other text. If the alternative message is too long and exceeds the container, it can disappear. That’s why you should keep these messages short and sweet. You’ll also be able to style these messages by font family, size, weight, style and colour to make them more appealing to read.

Best practice 3: Place bulletproof buttons for calls-to-action

Instead of inserting an image, place a “bulletproof” button created with HTML and CSS. This will ensure that whether or not images are on or off, it will still display – making your call-to-action visible all the time.

Before you send emails, test them with images on and off, so you can tell how the styles you’ve added to your alt text will look with the rest of your content.

We have learned that emails can use images effectively if you pay close attention to them. Those subscribers that choose to enable your images deserve to get something awesome in return, but those that don’t download your images should still be able to discern the context of your image with an ALT tag.

Discover the architecture of an outstanding email design.

CommuniGator is Iconic Digital’s chosen email partner – we use their platform to deliver email campaigns for our clients, with tracking, results and more.