Making your emails accessible: A guide to inclusive communication

With 1 in 6 people in the world having a disability and at least 2.2 billion people experiencing visual impairments, as per World Health Organization (WHO) data, accessibility isn't optional, it's essential!

Think about people using screen readers, which read the text on a page out loud. If your email isn't set up correctly, someone who is blind or has low vision might not be able to get your message.

While legal requirements are tightening globally, this is about more than just compliance. It’s about ensuring your voice reaches everyone, regardless of how they interact with their inbox.

Don’t worry about how to create accessible emails; we’ve written this article to help you navigate accessibility guidelines with ease!

You might be wondering: is email accessibility that different from web accessibility? The main ideas are the same, but the details are important.

While websites use modern code, emails are often built with older, less flexible technology. So, we have to be more deliberate and careful with our approach. For example, a key step for emails is creating a good plain-text version, which isn't always a priority for websites.

People with any kind of physical or cognitive disability have the same right to access information as anyone else. And, with more laws and regulations appearing, making your email and landing page content accessible is a must.

By making your content accessible, you're creating a better experience for everyone, reaching a wider audience, and building a stronger, more trustworthy brand.

Following the tips in this guide, along with the global standards of Web Content Accessibility Guidelines 2.2 (WCAG 2.2), will help you meet legal requirements. Plus, it’ll ensure your content is optimized so everyone can enjoy it.

Legal and ethical considerations

In many places, it's becoming the law to make your content accessible. For example, if you're a company in the U.S., you should make your emails accessible to comply with the Americans with Disabilities Act. In Ontario, companies must follow the Accessibility for Ontarians with Disabilities Act.

The latest standard on content accessibility is called the WCAG 2.2. This standard was created by the WAI (Web Accessibility Initiative) with the goal of making the internet an accessible place for everyone.

Inclusivity and broader reach 

By designing for accessibility, you ensure that your message isn't lost. You can reach more people, grow your audience, and boost engagement.

Improved user experience for everyone

Adapting your content to make it accessible for all users will improve your overall email design and make your content easier to read and understand for everyone.

Accessibility isn’t just for people with disabilities; it's about creating a simple, straightforward experience for all users. 

Brand reputation and trust

A company that shows it cares about all of its customers will be seen as more trustworthy and reputable. By making your emails accessible, you're sending a clear message that everyone in your audience matters.

Accessible design helps a diverse group of people, including:

• People with visual impairments: This includes people who are blind and use screen readers, as well as those with low vision or color blindness who rely on high contrast designs and text that can be easily resized

• People with cognitive disabilities: Clear, simple language and a logical layout can be a big help for people with conditions like ADHD or dyslexia

• People with motor impairments: Users who have trouble with a mouse rely on navigating with a keyboard, so it's important that your buttons and links are easy to get to without a mouse

• People with situational disabilities: This could be someone with a temporary injury, or a person trying to read their phone in a sunny park with glare on the screen

• Users of older devices or slow internet connections: A simple, text-based email with descriptive alt text will load quickly, even on a slow connection

The accessibility tips in this article are based on Web Content Accessibility Guidelines (WCAG) guidelines. These are a set of standards that guide how businesses can make digital content more accessible.

The guidelines focus on the core principles of making the content perceivable, operable, understandable and robust. Here's how you can apply these standards to your emails.

Perceivable: Can users access the information?

Visual content shouldn’t be a barrier; ensure every subscriber can see your message through thoughtful design and hidden descriptions by keeping these points in mind:

• Provide alternative text for visual elements: Keep the most important information in text form. When you use images, infographics, or buttons, you should include a description of them using alternative text (alt text). For decorative images that don’t convey information, use an empty alt tag (alt="") so screen readers will skip over them.

• Use a logical structure to define relationships: How you organize your content is just as important as the content itself. By using proper headings (<h1>, <h2>, etc.) and lists, you create a clear hierarchy that assistive technologies can understand. This helps people using screen readers navigate your content by allowing them to jump to the sections that are most relevant or interesting to them, rather than having to read through everything in a linear way.

• Use the right contrast ratio: We’ve all seen an email where the text was too light and almost impossible to read. To avoid this, make sure your text color has enough contrast with the background color. A safe bet is always dark text on a light background. 

• Avoid using color alone to convey meaning: It’s great to use color in your design, but don't rely on it as the only way to get a message across. For example, instead of saying, “Click the red button to continue,” say, “Click the 'Continue' button,” or, “Click the red button marked 'Continue'.” This helps people with color blindness know what to do.

• Use an accessible font: Fonts that are clean and easy to read are better for everyone, especially for people with visual impairments or learning disabilities. Stick to simple, widely available, sans-serif fonts like Arial, Helvetica, Calibri, and Verdana. If you want to go a step further, consider specialized fonts designed for readability, such as Lexend, or fonts for dyslexia like Dyslexie and OpenDyslexic.

• Avoid images of text: Never use images to display important text, like a phone number or a CTA. Screen readers won’t be able to read it. The text can also look blurry or fail to load.

• Ensure content can reflow: Your email should be readable and functional when zoomed to 400%. For people with low vision, this is essential for reading the text without needing a screen reader. A single-column, responsive design that doesn’t use fixed layouts is a great way to achieve this.

• Adjust text spacing for readability: For some users with cognitive disabilities or low vision, text that is too close together is hard to read. Make sure to use sufficient line height, letter spacing, and word spacing. This improves the readability and overall comfort for all your readers.

• Align text to one side: It’s generally easier for people with cognitive disabilities like dyslexia to read text that is aligned to the left. Try to avoid justifying your text, as this can create uneven spacing that makes reading difficult for some.

Operable: Can users navigate and interact?

Your email should be easy to navigate and interact with, whether your reader is using a mouse, a keyboard, or a voice command. Let's see the ways you can do that:

• Use descriptive subject lines and pre-headers: The subject line and preheader are the first things a subscriber sees, so they should be clear and descriptive. This way, people know exactly what to expect when they open the email.

• Provide descriptive link text: Avoid generic phrases like "click here" or "learn more." Instead, explain what the link is for. For example, "Read our latest guide on email accessibility" is much more helpful. 
  

• Use a logical structure with headings: When you create your newsletter, organize the information using proper headings (<h1>, <h2>). Headings create a hierarchy that helps people using screen readers easily navigate your content and find the right information.

• Use descriptive calls to action (CTAs): Your CTA buttons should clearly state what will happen when a user clicks them. A button that says "Download Report" is much more effective and accessible than one that just says "Click Here."

• Have descriptive input forms: When using a signup or contact form, make sure each input field is clearly labeled. The label should be linked to the field using semantic HTML (e.g., <label for="email">Email</label>). This tells a screen reader exactly what information to expect.

• Avoid flashing content: This is a critical point for safety. Content that flashes or blinks more than three times per second can trigger seizures in people with photosensitive epilepsy. Avoid using any flashing or rapidly blinking elements in your emails.

Understandable: Can users comprehend the information?

True accessibility means your message is easy to digest, with a clear flow and simple language that leaves no room for confusion. Here's how to do it:

• Use clear and simple language: Keep your copy straightforward and easy to understand. Avoid jargon, idioms, and abbreviations that might confuse a reader. Use short paragraphs and lists to break up information, making it easy to scan. For example, instead of "Our cutting-edge methodology empowers users to optimize their workflow," say, "Our new tool helps you work more efficiently."

• Maintain consistency: Use a consistent layout, color scheme, and language across all your emails. This predictability makes it easier for subscribers to read and understand your content.

Robust: Can it be interpreted reliably?

Build your emails on a strong technical foundation so they look and perform perfectly across all devices, apps, and assistive tools. Here's how you can do that:

• Provide a plain text version: This is a crucial step in email accessibility. A plain text version offers a fallback for screen readers and users who block HTML emails. Plain text campaign includes emails that don’t contain images, hyperlinks, or formatting like bold and italics.

  Make sure the plain text version is clear and includes all the key information from the HTML version. MailerLite generates a plain text version of your email automatically whenever you create an email campaign.

• Semantic HTML and ARIA: For developers, using a few specific tags can make a big difference. For example, adding role="presentation" to your layout tables tells screen readers to ignore the complex code and just read the content in a simple, straight line. Also, adding a language code like <html lang="en"> to your email's code helps screen readers pronounce the text correctly.

• Dark mode: More people are using dark mode, which can cause email clients to invert your colors. To avoid your email looking broken, use a transparent logo and make sure you have high-contrast text. For more control, developers can use the @media (prefers-color-scheme: dark) CSS query to create specific styles for dark mode.

To begin, you can check the user flow with built-in screen readers that are readily available on your devices. These are your best friends for understanding the experience of a visually impaired user. You can use:

• VoiceOver on macOS and iOS

• Microsoft Narrator, NVDA, and JAWS on Windows

• TalkBack on Android

• ChromeVox (Chrome OS) on Chromebook environments

Additionally, you can use automated accessibility checkers like the WAVE Web Accessibility Tool browser extension or Microsoft's Accessibility Insights to quickly scan your code for common issues.

For visual elements, tools like the WebAIM Color Contrast Checker and Color Oracle help you verify your color combinations and simulate different types of color blindness. 

If your email contains any animations or GIFs, it's essential to check for flashing content that could trigger seizures. You can use specialized tools like HardingFPA or the Photosensitive Epilepsy Analysis Tool (PEAT) for this.

Clarity is also key, and readability tools can help with this. The WebFX Readability Test Tool and the Hemingway App analyze your copy to ensure your message is clear, simple, and easy for everyone to understand.

Finally, remember the importance of manual checks. You should always navigate through your email using only your keyboard to ensure every link, button, and form field is reachable and operable. For a complete picture of real-world coverage, consider using services like Litmus and Email on Acid to test how accessible emails render in various clients like Gmail or Outlook.

Here’s a simple checklist your marketing team can use to make your emails ADA-compliant and meet WCAG 2.2 Level AA criteria:

• Subject line: Use a clear, descriptive subject line and preheader

• Code: Include lang="en" on your <html> tag and role="presentation" on all layout tables

• Visuals: Add descriptive ALT text to all meaningful images

• Contrast: Ensure a color contrast ratio of at least 4.5:1 for text

• Layout: Use a single-column, responsive layout that reflows when zoomed. Use tables for structural layout and compatibility but keep them simple. Avoid images of text

• Links: Make link text descriptive and include a visual cue like an underline

• Forms: Label all form fields clearly with <label> tags

• Content: Use a logical structure with headings (<h1>, <h2>) and simple, clear language

• Plain text: Always provide a clean, readable plain text version

• Testing: Test your email with a screen reader and with keyboard navigation before sending

• Dark mode compatibility: Test for accessibility in both light and dark environments

• Consistent layout and navigation: Do this to reinforce predictability for users across campaigns

• ARIA labels: For interactive elements with no visible text (like icon-only buttons), add ARIA attributes

• Error identification for forms: If forms are present, users should receive clear error messages