For many organizations, email is an important tool for marketing and communication. Still, with the growing importance of email accessibility, many brands are realizing that their emails are not designed for all users. An accessible email experience ensures that everyone can access, understand, interact with, and contribute to the content within an email, regardless of their abilities, situation, or technology.
But what are the principles of designing emails that work for people regardless of abilities and highlight specific best practices you can implement?
What is Email Accessibility?
Email accessibility is about ensuring that people with disabilities, such as low vision, blindness, cognitive limitations, and mobility impairments can understand and interact with all the elements provided in your email. An accessible email considers people using assistive technologies like screen readers to access email visually. It also accounts for people with cognitive or learning disabilities who need simple designs without distractions.
Accessible email design focuses on principles like using semantic HTML, alternative text for images, sufficient color contrast, clear headings and labels, keyboard navigation, and more. These small changes ensure people with disabilities can perceive, understand, navigate, and interact with email content. Emails designed accessibly are also often more usable overall since simplifying design removes distractions for all users.
How Email Accessibility Improves Your Marketing Efforts
Implementing email accessibility improves your marketing in several ways:
- Reaches a wider audience. When emails are accessible, you include people with disabilities in your target audience; this opens your messaging to a significant part of the global population.
- Increases engagement. Usable designs tend to be more engaging for all people. Simple emails that are easy to scan and understand see higher open rates.
- Complies with compliance standards. Many laws now require accessibility in digital content, like WCAG. Ensuring email accessibility helps meet legal obligations.
- Enhances brand perception. Consumers appreciate brands that consider accessibility and inclusivity. It promotes goodwill among people with disabilities and their families/allies.
- Supports long-term email strategies. Future-proof your emails by starting with accessible design best practices now. As technology and needs change, your emails will remain usable.
Making small accessibility tweaks to your existing email templates and creation process can help you reach more potential customers while improving your brand reputation.
How to Design Accessible Emails
Making your emails accessible does not have to be difficult or expensive. Here are some specific best practices you can start implementing:
Maintain Image-to-text Ratios
Aim for a 60/40 ratio of text to images. That means 60% of your email is text, and the remaining 40% consists of images. You can also have fewer images, but don’t go over that 40%, as too many pictures without descriptive text can make the content confusing, especially for screen reader users. As a general rule, include at least 100 words of text for every image. Also, don’t forget to include textual alt attributes for all images to provide descriptions.
Choose a Simple Layout
Keep the email layout clean and clear by limiting the number of distinct sections, columns, or elements as much as possible. Stick to one or two evenly spaced columns so content flows in a linear, logical order for navigation. Avoid multi-level menus, carousels, or other complicated widgets that become disruptive when read sequentially.
Left Align Text Blocks
Left-aligned text is easier for most people to follow, especially those with cognitive disabilities. It also helps navigate email clients as users can continuously scan down the email. While centered or right-aligned text looks nice visually, it can cause confusion or unease for some.
Do not use Color Alone to Convey Information
Ensure any contextual information or cues provided solely by color also have a textual description. For example, if a green checkmark indicates an item is complete, include the word “Complete” as well; this makes your meaning clear for users with color blindness or in black and white printers.
Use Color Wisely
Consider sufficient color contrast ratios between text and backgrounds. Aim for an AA contrast ratio of 4.5:1 or higher between foreground and background colors according to WCAG guidelines. High contrast improves readability for many.
Use Legible Typography
Choose clear, easily readable fonts and font sizes. Sans serif typefaces like Arial, Helvetica, or Verdana work well in small sizes. Use font sizes of 16px or larger for body text. Line height (leading) should be at least 150% of the font size.
Avoid stylized, ornate, or thin fonts that are hard to decode. In addition, make dark-colored text for higher legibility against white backgrounds. As for bold or italics, they can be used sparingly for emphasis rather than underlining, which is harder to discern on screens.
Use Semantic Elements
Semantic HTML provides context, and applying the proper semantic element for each section aids comprehension, especially for assistive technologies:
- Use <header> for introductory content like the logo or introductory text.
- Sections falling under <header> can have <h1>-<h6> for additional subsections.
- Interactive elements like menus and buttons are marked with <nav>.
- Lists are denoted with <ul>/<ol>/<li> and associated <label> if in a form.
- Footer content wraps in <footer> with relevant tags inside like <p> or <ul>.
Consistent semantics enable logical reading and navigation of content.
For more information on this technical topic, see Smaily’s article on HTML emails and its possibilities and limitations.
Keep Enough White Space Around Elements
Generous spacing between headings, paragraphs, and other blocks using line breaks and spacing helps content feel breathable and reduces eye strain. Aim for equivalent to 1-2 blank lines between most blocks. Around images, space should be 1.5 times the image height/width for clear separation. Too little content may feel cramped, while too much wastes valuable email space.
Make Links and Buttons Different from the Other Email Elements
Ensure CTA-s like links and buttons, and other interactive elements have distinct colors, underlined styles, or other clear indicators from regular text for legibility. Color alone is insufficient. Focus indicators like outlines on active states aid accessibility. On the other hand, high-contrast colors benefit low-vision users, while subtle, careful styling ensures a seamless experience. Ultimately, it is advisable to test various form factors for legibility.
Create Responsive Emails
Design emails using relative widths and sizes so content looks good at various screen widths from mobile to desktop. Use media queries and grid frameworks for responsive tables and images that reflow better on narrow screens.
Avoid All Caps
While all caps may seem emphatic, they are more challenging for many people to read quickly due to increased eye fatigue. For example, a case where only the first letter is capitalized, like a normal book or article, allows faster reading speed.
Still, all caps should generally be avoided in body content areas. As an alternative, consider bold, a large font size, or italics for emphasis instead of all-caps text.
Use Inclusive Language
Inclusive language shows consideration for all people and avoids unintentional exclusion. For example, instead of “viewers,” say “users” since everyone accesses email. When featuring images of people, aim for diversity in representations.
When referring to disabilities, people-first language like “people with disabilities” is preferable to defined by condition language like “the blind.”
Specify a Language Attribute
The language attribute provides language information to search engines and assistive technologies. For most English emails, <html lang= “en”> is sufficient; this helps screen readers use the appropriate pronunciation rules. Specifying a language improves accessibility for users needing read-aloud or translated text. It also benefits search engine optimization by clarifying content for localization.
Use Role=” presentation” on Presentational Tables
Any table used for layout purposes or that contains non-data row and column headers should apply role=” presentation.” This tells assistive technologies to ignore the table structure since it does not contain data. Examples include layout tables holding a page header/footer or menu. The role prevents screen readers from attempting to read non-data cells sequentially, which could cause confusion.
These best practices will help make your emails accessible to the widest possible audience while also optimizing for engagement and compliance. Start applying a few of the tips to gradually update your email templates and process.
Conclusion: Accessible Emails are Required for Good Marketing
Email accessibility is important to reach all customers with your marketing communications. Design principles like semantic structure, sufficient contrast, alt text, and more help people with disabilities perceive, understand, and interact with email content. Accessible emails also tend to be better optimized for usability in general.
Making your emails accessible will help you reach a wider audience, improve overall compliance, and strengthen the brand image.