Alt text is the text that displays for an image before images are downloaded by the email client. Learn more about setting up alt text, styling it, and why it is important in this post.
Topics covered in this article:
Alt text is a shortened term for alternate text and is the text that displays for an image before images are downloaded by the email client.
Alt text is added as an attribute in the HTML of your email. It looks like this in the email code:
<img src="https://wordfly.com/homework-icon.png" alt="WordFly Homework">
When images download in an email client, the images will display as you designed the email.
The same image space displays Alt Text (example, "WordFly Homework") when the email client does not download images.
Why set up Alt text
Alt text can be very helpful to your subscribers. Alt text helps inform users of the content of your email when images are not downloaded or when your images contain your call to action. Alt text is also used in web accessibility. Some of your subscribers might use screen readers to read your email. The alt text can serve to explain the image content.
Alt text uses the image dimensions (width and height) to display in the image container. In responsive design, width and height are not explicitly set for images to remain fluid. Without explicit image dimensions, some email clients will collapse the container area making the ALT text collapse as well. Additionally, on mobile devices, alt text may not display when the device is vertically oriented due to space constraints, but will display in a horizontal orientation.
Using styled Alt text
Styled alt text gives you an opportunity to add some branding to your alt text instead of showing plain text before the image is downloaded.
Example of styled Alt text in Gmail, on a Mac:
Compared to the same text displayed with no styling:
Email client support for styled Alt text
Email client support for styled alt text varies from good to none. Give it a try and see how it works for your branding!
|EMAIL CLIENTS||STYLED ALT TEXT SUPPORT|
|Gmail||Yes, but images are downloaded by default|
It's easy to set up your styled alt text in WordFly using Modern Editor. For any image area you can set the font family, font size, line height, text alignment, and text color for your alt text. Follow these steps:
1. Open your design in Modern Editor.
2. On the left side of the email (the edit content panel), click on the STYLESHEET tab.
3. Under ESSENTIALS click General Styles.
4. Click Image and Alt Text.
5. Add your styles for your alt text.
You can set the font family, font size, line height, text alignment, and text color for your alt text.
6. Click on the Blocks tab.
7. On the right side of the email (the email preview panel), click on an image in your email.
8. In the section labeled alt enter your alt text for the image.
9. Save your email template.
10. Send a test email to see how your styled alt text looks!