How to Make Your Email Campaigns More Accessible

woman typing on a computer
August Erickson holding a dog with sailboats in the background in Annapolis, MD
by August Erickson
Development Manager

Your organization spends a considerable amount of time creating attention-grabbing headlines and visually appealing graphics for your email campaigns, but have you ever stopped to think about whether or not they’re accessible to those with disabilities?

From selecting high-contrast color combinations to optimizing HTML for assistive technologies, there are simple steps you can take to ensure your email campaigns are inclusive to all.

In this blog post, we’ll provide digital accessibility best practices for email campaigns, aimed at ensuring your email campaigns connect and resonate with the broadest audience possible.

Alt Text for Images 

Imagine you're reading an email and there’s an image that everyone's talking about, but for some reason, you can’t see it. Frustrating, right? That’s where alt (alternative) text comes in.

Alt text is a short text description that lives in the HTML of your email campaign. For users relying on screen readers, the alt text is read aloud to them, allowing them to understand how the image(s) relate to the email content.

Tips For Providing High-Quality Alt Text:

  • Alt text should be concise yet informative. Try to be short and to the point when describing an image, keeping in mind that the provided text will be read aloud by screen readers. 
  • There's no need to include "Image of" or "Photo of" in alt text. Screen readers already announce when something is an image, so this just creates redundancy. 
  • If an image has text (like a quote or a chart), make sure that text is included in the provided alt text. 
  • Remember that context is key: The exact same image could convey different meanings in different emails. Tailor alt text to fit how the image is used in your specific email campaign. 

See this example for effective alt text on the image below: 

two women sitting at a table chatting

alt=“Two women chatting at a table in a restaurant”

Meaningful Link Text

Any email marketing specialist will tell you the key to a successful email campaign is a clear call to action. 

Whether you’re trying to have recipients visit your website or engage with your social media accounts, your call to action will almost always include links.

It’s vital to ensure the links included in your email campaigns can be properly analyzed by assistive technologies.

Tips for Making Links Accessible: 

  • Avoid vague link text like "Click Here." Rather, provide the necessary link context like "Click here to view our holiday schedule."
  • For non-text elements that are linked (such as images or social media icons), ensure you provide a meaningful link title within the HTML. 
  • It's important to clearly define link text with something other than color, such as underlining. 

Heading Structure

A properly nested heading structure is like a well-designed roadmap for your email. With a properly nested heading structure, users can understand the overall layout and organization of your content quickly. They can easily skip to sections of interest or get a general overview without having to sift through every single line of text.

screenshot of a miles forward email

In this example, "Trends Worth Watching" is the H1 heading. 

Simple Rules to Nail Your Heading Structure: 

  • Always start with a clear H1 heading. This H1 heading is your first impression, so make it count. It should clearly convey the main point or message of your email. 
  • It's vital your email campaigns follow a properly nested heading structure; H2 headings should be used for main sections, followed by H3 headings for subsections, etc. 
  • Keep your heading styles consistent throughout the email. This isn't just about fonts and sizes; it's about using headings in a consistent pattern that your readers can quickly recognize and follow. 
  • Avoid lengthy headings - keep them short, sweet and to the point. 

Color Contrast

Sufficient color contrast should be a top priority when designing email campaigns. This pertains to both text and non-text elements. We encourage you to focus on maximizing contrast, rather than defaulting to the most visually appealing color combinations. 

For WCAG 2.2 AA conformance, the contrast ratio for text has to be at least 4.5:1 (comparing the text color to the background color).

However, the ratio is lowered to 3:1 for large text, which is defined as at least 18 point (24px) OR 14 point (19px) if the text is bold (font-weight: 700). 

Additionally, the contrast ratio for non-text elements (such as icons) has to be at least 3:1.

Tips for Perfecting Color Contrast in Your Emails:

  • Consistently utilize online tools (such as the WebAIM: Contrast Checker) to ensure text and non-text elements meet the required contrast ratios. 
  • Avoid color reliance by ensuring that color isn't used as the only means of conveying important information. 
  • Transparency can decrease contrast, be cautious when using opacity in your design, especially with text. 

Emojis and Text in All Caps

Emojis have become a popular choice for businesses to communicate a more playful tone. When it comes to screen readers and readability, these stylistic choices can be a double-edged sword. Screen readers interpret text literally, so while an emoji can add emotion or humor to your message for sighted users, it can be a confusing jumble of words or sounds for those relying on assistive technologies.

For example, a simple smiley face emoji might be read aloud as "face with tears of joy," which could be perplexing out of context. Similarly, using text in all caps can send mixed signals. While it might be meant to grab attention or convey excitement, it's often interpreted as “shouting,” and for screen readers, it can disrupt the natural flow of reading by emphasizing each letter individually.

Tips for Using Emojis and Text in All Caps:

  • Use emojis selectively to add "flavor" to your message, but don't rely on them to convey essential information. 
  • Remember that screen readers will verbalize the description of the emoji. Ensure that its use makes sense in the context of the sentence for those hearing it rather than seeing it. 
  • Use text in all caps sparingly; remember that all caps can be perceived as "shouting" and some screen readers will announce each letter individually. For example, "BOOK NOW" may be read aloud as "B-O-O-K N-O-W." 

Avoid Cursive or Abstract Fonts

Cursive or abstract fonts can add a touch of class and personality, but they aren't always the easiest to read. When it comes to choosing fonts for your email campaigns, readability should be a top concern. While they may add a unique flair to your branding, they can be difficult to read for a large segment of your audience, including those with dyslexia or visual impairments.

Tips on Using Fonts Responsibly:

  • If cursive or abstract fonts are a must due to existing branding, consider using them only in headers, logos or other less text-heavy areas. 
  • For body content, choose fonts that are easy to read on various devices and screen sizes. Sans-serif fonts like Arial, Helvetica and Verdana are often recommended for their clarity and simplicity. 

The Challenges of iFrames

Incorporating Inline Frames (iFrames) in emails offers possibilities for embedding rich content like videos or interactive widgets, but brings a host of challenges that can impact the effectiveness of your email campaigns. Users who rely on screen readers might find it difficult to access the content within iFrames, as these elements are often not seamlessly integrated into the screen readers' flow. 

Accessible Alternatives to iFrames in Email Campaigns:

  • When possible, utilize direct links to external content rather than embedding via iFrames. 
  • For video content, use a natively hosted image or a GIF as a thumbnail that links to the video on a hosting platform like YouTube or Vimeo. 
  • For document-based (PDF) content, consider providing a link to the document hosted online, ensuring it's accessible to screen readers. 
  • If utilizing an iFrame is necessary, ensure that the iFrame has an appropriate title attribute (within the HTML). 

Let’s Work Together

Weaving accessibility into your email campaigns is not just a matter of compliance, but a commitment to inclusivity. By implementing best practices like those above, you can make sure your emails are accessible to a wider audience — which not only broadens your reach, but also enhances the overall user experience.

If you would like to discuss how we can help make your email campaigns more accessible, please reach out to our team.

Additional Blog Resources: 

Explore more

Get in touch

Let's work together
· Contact Us · Contact Us · Contact Us