Best Practices for Building Accessible Emails and Forms

Overview

When designing your emails and signup forms, you will want to make sure that your designs are accessible to all of your recipients. Even though taking the time to do the extra work may seem like a hassle, for the millions of people living with a disability all around the world, your extra time will pay off tremendously.

So, in this guide, let's dive into some best practices for prioritizing accessibility in emails and signup forms.

The importance of accessible emails and forms

Accessibility often refers to the practice of designing web content in a way that enables people with disabilities to access, perceive, and interact with that content.

We know that you are busy, and that it may seem like a lot of work. So, does accessibility in emails and signup forms really matter? The short answer is YES!

About 15% of the world's population live with a disability, which equals to around 1 billion people. Of that billion people, 285 million have visual impairments and can use a screen reader to access web content. For people with disabilities, having accessible content is not just about convenience, it is a necessity.

Furthermore, accessibility is not restricted to people with disabilities. Accessible content makes more sense, more readable, and more usable for everyone. Think of good accessibility as good ergonomics, meaning that you can also think of it as a great practice for your business.

In the next sections, you will learn some best practices for building accessibility in emails and signup forms.

Accessibility in emails

Understand screen readers

Screen readers are tools that enable those with visual impairments or cognitive disabilities to read the text and images on their screen. When they consume your email, a screen reader will vocalize the content based on how it is coded, reading both the structure and elements on the page aloud.

It's vital to note that screen readers present content to users one item at a time. They can navigate more quickly through content using headings, paragraphs, page sections, and "skip navigation" links. That's why it is important that your email structure and content are specifically designed with screen readers in mind.

Below are a few other ways that screen readers consume content:

- They pause for things like periods, commas, and semicolons

- They announce the page title when loading a page or email

- They try to pronounce acronyms but otherwise will spell out the letters

- They announce headings and the heading level (i.e., "heading level 2")

Optimize subject lines and preview text

Make sure to put extra effort into your subject lines and preview text. This not only makes your emails more accessible but also impacts your open rates. You want your subject lines and preview text to be descriptive, enticing, and short.

For more inspiration, head to our following articles:

- How to Write The Best Subject Lines for Open Rates

- The Guide for Email Subject Line Testing

Follow basic email design

If you follow design best practices for your emails, you will make them more accessible. 

- Add Alt text to all of your images. Alt text (or "alternative text") is a brief description of an image that appears when a user cannot see your images. Alt text should be short and descriptive and highlight the relevance of the image to your content.

- Avoid image-only emails. While it is often easy just to upload an image for your email, this can be very difficult from an accessibility standpoint. Screen readers can't discern the content of an image; they rely on Alt text to explain the image. And, if an entire email is one image, then it'd be difficult to appropriately describe it within Alt text. Moreover, if your CTA is inside the image, voice and screen readers won't be able to discern it. Of course, this decreases engagement.

- Use starkly contrasting colors. An appropriate contrast of colors not only achieves a good design but also makes it much easier for people with color blindness to read. For example, consider using white and black, grey and dark blue, or pink and dark red, etc.

- Use appropriate font sizes. The smaller the font, the harder it is to read, no matter if someone is partially blind, isn't wearing their glasses, or is trying to read on their phone in the bright sun. A rule of thumb is that fonts should be at least 14px in size. However, because fonts vary so much, yours might need to be even larger, especially when you are using a lightweight option.

- Use descriptive links. Be sure to give your links a title that makes it clear to your subscribers what they are clicking on. You will need to consider the context, but in general, it is best not to write a vague link title. Don't come with a simple "Click here." Expand by writing "Click here to see our latest offers." Your readers will then know what to expect.

- Maintain a logical reading structure. Screen readers often read from left to right before moving to the next line. Stick with this intuitive structure for the best results. (NOTE: There are languages and writing systems in which text is read right to left, such as Hebrew, Urdu, Farsi, and other Arabic scripts. Meanwhile, many East Asian writing systems follow a vertical reading pattern).

For more tips on email design, head to our article on 11 Email Design Best Practices for Marketers.

Accessibility in signup forms

Thankfully, the code behind your AVADA forms makes it possible for all of your recipients to parse through the information they need. An AVADA form published to your website automatically enables site visitors to navigate the form entirely using their keyboards and screen-readers can read the forms. In addition, site visitors can close a form with the escape key and submit with the enter key.

Just like email accessibility, you will want to follow some basic guidelines to make sure that all of your recipients will get the information you want to share with them through your forms. So, when designing forms:

- Use contrasting colors
- Use descriptive language in links
- Build your forms in a logical structure

Updated on: 06/09/2021