Maximize your holiday sales with stunning emails, Enjoy 10% off all email template orders 🎁 Claim Offer>>
Order Now

The Ultimate Email Accessibility Guidebook

As marketers, we always want our campaigns to make the biggest possible impact.

We go out of our way to develop new sales angles, discounting strategies, and other creative tactics that'll convince our audience to do business with us instead of our competitors.

Now, what if we told you that there's a more reliable way to ensure your campaigns make a lasting impact? One that will help you build relationships with your current audience and open you up to new ones?

Sounds interesting? Then let's talk about digital accessibility.

What is digital accessibility?

The Internet is meant to work for all people, no matter their hardware, software, language, location, or ability – states the W3C, consortium building the web standards.

As we stand today, we've still got a long way to go before reaching this objective.

According to AbilityNet, 90% are inaccessible to people with disabilities who rely on assistive technology.

The digital assets we encounter daily – or even develop ourselves – weren't built around the notion of inclusivity.

What digital accessibility is concerned with is making sure that all digital assets – such as emails, websites, and applications – are fully accessible to everyone.

Just how important is digital accessibility?

According to the World Health Organization (WHO), around 15% of the world's population lives with some form of disability. That's over 1 billion people across the whole globe.

But, accessibility isn't just about providing equal access to people with disabilities. It's also about benefiting and including other social groups like the elderly, people with temporary disabilities, people using smaller screens, or having a slow Internet connection.

Not only are these groups already considerable in numbers, but they also keep growing. Indeed, by 2060 the number of people 65 or older is expected to reach 98 million in the U.S. alone.

In other words, by making your digital assets accessible, you're opening yourself up to an ever-growing audience.

The good news is that digital inclusion isn't necessarily new, so you won't have to walk the unbeaten path to implement it in your company. It's a common practice among high-performing businesses, according to this study analyzing Fortune 100 companies.

So what are the opportunities if you start with email marketing?

5 reasons why email accessibility is good for any business

Let's put it all together and highlight what email accessibility can offer your business:

  • 01 Better reach

    By making your emails more accessible, you're opening up yourself to a broader audience.

    This includes people with disabilities, the elderly, and other social groups that'd previously find it challenging to consume your content.

    And given email's high penetration, you can expect that improvements you make in this channel will reach a sizeable audience.

  • 02 Better user experience

    Accessible emails create better experiences.

    It's not enough to provide access to your content, but it should also be equal for people of all abilities.

    By designing your emails with inclusion in mind, you'll improve your users' experience when interacting with your communications.

  • 03 Better engagement

    Better user experience leads to higher engagement. And higher engagement tends to correlate with higher conversion, too.

    By making your emails easier to consume, you're removing the friction that may be stopping your audience from engaging.

  • 04 Better brand recognition and recall

    At this moment, most brands don't support inclusion in their email campaigns.

    By being among the pioneers, you can reach a broader audience and set yourself apart from your competitors.

    And by providing consistent experience throughout all your channels, you'll improve your brand recognition and recall as well.

  • 05 Better inclusion leading to better brand value

    These days, consumers pay more attention to the brands they choose. They're looking for more than just utility. Instead, they want their brands to support their values and beliefs.

    That's why companies like Patagonia can get away with charging a premium for their products and still attracting a sizeable audience.

    By making your emails accessible, you can show your audience that you understand them, that you support their beliefs, and that your brand offers more value.

5 conditions to consider when creating accessible emails

Before we explore in detail how you can make your emails accessible, let's briefly go over the five major disability types you'll need to consider when designing your templates.

Here's how Yale University explains them in their Accessibility Policy:

  • 01 Visual

    Visual disabilities can range from mild or moderate vision loss in one or both eyes to substantial or complete loss of vision in both eyes. Some people experience reduced or lack of sensitivity to certain colors or color blindness and sensitivity to brightness.

  • 02 Auditory

    Auditory disabilities include mild to moderate hearing impairment in one or both ears. Even partial loss or difficulty can be problematic in regards to audio content.

  • 03 Cognitive

    Cognitive, learning, and neurological disabilities involve neurological disorders as well as behavioral and mental health disorders. They impact how well people process and comprehend information.

  • 04 Speech

    Speech disabilities include the inability to produce speech that is recognizable by other people or software. For instance, the volume or clarity of speech could make recognition difficult.

  • 05 Physical

    Physical or "motor" disabilities are weaknesses and limitations of muscular control. These include involuntary movements including tremors, lack of coordination, paralysis, limitations of sensation, joint disorders such as arthritis, pain that impedes movement, and missing limbs.

Email accessibility : A Methodical Approach

Let's dive into how you can make your emails more accessible for people of all abilities.

Accessibility Best Practices for the Inbox

Email subject line and the preheader are two of the three elements visible to your audience before they even decide to open up your message.

They're arguably the most important ones when driving message opens. That's why it makes sense to start optimizing your emails for accessibility with these two elements.

Here's how you can do it:

  • 01

    Make sure your subject line and the preheader are simple, descriptive, and not too long so that they won’t be truncated on smaller devices. They should capture well what your message is about and convince the recipients to open your message.

  • 02

    Be careful about using emojis. If your audience uses assistive technology to have your emails read aloud, your message may lose its meaning. This applies to using multiple emojis one after another or even a single emoji, which may be interpreted in various ways by different tools. If you have to use an emoji, make sure it's a single emoji added at the end of your subject line. And refrain from changing its color, as the color descriptor will also be read aloud by the assistive software.

  • 03

    Avoid writing in all caps. Words with all capitalized letters may be more difficult to read using magnifying tools. They're also harder to recognize by shape, and some screen readers may read them as acronyms, letter by letter.

Accessibility Best Practices for Email Content

Moving beyond the subject line and preheader, let's now explore how you can make your email content more accessible:

  • 01 Keep your content brief

    If possible, try to keep your content brief. While it may be easy for you to skim through an email and select key information, it's rarely the same experience for people using assistive technologies.

    Making your emails short will also help people with shorter attention spans or those having difficulties reading more extended pieces of text.

  • 02 Use simple and short sentences

    Another way to improve your email's readability is to keep your sentences short and jargon-free.

    You'll want to make sure your choice of words doesn't exclude people following your brand.

    Even if you have a highly sophisticated target audience, some of them might not know your language at a native level or have another condition affecting their ability to comprehend your content.

  • 03 Use descriptive hyperlink text

    Use hyperlink text that tells your audience where they'll land after they click your link.

    Stay away from generic phrases like "click here" and opt for more descriptive anchor text like "Here, you'll find our guide to designing accessible emails."

  • 04 Avoid referencing images in text

    It's best to avoid referencing images within your body text, for example, by telling your recipients they'll "see the image below."

    This may exclude recipients with a condition preventing them from seeing your email and confuse those whose device shows your message differently.

Accessibility Best Practices for Email Design

Accessibility makes your email easy to digest so it is not specifically for people with disabilities. By making your emails accessible, you make them easy to consume for everyone. Your emails should essentially be logical, readable, and easy to use. Let’s take a look at what best practices designers and developers need to follow when creating accessible emails:

  • 01 Maintain a logical reading order

    Email templates are commonly coded using tables. That is because this seems to be the most reliable way to ensure the email looks good across screens - desktop, webmail, and mobile email clients.

    Hence, great emphasis needs to be laid on the content order. Now consider that some of your email recipients are using screen readers to read your email. If the content sequence in the tables does not comply with the left to right and top to bottom reading order, the screen reader will not read out the content the way you wanted it to reach your recipients. Naturally, the recipient will get confused due to the random content being read out.

    So plan and build your templates accordingly. This is the order in which the content is read:

    A logical reading order becomes even more important when creating responsive emails. What’s the best way to curb the possibility of content being read out incorrectly? Use a single-column layout for all screen sizes.

  • 02 Enhance readability with ideal text-background color contrast

    Dark text on a light background - that’s the ideal way to present your message, as this is the best combination for good readability.

    A low-contrast color combination can deliver a not-so-good reading experience. Imagine you get an email with gray text on a white background. Wouldn’t it make the text hard to read?

    While this practice will enhance the overall user experience, it is essential for your recipients with color blindness. The contrast is crucial if you don’t want them to miss out on the content.

    Another option is using a dark background and light text. While this can be an alternative for your actual email, you can design a standard email with dark text on a light background and create a dark mode of the same email. The dark mode in email is preferred by many who are sensitive to light.

    The ideal contrast ratio between the text and background? It should be greater than or equal to 4.5:1 for small font and 3:1 for large font sizes.

    How would you know the color contrast ratio? There are several tools available online to check the same. Some are:

    • a. Contrast Ratio
    • b. Contrast Finder
    • c. Monsido
    • d. Coolors

    Take a look at this email from Nutrafruit. The color contrast is good, and the email body copy is left aligned too.

  • 03 Align left to get it right

    Left-align your email copy- this further improves readability. With each line starting just below the earlier one, left alignment makes the text easy to read for everyone, especially if your email copy is long.

    Center-aligned text may have its charm, but it’s best avoided when looking to impart a good user experience.

    Your next question would be, what about justified alignment? Well, this is a strict no. The uneven character and word spacing created by this alignment makes the copy difficult to read for those with dyslexia as well as normal individuals. Moreover, some email clients may not really do justice to the justified text, imparting a rather bad experience.

  • 04 Use fonts judiciously

    Once again, readability must be at the top of your mind when choosing the best font for your emails. It makes no sense to use fonts that your readers find difficult to read.

    It is a good practice to use simple fonts with minimal decoration. As far as the font size is concerned, a good rule of thumb is that it should be greater than or equal to 14px.

    Serif and Sans Serif are the most commonly used font categories in emails. While the latter is preferred by many, web-safe fonts that fall in these two categories are considered to be the best options.

    So, does this mean you should never use any fancy, decorative fonts? Well, when it comes to special emails like those you create for the holidays, you would want to use custom fonts, and the good news is that you can.

    When using a custom font, an appropriate fallback is critical.

    When you send an email with a custom font, the email rendering engine shall first look at whether the custom font is installed on the recipient’s device. If it is not, it will move to the 1st fallback (web-safe font) entered by you in the code. In case that too is not installed in the device, the 2nd fallback (system-based font) will be displayed.

    This email from Salesforce uses the Courier font, which is a web-safe font that belongs to the Serif font-family:

  • 05 Employ short line length and appropriate line height

    Let’s dive into ideal line length first. The ideal line length designers should strive for is between 45 to 75 characters.

    What happens when the line is too long? Your recipients will find it difficult to focus on the text. And if the line length is shorter? Readers need to travel back to the left too often to read the next line - and it naturally breaks the reading rhythm.

    It is also good to have short paragraphs, headings, pointers, and images to break the monotony.

    Now, let’s dive into the ideal line height specifications.

    Well, it all depends on your font size and line length, but here’s a general idea as to what should be the ideal line-height - keep it at least 1.5 times the font size.

    If the lines are too close to each other, it can become hard for the reader’s eye to separate two lines, and they might skip a line and start reading the next. If the lines are placed at a greater distance from one another, they won’t seem connected.

    Take a look at this email from Email Uplers.

    The font size used in the email body is 15pt, the line height is 25pt, and the line length is 71 characters.

  • 06 Use a simple GIF animation, as far as possible

    GIFs are a rage in emails. And yes, they do impart an amazing experience with the engaging animation and the possibility of effectively conveying more content in lesser space. Moreover, GIFs are supported by almost all email clients.

    But GIFs can throw a spanner in the works when it comes to accessibility.

    GIFs with flashing content, colors, bold patterns with high contrast, and even animations that change too quickly can harm photosensitive people. Imagine you have your entire email message wrapped up in GIF slides. Now, if your recipient has some visual challenges and cannot read the content before the slide changes. This is sure to impart a bad experience.

    What’s the best way to use GIFs? Make sure the transitions are smooth and your slides do not change at high speed. Also, ensure you have appropriate alt text for the GIF images so that you can get your message through to people using screen readers as well.

  • 07 Give your email some ‘white space’

    The purpose of your email is to convey a message. So, you may add whatever bells and whistles, but the primary message should not get buried under it.

    Adequate and appropriate white space makes each element in your email stand out; do not cram everything close together. This can make it difficult or impossible for those with vision issues and dyslexia to read your content and differentiate between elements. Use typographic margins and insert paragraph spacing for better readability.

    This Headspace email makes great use of white space to ensure the email is not cluttered and the reader’s attention is on message.

  • 08 Optimize your CTA; make it easy to click

    Continuing with the previous point, the use of white space is vital even for your CTAs. Enough white space around the CTA makes it distinct and also helps to avoid any accidental taps.

    A clear and compelling CTA helps drive conversions. Keep these 3 points in mind when designing an accessible CTA:

    • a. Use a strong color contrast
    • b. Make the CTA clickable with a keyboard
    • c. Use clear labels that are consistent with CTA text

    What also needs to be optimized is the CTA button size. WCAG says that the minimum size for a CTA should be 44 X 44 px. Google, on the other hand, recommends 48 X 48px. Make sure you follow the CTA button size best practices or your recipients with impairments might find it difficult to click the button, especially when viewed on a mobile device.

Accessibility Best Practices for Email Coding

Accessibility makes your email easy to digest so it is not specifically for people with disabilities. By making your emails accessible, you make them easy to consume for everyone. Your emails should essentially be logical, readable, and easy to use. Let’s take a look at what best practices designers and developers need to follow when creating accessible emails:

  • 01 Set table roles to "presentation"

    We talked about logical reading order and using tables for the same in the first point in the design section.

    You know that some of your recipients use assistive technologies to read their emails aloud.

    When you set table roles to "presentation", the screen readers will read the table in a way that makes sense; it uses Assistive Rich Internet Applications or ARIA to do so.

    If this table role is not set, the screen reader will navigate the table as a data table, and instead of reading the text in the table, it will read out the HTML code.

  • 02 Opt for semantic markup

    Table markup is a traditional way of coding emails, and this includes separate table rows for headings and paragraphs. However, the new-age developers prefer semantic markup to table markup.

    Coding your paragraphs, lists, and headings as <p>, <ul>, <ol>, <h1>, <h2> helps those using assistive technology like screen readers and keyboard-only access to determine the hierarchy of your HTML email. This guides them through the content of your email - helping them read the content in the right sequence and easily apprehend your message.

    Apply the margins you want for each element and set styles like email body, copy font size, line height, etc., on a parent element, and all paragraphs can inherit it.

  • 03 Make provisions for keyboard-only access

    Some people can’t use the mouse due to a physical disability or vision impairment that does not let them see the mouse pointer on the screen. Your entire email must be accessible with the keyboard. This makes it easy for keyboard users to move between links, buttons, and other controls using various keystrokes.

    However, custom-made controls, CSS styles, and scripts that control interaction will need additional coding for keyboard compatibility.

  • 04 Make use of the "lang" attribute

    Most devices have an in-built screen reader software. The software will read the content aloud for those who use it. Now, you must specify the language in which your email text is written to avoid any incorrect pronunciations. The "lang" attribute comes in handy here.

    Set a main language for the <html> element. Now, you need to know that some email clients remove this element when displaying the email. To ensure this does not affect the user experience, use the attribute on a wrapper element inside the <body>. You can use it as a <div> around the entire email body copy.

Tools you can use to check your emails for accessibility

There are several tools available online that help to check how accessible your digital campaigns are, including your emails. Let’s take a look at some of them:

  • Accessible-email.org

    This tool is specifically designed to check the accessibility of your emails. All you need to do is add in your HTML email, and it will straightaway analyze aspects like whether you have added headings, alt text, table roles as "presentation", lang attribute, and CTA & other link labels.

Apart from this, you can check for your email’s accessibility with these tools used for Web accessibility as well:

Email Accessibility Checklist

Inbox Checklist
  • My subject line and preheader are simple and crisp
  • I have used emojis prudently
  • I have not used all caps text
Content Checklist
  • My email copy is short
  • I have used simple, short sentences
  • I have added descriptive hyperlink text
  • I have not added references to images in email body
Design Checklist
  • A logical reading order has been maintained
  • Text-background color contrast ratio is greater than or equal to 4.5:1 for small & 3:1 for large font
  • Email body copy is left aligned
  • I have used a web-safe font from Serif or Sans Serif font family
  • I have used a custom font but added appropriate fallback
  • The font size used is greater than or equal to 14px
  • Email body line length is between 45-75 characters
  • Line height is 1.5 times the font size used
  • The transition of my GIF slides is smooth
  • The slides of the GIF change at a reasonable speed (not too fast)
  • I have added alt text for the GIF slides
  • I have used enough white space in my email
  • Strong color contrast has been used for the CTA
  • The CTA is clickable with a keyboard
  • Clear labels have been added to the CTA and other links
  • The CTA button size is 44 X 44 px or greater
Coding Checklist
  • I have set the table roles to "presentation"
  • I have use paragraph, list, and heading elements
  • I have coded for complete keyboard access
  • I have used the "lang" attribute

Wrapping Up

Email is arguably the best marketing channel, and to make it even more effective for your brand image and business in general, it’s crucial to create accessible emails that are loved by all your recipients- including people who are differently abled. We hope this detailed guide will help you ace email accessibility.

About the Authors

Prajakti Pathak

Prajakti is the Content Team Lead at Email Uplers. A content creator, editor, and strategist with 10+ years of hands-on experience, she finds her happy place in the world of words and emails.

About Email Uplers

Email Uplers is a full-service email marketing agency that has helped 5000+ clients across the globe with email template production, campaign management, email automation, and dedicated email experts.

Michal Leszczyński

Michal Leszczynski is immersed in developing, implementing, and coordinating all manner of content marketing projects as the Head of Content Marketing and Partnerships at GetResponse.

About GetResponse

Powerful, simplified tool to send emails, create web-pages, and automate your marketing. Grow your audience, engage with more customers, sell your knowledge and boost sales all from one platform.

Download as Ebook

Download as Ebook

Thanks