Simple Ways to Design More Accessible Emails
75% of the estimated 42.5 million people with disabilities in America report using the internet on a daily basis. When done properly, the internet can be a powerful tool to increase freedom and independence among individuals with visual, auditory, cognitive or physical limitations. Making your website accessible is not only the moral thing to do, but it also improves user experience, mitigates legal risk and increases audience size. Your current audience likely has many individuals who will benefit from accessibility best practices as well as prospective audience members who may have previously felt excluded from your communications.
How can I, as a content creator, make sure that the email my organization sends out is accessible?
Email accessibility is the art of crafting email messages that everyone can use and understand – including those with visual, auditory, cognitive, mobility, and other permanent or temporary limitations.
This also means honoring diversity and practicing inclusion through your organization’s updates, promotional information and making sure that digital communications reach all of your supporters.
Have you taken steps to include folks who have low vision or other visual limitations such as color blindness? Are you thinking about cognitive limitations such as ADHD or the brain fog we’ve all come to know associated with a temporary illness such as COVID-19? Could there be language barriers such as folks reading your material coming from a household where English isn’t the primary spoken language? What about physical limitations such as the ability to navigate using a mouse? In addition to what you’re saying through your email content, it’s important to consider how you’re saying it. Each person’s abilities and experiences cause them to consume information in different ways and you may unintentionally leave people out of the conversations.
W3C has developed Web Content Accessibility Guidelines, also known as WCAG, that help to define success criteria for accessibility in emails including: Use of Color (1.4.1), Contrast (1.4.3), Link Purpose (2.4.4) and Headings and Labels (2.4.6).
If you are lucky enough to get someone to open your message, you have about nine seconds of their attention. Make the most of it by considering these best practices with every message you send:
Use plain language for easier understanding among all users
Plain language is a style of writing that aims to be understood by as many people as possible. From news media to health information, the way we write often creates barriers to who can understand it. Plain language aims to remove these barriers by using simplified sentences and everyday vocabulary. Learn more about plain language writing style at plainlanguage.gov.
Incorporate diverse and inclusive images
Your supporters want to see themselves represented in your communications. Are the images you include diverse and inclusive, as well as related to the organization’s work and its supporters?
You are shaping the message going out into the world and what you select matters. The Selecting Inclusive Images for Public Media webinar explains the power you have working in public media to help break up the bias in our culture. The blog post How to Choose Inclusive Images for Public Media Marketing offers more recommendations as well.
If you are looking for more inclusive images from sources other than stock photo sites, there are other resources available.
- Gender Inclusivity: images of trans and non-binary models that go beyond the clichés.
- Disabilities and the BIPOC community: photos and illustrations celebrating disabled Black, Indigenous, people of color (BIPOC) identities
- Size inclusivity: Photos of plus-size individuals
Use appropriate alternative text for images
In addition to the subject line and sender’s name, all emails also need alternative text to accompany each image. Alternative text (also referred to as alt text, alt tags or alt descriptions) is a written description explaining the purpose of the image. This text helps assistive technologies describe the image to allow for a comparable user experience regardless of someone’s ability to see the image. This text also shows if an image fails to load on the screen. Additionally, alt text helps improve SEO by helping search engines crawl your website.
Use this text to describe the purpose of the image and answer why you included it for those with low vision. What is important about this image for your audience to know if they can’t see it? If the image is purely decorative, such as a dividing line between content sections, leave the alt text blank and a screen reader will ignore the image. Learn more about how to write alt text.
Keep line length short – between 50 and 75 characters in the body copy
Including more or less text than this can negatively impact readability. “This helps users with certain reading or visual disabilities that have trouble keeping their place when reading long lines of text. If the width of the text container is resized, it should be allowed to scale in a way so 80 characters or less are shown” (W3C).
Use headers and hierarchy
Proper headings add organization and structure to written content. Using headings and making them visually apparent is especially helpful for users with cognitive disabilities.
Use semantic code for your headers
Include appropriate headings in order (h1, h2, h3, h4) for clarity, navigation, screen readers, and quick scanning. Only include one <h1> heading. H1 is the main headline for the message and may help to identify the start of the content when using assistive technologies. Then always follow a logical downward hierarchy for all subheadings to keep the content in a logical reading order.
Center-align short text only
With each new line, the brain has to decipher where to focus the eye next. When center aligning, it may decrease reading speed and overall ease of consuming the information.
Avoid all caps
Readability is reduced with all caps because all words have a uniform rectangular shape which means that readers can’t identify words by their shape.
Underline hyperlinks and make sure hyperlinks have descriptive text
In design, we’ve gotten away from the underlines on hyperlinks and have been using color to distinguish them more and more. Can someone with a form of color blindness see the distinction clearly?
In addition to underlining, always add descriptive text with a hyperlink. Someone using assistive technologies will have no idea where “click here” or “read more” will take them.
Use text that is clear, legible, and easy to read on all screen sizes
Visual impairments, including aging eyesight, can make it difficult to read small text. Make sure all text is legible, including footer text and Unsubscribe links. Messages may be marked as spam if folks can’t see where to click to get off your lists.
Make sure call-to-action (CTA) buttons have a contrast ratio of 3:1
Contrast ratio refers to the difference in brightness between the text and its background color. The contrast ratio of CTA buttons should be at least 3:1 between the font color and button color. This is the minimum ratio that has been determined to still provide clarity for individuals with degrees of color blindness. Additionally, CTA text should be larger than body copy text to help it stand out and make it clear to users what is a clickable button.
Make sure buttons have adequate empty space around them to click on mobile devices
Have you ever clicked on a button and been taken somewhere other than where you expected to go? Adding spacing around buttons helps ensure people are clicking where intended regardless of physical dexterity.
Test to improve accessibility
- Use a free screen reader tool to experience the content for yourself. What is the experience really like? Are there any obvious improvements that can be made? Here are 10 free screen readers to get you started.
- Check that your content is written using plain language by visiting or downloading Hemingway App to see how your content is being perceived and who can understand your message.
- Check your line length.
- Use a tool like Email on Acid or Litmus which provide testing for:
- Are color contrasts at the correct ratios?
- Is there alt-text on all images?
- Are title attributes on hyperlinks, images and other assets removed? Title attribute is a small bit of HTML that provides supplementary information when hovering over a link and is not always picked up by screen readers.
- Are all hyperlinks underlined?
If your audience cannot read your email content, this will ultimately lower engagement rate metrics and increase unsubscribe rates. By prioritizing email accessibility, you will also set yourself apart from competitors as a shocking 99% of HTML emails being sent are considered to have “serious” or “critical” accessibility issues. Lastly, creating accessible email content makes it easier for everyone to understand, not just those with permanent or temporary disabilities.
