Add Alt Text to Images

If you add a title attribute to a linked image, the title attribute displays instead of alt text.

We know the design of your emails is important, and images are a big part of what makes that design work. But in some cases, a recipient may not be able to see the images in your emails. That's where alt text comes in.

In this article, you'll learn about alternative text for images, and how to add alt text to emails so every recipient has a smooth experience.

About alt text

Alt text, or alternative text, is a short description of an image in your email that displays when recipients are unable to view your images. This can happen if they have images turned off in their email client, or are reading your email with a screen reader.

Alt text helps your recipients understand what value an image adds to your message, or lets them know that an image is decorative and can be ignored. It may seem like a small thing, but alt text can be very important if recipients can't see images.

Alt text and accessibility

Alt text is especially important for people who use screen readers, so it's considered a basic best practice for email accessibility.

Without alt text, a screen reader will tell your recipients there's an image there, but they won't be able to tell what information the image provides. To learn more about accessibility best practices, check out Accessibility in Email Marketing.

Alt text and image display

If your images aren't showing up in your recipients' inboxes, their email client may be blocking them. Many email clients turn off images by default. If your recipients have blocked images, they'll see your alt text in place of an image.

Here's what a blocked image looks like without alt text.

This blocked image does have alt text.

Tips for effective alt text

Here are a few tips to keep in mind to help you write appropriate, effective alt text.

• Keep it short
  Alt text should be easy to read and understand, so your recipients can move on to the rest of your message. Use 1 or 2 sentences.
• Use proper punctuation
  Screen readers use punctuation to know where to pause when reading content, so it's important to use proper punctuation in your alt text.
• Don't use quotes
  Alt attributes in HTML use quotation marks to identify where your alt text begins and ends. Additional quotation marks break the HTML.
• Repeat text that appears in images
  It's best to keep important information in the main text of your message and not contained within an image. If an image includes content, repeat the information in the alt text so your recipients don't miss it.
• Don't repeat image captions
  Image captions are read by screen readers and display even when images are blocked, so don't repeat image captions in your alt text. Alt text should provide information about your image that your recipients can't get from the caption alone.
• Consider context
  Context is the most important thing to consider when you write alt text for an image. How does the image relate to the content around it? Ask yourself what information your recipients might already have about the image based on surrounding content.
• Identify decorative images
  If your image is purely decorative, briefly state that in your alt text so your recipients can move past the image to the rest of your message. For example, use "Decorative image" for your alt text.
• Test your content
  Some email clients won't display alt text for a linked image, or won't display alt text that exceeds the image width. Send test emails to different email clients and disable images to find out how your alt text will display.
  
  Preview and Test Your Email

Add alt text to images

There are a few ways to add alt text to images in Mailchimp. The method you use depends on where your image is located.

• From an image content block
• In custom-coded templates

From an image content block

To add alt text to an image in any image content block, follow these steps.

1. Click the image block you want to work with.
2. In the side panel, enter your alt text in the field provided.
   
   If you’re using the classic builder, click the Alt link in the editing pane, enter your text in the field provided, then click Update.
3. Click Save and exit. If you're using the classic builder, click Save & Close.

All set! Now your subscribers won't miss out on your content, even if they can't view your images.

In custom-coded templates

If you code your own templates, you'll need to include an alt attribute for each image you use. Insert the alt attribute inside the image tag and enter your alt text.

Your code should look something like this.

<img alt="Woman holding a small clay pot stamped with the Potted Planter logo." align="none" height="400" src="https://gallery.mailchimp.com/example.jpg" style="width: 600px; height: 400px; margin: 0px;" width="600" />