In our last post, we talked about what email accessibility is and why it matters. In this post, we’ll dig in to exactly how to make your emails accessible to everyone and the best practices to use.

Prefer to listen instead? Check out our email accessibility podcast right here. ⬇️

What is email accessibility?

Email accessibility is the practice of making emails readable to those with disabilities, which can include neurological, physical, auditory, cognitive, speech, visual, and temporary impairments. The goal of email accessibility is that everyone has the ability to receive emails in a way that they can consume them.

Learn more about what email accessibility is and why it matters. 

How to make your emails accessible: email accessibility best practices

Now that you know what email accessibility is, let’s work through some of the best practices that will allow your emails to be consumable by the largest audience possible.

Best practices for email accessibility: 

1. Subject line and preheaders
2. Copy/content
3. Layout structure
4. Images
5. Typography
6. Colors
7. Buttons/links

1. Subject lines and preheaders

The first step is writing accessible subject lines and preheaders.

Your subject lines should be brief but descriptive and give subscribers an accurate idea of what’s in your email.

Effective subject lines aren’t just good for accessibility, though, they also tend to increase overall subscriber engagement.

What are preheaders?

A preheader is the short text snippet or summary text that directly follows the subject line when an email is previewed. Many desktop, web, and mobile email browsers provide them to give the recipient a little more information before they open the email.

2. Copy/content

The next step is copy. Write copy that’s easy to read. Always keep in mind that you’re writing to humans – not simply to leads or numbers.

If your content is accessible, it’s also much easier for all of your subscribers to consume. Focus on:

• Readability: Stick to writing at an eighth-grade reading level, which will allow for around 85% of the general population to easily understand your content.
• Consistency: Use the same terms to describe the same things. For example, if you refer to action as “edit,” don’t call it “change” later in your email.
• Defined: If there’s a chance someone won’t know what a word or phrase means, take the time to define it.
• Easily digestible: Write short paragraphs and break up blocks of text with headers and bullet points. This makes content easier to both read and skim.

3. Layout structure

When considering how to make your emails accessible, the structure of your content is very important. Here are some tips for maintaining an engaging and easily-consumable structure.

Maintain a logical reading order

Make your titles bigger than your paragraphs. Always write from left to right and top to bottom.

Use heading elements in code <h1>, <h2>, <h3>, etc.

This is very important, as the screen readers take the titles from the code.

Consider dyslexia: avoid justified content or centered content

It’s important when designing and developing emails to left-align large bodies of text in order to help those with dyslexia consume the content. About 22 million Americans struggle with some symptoms of dyslexia, so be mindful that your email content should be as accessible and impactful as possible.

Properly format tables for accessibility

Tables are commonly used for laying out content in an email, but unless they are properly created in HTML, screen readers will have a difficult time reading them. Though they may look good, they may sound terrible on a screen reader. For layout tables, this is easily fixed by specifying that the table has role=”presentation.” This tells the screen reader to read the content from top to bottom, left to right. And if the table is a data table, ensure that you include headers to give context to the table information.

Avoid image-only emails

Sometimes, because of design, we believe that it is better to just use a full image in an email. The reality, however, is that we don’t want to use just one image with all text.

4. Colors

When dealing with colors, it’s important to use appropriate color contrast.

A 1:1 ratio has very little contrast (think of white text on a white background) while 21:1 has large contrast (black text on white background). WCAG’s standards require a minimum contrast ratio of 4.5:1 for standard-sized text. For text larger than 23px, or bold text larger than 18px, the ratio should be 3:1.

5. Images

When it comes to images, here are a few other things to keep in mind:

The alt text must describe the meaning, not describe the image. If the image is decorative – like stock photography, which is almost always decorative – you must include the alt but make it blank. This is an indicator to the screen reader that it can just skip mentioning the image because it conveys no information. 

Use different alt text for each image, even if the images are similar. Imagine how confusing it would be to someone using a screen reader if all the pictures sounded exactly the same.

Don’t add title text in addition to alt text. Most screen readers will read both the title text and alt text, which doesn’t provide an ideal listening experience.

Use empty alt text when appropriate. If your image strictly serves a design purpose (like a swirl, pattern, or shadow) then alt text may not be necessary. However, make sure to add an empty alt=”” to the image so screen readers know to skip over it.

Examples:

• Bad Alt: alt=”Image of woman drinking coffee using smartphone”
• Alt for a Decorative Image of a Woman Using a Smartphone: alt=””
• Useful Alt for an Image with Text: alt=”Introductory mortgage rate of 3.5 percent”

6. Typography and font

It’s important to adjust your typography and use appropriate font sizes. Here are a few more tips when it comes to typography and fonts.

1. Choose legible fonts: Not all fonts are created equal — nor are they always easy to read. Decorative, quirky, or handwritten fonts are often challenging for anyone to consume. Anything smaller than 14 pixels on a desktop or laptop screen requires some effort to read. Text can appear smaller on mobile devices, forcing users to work harder to read your email. Use media queries to increase the minimum font size from 14 to 16 pixels on smaller devices to help users read your email
2. Space your fonts appropriately: Even the most legible font can be challenging to read if the letters or lines of text are too close together. Adjust the kerning and leading of your fonts so they’re as easy to read as possible.
3. Maintain a logical reading structure: Screen readers typically read from left to right before moving to the next line. Stick with this intuitive structure for best results.
4. Avoid center-aligned paragraphs: It’s much harder for people with dyslexia to read center-aligned paragraphs, so even if you think it looks better, stick to left-aligning your text.
5. Use enough white space: Don’t cram all of your design elements — images, text, graphics, etc. — too close together. Instead, allow for plenty of white space around them so people can more easily discern each one.

7. Buttons/links

It’s important to include clear calls-to-action in your emails, which generally come in the form of buttons or links. Here are some tips on how to make the most of your buttons and links.

Make links accessible

If someone is colorblind, and you distinguish a link from the rest of your text solely using color, then they won’t be able to tell a difference. This means that all of your links and calls-to-action essentially don’t exist for them. Instead, bold or underline your links, or even add a symbol so that they stand out more.

Screen reader users often navigate via links, and if they do, they often only hear: “Read More”, “Learn More”, or “Click Here”. Read more about what? Why click here? Many content creators are becoming comfortable adding an aria-label to elements in order to add extra content specifically for screen readers, but labelling this way should be considered a crutch, not a solution. The solution? Name all links so that they are meaningful on their own.

• “Read more about how we support our communities”.
• “Learn more about our sale items.”
• “Click here for locations.”

Make links clickable/tappable

While Apple’s iPhone Human Interface Guidelines recommends a minimum width and height of 44 pixels for buttons, this number varies depending on the mobile device vendor. An alternative rule of thumb would be using a minimum width and height of 72 pixels as this is the average pixel width of a thumb.

Still not sure how to make your emails accessible?

If you want to learn more about what email accessibility is and how it matters, make sure to check out our previous post, What is Email Accessibility?

Don’t have time for email marketing? We’re here to help! Book a meeting today, or check out all of the services we offer when it comes to email marketing.