What is alt text?
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 (e.g., WordFly Homework) when the email client does not download images.
Why add 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 describe the image content or function.
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:
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 |
| Outlook | None |
| Apple Mail | Yes |
| Gmail | Yes, but images are downloaded by default |
| Yahoo | Yes |
| Outlook.com | Yes |
| AOL | Yes |
Add styled alt text
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. On the left side of the editor, click on the STYLESHEET tab
2. Click General Styles
3. In the Images section, click Image and Alt Text
4. 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.
5. Click on the Blocks tab
6. In the right panel, click on an image in your email
7. In the left panel, enter your alt text for the image
8. Save your email
9. Send a test email to see how your styled alt text looks