Add Alt Text to Images

This feature requires Author user level or higher.

We know the design of your campaigns is important, and images are a big part of what makes that design work. But in some cases, a subscriber may not be able to see the images in your campaigns. 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 your campaigns so every subscriber has a great experience.

About Alt Text

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

Alt text helps your subscribers understand what value an image adds to your overall 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 subscribers can't see your images, so include it for every image in your campaign.

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 subscriber there's an image there, but the subscriber has no way to determine 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 subscribers' inboxes, their email client may be blocking them. For security reasons, many email clients turn off images by default, so subscribers have to manually turn on image display. If your subscribers have images blocked, they'll see your alt text in place of your image.

Here's how alt text looks when images are blocked. The image on the left doesn't have alt text, and the image on the right does.

A section of a campaign that shows an image blocked that doesn't include alt text.A section of a campaign that shows and image blocked that does include alt text describing the image.

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 digest, so your subscribers can move on to the rest of your message. Aim for one or two 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
    The alt attribute that’s added to the raw HTML of your campaign uses quotation marks to identify where your actual alt text begins and ends. Additional quotation marks will cause the HTML to break.
  • Repeat Text That Appears in Images
    It's always best to keep important information in the main text of your message, and not contained in an image. But, if an image does include text, repeat that information in the alt text so your subscribers 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 subscriber 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 subscribers 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 subscribers can move past the image to the rest of your message. For example, just writing "Decorative image" would work.
  • 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 Campaign

Add Alt Text to Images

There are a couple of different ways to add alt text to images in MailChimp, and the method you use depends on where your image is located.

  • From an Image Block
  • From a Text Block
  • In Custom Coded Templates

From an Image Block

To add alt text to an image in any image content block like an Image, Image Group, Image Card, or Image + Caption, follow these steps.

  1. Navigate to the Design step of the Campaign Builder.
  2. Click the image block you want to work with.
  3. In the editing pane, click Alt.
    The editing pane for an image content block with the cursor over the link to add alt text.
  4. In the Image Alt-Text field, input the alt text for your image.
  5. Click Update.
    The alt text editor with example alt text and the cursor over the button to update alt text.
  6. Click Save & Close.

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

From a Text Block

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

  1. Navigate to the Design step of the Campaign Builder.
  2. Click the text block that contains the image you want to work with.
  3. Double-click the image to open the File Manager.
    Editing pane for a text content block that contains an image, with the cursor over the image.
  4. Click show image style options.
    Image editor for an image in a text content block, with the cursor over the Show Image Style Options link.
  5. In the Alt text field, input the alt text for your image.
  6. Click Save & Insert Image.
    Image editor for an image in a text content block with the cursor over the Save and Insert Image button.
  7. Click Save & Close.

Great job! Now when subscribers can't view your images, they won't miss out on your content.

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 type in your alt text.

Your code should look something like this:

Was this article helpful?
What can we do to improve articles like this?

Technical Support