You will learn
Learn how to make your emails and signup 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
Interested in email design? Check out our guide to 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
- Write subject lines and preview text that are descriptive, short, and to the point.
- Add alt text to all images.
- Avoid putting pertinent information in images.
- Use contrasting colors.
- Use headers to separate ideas.
- Use descriptive language in links.
- 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 signup forms
Thankfully, the code behind your Klaviyo 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 Signup Form Builder, helping users understand which field is highlighted when tabbing through the form.
Signup 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.
Below is an example of a well-designed form (right) and a form that will not be accessible to all (left).