Accessibility in emails and forms best practice reference

You will learn

Learn how to make your emails and sign-up forms more accessible. When designing your emails and signup forms, you’ll want to make sure your designs are accessible to all of your recipients. Although taking the time to do the extra work may seem like a hassle, for the millions of people living with a disability around the world, your extra time will pay off tremendously. 

Accessibility in emails

Optimizing subject lines and preview text

Making sure to put extra effort into your subject lines and preview text 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.

Basic email design

Just like with subject lines, if you’ve followed design best practices for your emails, you will also make your emails more accessible. Namely, adding alt text to all of your images, avoiding image-only emails, using starkly contrasting colors (e.g., white and black, grey and dark blue, pink and dark red), using headers to separate ideas, descriptive links (e.g., "Shop the collection" rather than "Click here to go to the collection"), and making a logical structure to your emails. These best practices will ensure all of your customers get your messaging and also ensure that you hit the inbox.

Checklist and example

1. Write subject lines and preview text that are descriptive, short, and to the point.
2. Add alt text to all images.
3. Avoid putting pertinent information in images.
4. Use contrasting colors.
5. Use headers to separate ideas.
6. Use descriptive language in links.
7. Design emails in a logical structure.

Below is an example of an email that is optimized for all recipients (left) and one that is not (right).

Accessibility in sign-up forms

Thankfully, the code behind your Klaviyo sign-up forms makes it possible for all of your recipients to parse through the information they need. A Klaviyo form published to your website automatically enables site visitors to navigate the form entirely using their keyboards and screen-readers can read the forms. Additionally, site visitors can close a form with the escape key and submit with the enter key. Additionally, you can add a Focus Outline Color, located in the Styles tab within the form editor, helping users understand which field is highlighted when tabbing through the form.

Sign-up form design

Just like email design, you'll want to follow some basic guidelines to ensure that all of your recipients will get the information you want to share with them through your forms. When designing forms, use contrasting colors, avoid putting pertinent information in images, use descriptive language in links, and build your forms in a logical structure. Note that as you're building your sign-up forms, Klaviyo monitor for a number of accessibility issues, and populate prompts to fix any identified issues in the Forms Alerts tab. 

Below is an example of a well-designed form (right) and a form that will not be accessible to all (left). 

Additional resources

• WebAIM: contrast checker
• Sim Daltonism: color blindness simulator
• Funkify: Google Chrome disability simulator