ALT Texts: 3 Steps to Magnify Your Campaigns (Even without Images)

Publié le : 28 August 2018 par Thomas Leroy

Email clients that seem allergic to images, bad connections, etc. leads, quite often, to your fine-crafted email campaigns being viewed sans images. Is this a missed occasion to make an impression in their inbox? Not at all, as long as you follow this guide to make the most of the ALT texts in your email.

Impactful visuals, a masterful typographical and colour hierarchy, and an impeccable and responsive rendering: your brand-new email marketing campaign is coming along marvellously—right up until you get curious enough to check the rendering with images blocked. What horror!

ALT text: example of a Uniqlo email with images visible ALT text: example of a Uniqlo email with images blocked

Uniqlo’s designers created a very beautiful campaign…which was done an unfortunate disservice by the lack of alternative text.

How can you manage to be read, be understood, and make an impression with recipients who can’t (or don’t want to) display the images in your emails? By mastering the art of alternative texts. Here’s a little guide to help you excel at ALT texts.

Warm-up: assess the extent of the damage

If email is one of the channels via which you communicate with your customers, you know very well that it’s quite far from being a homogeneous technical environment, particularly in the way image rendering and alternative texts are handled.

There are four major cases to consider depending on the configuration used by your recipients:

Behaviour Desktop clients Webmails Mobile clients
1. Image-friendly Display images by default
Support alternative text
Allow you to define the style
Apple Mail, Thunderbird, Gmail (in Chrome and Firefox) In Chrome: Inbox by Gmail, G Suite, Mail.ru, Freenet.de, Orange.fr, SFR.fr Gmail (application and browser, for iOS and Android), Inbox by Gmail (iOS and Android), IOS11.x
2. ALT-text-friendly Images blocked by default
Alternative text and ALT text styles supported
Outlook 11 and Outlook 2016 for Mac
AOL Mail for Chrome and Firefox
Yahoo! Mail (in Chrome)
Outlook.com (Chrome and Firefox)
Android 4.x (native client)
AOL Mail (application, via iOS and Android browsers)
Blackberry OS7 and Z10
3. Minimalist ALT text Images blocked
ALT text supported
ALT text styles not supported
Lotus Notes 8.5
Outlook 2000-2003, 2007, 2010, 2013 and 2016
AOL Mail in Internet Explorer
Yahoo! Mail in Firefox and IE
4. Every email marketer’s worst nightmare Images blocked
No possibility of ALT text
Window Mobile 7 .5
Windows Phone 8
Yahoo! Application for Android.

To have a more complete understanding of the problem, we suggest you consult this excellent guide on blocking images and managing ALT-text from Litmus.

ALT Text—Level 1: Place them (and write them) well

TL;DR: Write alternative texts for the important images first (and attribute an empty ALT text for the others). Don’t paraphrase the other messages in the email; use this space to provide complementary content, as short and motivational as possible.

Your recipient reads your email with a client that blocks images. Either they’ve chosen to block images, or are suffering a bad connection, or they are visually impaired (in France alone, 1.7 million people suffer from vision troubles, including 207,000 who are blind or “seriously” impaired). As you can see, there are many situations in which the images making up your campaign won’t be seen.

The solution? Add the ALT attribute to your HTML code. This attribute is there to describe the image if it doesn’t display. It’s integrated into the <img /> (image) tag, like so:

See the Pen ALT text niveau 1 by Adrien Guilleminot (@aguilleminot) on CodePen.

To note: if you use our Dartagnan email builder, a field is provided for this when you import your visuals.

To alt or not to alt? That is the question

Do you need to use it on all your images? Certainly not. Certain illustrations are purely decorative, and even “untranslatable” into text. In these cases, provide an empty ALT attribute (<alt= ” ” ). And if you want to know more about the distinction between informative, decorative, and functional images, read this very complete tutorial from W3C.

The advantage of this technique is that the image will be “read” as a blank by the voice browsers used by visually-impaired readers. The clothing brand Bonnegueule serves as an excellent example for this technique: as the images do nothing more than provide an illustration of the product, the empty ALT attribute allows them to display a sober and very readable version when images are blocked.

ALT text: a Bonnegueule email (images loaded) ALT text: a Bonnegueule email (images not loaded)

The lesson of Bonnegueule: sometimes, an empty ALT attribute is enough.

What to say in an ALT-text?

For the logo, the name of the brand will suffice. For a more significant image, you should complement the surrounding text. Our advice? Display your campaign with the images blocked (a functionality that’s directly accessible in the Dartagnan interface), and ask yourself the following questions:

  • Is my message comprehensible and transmitted in an optimal way without alternative text for this image? If the answer is yes, put an empty ALT attribute.
  • If not, what information do I need to add in my alternative text to make my email more intelligible?
  • If I go through and read the following text and alternative image texts, is the content clear, logical, and free of useless repetition?

What room is there for the alternative text?

Of course, alternative text needs to be informative, but it also needs to be striking! Space is limited, and the objective isn’t to write a novel. One rule should be kept in mind: the available space is that of the image block.

This should therefore be specified in the code of your email, thanks to the width and height attributes (in the <img /> tag) or directly in the Dartagnan interface, if you’re using it.

Simple, clear, and effective: look how Showroomprivé has managed to “translate” a very visual email thanks to alternative texts which perfectly explain the most important calls-to-action of their campaign.

ALT text: Showroomprivé email example (images visible) ALT text: Showroomprivé email example (images blocked)

Showroomprivé: no loss of information thanks to judicious use of ALT texts

Level 2: Giving your ALT texts style

TL;DR: Style, alignment, font and image block colour: by playing with these four elements, you can multiply the impact of your alternative texts.

According to the 2017 State of Email Creative study by Litmus, writing ALT attributes is a reflex that is already ingrained in the minds of email marketers. 83% of them say they often or always use alternative texts in their campaigns.

That’s good and all, but most stop there, failing to reach the next step. Only 22.6% set a style for their ALT texts. So this presents an opportunity to stand out from the majority of your competitors!

What can we “stylize” in alternative text?

With a few lines of CSS in the code of your email, you can give a bit more style to your emails when images have been blocked:

  • By playing with the fonts: font family choice, size, colour, and style (bold, light or normal, italic, etc.)
  • By playing with the colour of the container for your alternative text (the image block)

An example? See how the e-commerce shop ASOS uses a minimalist (yet fiendishly effective) style with their alternative texts. Despite a very visual campaign (beautiful header image, CTA in pictorial form, etc.), they ensure that the primary messages are relayed perfectly, with a visual rendering that remains coherent with their identity charter.

ALT text: ASOS email example (images loaded) ALT text: Asos email example (images blocked)

ASOS adds a bit of zest to their ALT texts.

How to define the style of ALT texts

In the “Milady Release” newsletter that we send to Dartagnan users to inform them of our platform’s latest functionalities, a first step would be to use this code for the alternative text of the newsletter’s logo:

ALT text: the logo of our newsletter Milady Release

See the Pen ALT text basique by Adrien Guilleminot (@aguilleminot) on CodePen.

To improve the rendering, we can then:

  • Define a white background (background attribute)
  • Centre the text (text-align)
  • Choose to display alternative text in Georgia or default to a serif font (font-family)
  • Give it a good colour, good size, weight, and display it in italics (colour, font-size, font-weight, and font-style)

With the effort of a few lines of code, the result is a lot closer to the original image.

See the Pen ALT-text styled by Adrien Guilleminot (@aguilleminot) on CodePen.

Note that if you use Dartagnan to design your emails, you can define and apply style to your ALT texts (colour, size, weight, font, etc.) without typing a single line of code, directly in the interface of our email builder.

Level 3: Combine alternative text and pixel art

Even better: by playing with different style attributes of the ALT texts, and by cleverly arranging the different cells that make up their email campaigns, certain advertisers have managed to make their emails almost as attractive without images as with.

This technique requires not only a mastery of the different attributes that can be used with alternative text, but also structuring your email while keeping in mind the desired rendering for blocked images right from the start. This process is much easier when you use an email builder like Dartagnan.

And after? Optimise the accessibility of your campaigns (and prepare for the future!)

There’s more to consider concerning alternative texts than simply asking yourself “how do I make it pretty, even when images are blocked?”.

You must also make your campaigns accessible, in particular for blind or visually-impaired recipients. They “read” your email using speech synthesis software, usually natively offered by different platforms, for example: Microsoft, iOS, and Android.

To facilitate the vocal synthesis of your campaigns, think “semantic”.

To be sure that your message gets through as much as possible, you should facilitate the job of these vocal assistants. That’s the role of the “semantic” tags and attributes, which you can find an entire list of here. They let you specify in your email code:

  • The language used in your message, via the “lang” attribute. For example, <html lang=”en”> at the beginning of your email, and <cite lang=”fr”> if a passage of your email is in French.
  • The different sections of your email (header, section, address to provide your information, etc.)
  • The type of content offered (img, video, audio, etc.)

We suggest, once this has all been done, trying out your email with speech synthesis using the principal devices, clients, and webmail:

Speech synthesis—an important future matter

Does “vocal” reading of emails seem irrelevant to you? It won’t be for long. For certain configurations (notably mobile), studies have shown that 20% to 40% of searches are already performed vocally.

And in the future, if Amazon Alexa, Google Home, and Apple HomePod keep their promises, a non-negligible part of your email campaigns will not be read, but rather listened to by your customers. In other words: by already starting to think about the “vocal rendering” of your campaigns, you’ll be able to adapt to this future trend before it becomes unavoidable.

Aucun commentaire pour l'instant

Quelque chose à dire ?

Your email address will not be published. Required fields are marked *

(Very) good news !

Le meilleur de l'actualité email marketing rédigée

(ou dénichée) par nos experts dans votre boîte mail.