MarTech

Email accessibility

A woman typing on a laptop, with abstract emails flying out

In today’s digital world, email is a critical communication tool for reaching your audience. To ensure everyone can engage with your content, including those with disabilities, it’s essential to incorporate accessibility best practices into your email development. Accessibility ensures that users of all abilities, including those using assistive technologies, can access and understand your message. Here are key areas to focus on when making emails accessible.

Image alt text

Adding descriptive alt text to your email images is one of the most important accessibility practices. Alt text provides context for screen readers, allowing visually impaired users to understand the purpose of the images. For instance, if your email features a product image, the alt text should be descriptive and actionable, like Click to shop our latest collection.

Without alt text, screen readers will skip the image entirely or read the image’s file name, which could be confusing and meaningless. Remember that alt text should be concise and relevant to the image’s function, not just a repetition of decorative text.

Presentation role on tables

Tables in email are often used for layout purposes, but this can create issues for users relying on screen readers. When screen readers encounter a table, they may read each cell as if it contains important data, even when the table is being used only for layout. This can confuse users.

By adding the role="presentation" attribute to tables, you instruct screen readers to ignore the table’s structure and only read the customer-facing text. This ensures that users won’t hear unnecessary content about rows and columns, keeping the message simple and clear.

Of course, if your email contains any data tables, you can either leave off the role attribute or set its value to table. Additionally, use semantic markup for data tables, like <th> elements for table headers, the scope attribute (scope="col" or scope="row") on table headers, and <caption> for a decriptive table title.

Avoid using title attributes

Title attributes are often used in HTML elements to provide additional information when a user hovers over a link or image. While this may seem helpful, it can be problematic for accessibility. Screen readers may read the title attribute in addition to the link text or image alt text, which can interrupt the natural flow of the message. This redundancy can confuse users and slow down their reading experience.

Instead of relying on title attributes for additional context, ensure that the text of your email or alt attributes contain all necessary information.

Include lang and dir attributes

Most email marketers know to include the lang attribute on the <html> tag. But as Jay Oram of Action Rocket points out, it’s helpful to also include it on a wrapping element, as well as the xml:lang attribute on the <body> tag. This is because some email clients strip the <html> tag, thus removing the standard method of communicating the language of the document.

Also from Action Rocket, including the dir attribute is helpful when rendering the email content. Add it to the wrapping element. This defines the direction of text. (English is read left-to-right while Hebrew is read right-to-left, for instance.)

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<body xml:lang="en">
<div id="wrapper" lang="en" dir="ltr">

It seems a bit redundant, but that’s email development for ya.

Contrast ratio

Color contrast plays a significant role in email accessibility. Low-contrast color combinations can be difficult for visually impaired users or those with color vision deficiency (CVD) to read. The Web Content Accessibility Guidelines (WCAG) 2.0 recommend a minimum contrast ratio of 4.5:1 between the text and its background for standard body content. For larger or bold text, a contrast ratio of 3:1 is acceptable.

These contrast ratios help ensure that text is readable, even for users with low vision. Following these guidelines helps make your emails accessible to a wider audience. For stricter accessibility, you can aim for AAA compliance, which sets a higher standard for contrast but may be more challenging to implement universally.

Links are vital to navigating emails, but if they are not clearly visible, they can easily be missed, especially by users with CVD. Ensure that links are clearly distinguishable from surrounding text, both visually and programmatically. This can be achieved by using underlines and/or bold text for links. Relying solely on color to differentiate links from regular text is not enough, as some users may have difficulty distinguishing colors.

Make sure that links stand out with a combination of design choices like contrast, size, and style so that all users, regardless of their vision, can interact with your content.

Enhance text for zoom

Many visually impaired users rely on zoom functionality to read email text. Ensuring that your email is legible when zoomed in by up to 200% is crucial for accessibility. Test your email by zooming in and check whether the layout breaks, or the text becomes unreadable.

Consider increasing the font size for body content and ensuring enough line height and white space to accommodate zooming. This practice helps keep your email responsive and user-friendly for those with low vision.

Headings and concise text

Using headings and concise text is key to helping all users, especially those relying on assistive technology, navigate your emails effectively. Screen readers use headings to help users skip to the most relevant content, so it’s important to include semantic HTML headings (<h1>, <h2>, etc.) to structure your email.

Keep your text concise and to the point. Emails that are too wordy or complex can overwhelm users, so aim for clarity. Ensure that headings and body content are easy to understand, helping all users absorb key information quickly.

Use semantic buttons

When creating buttons for your emails, it’s important to use semantic HTML buttons (<button>) or styled anchor tags (<a>) instead of image-based buttons. Semantic buttons provide a more accessible and responsive experience for all users, especially those who rely on screen readers or other assistive technologies.

Screen readers can easily recognize and announce semantic buttons as interactive elements, giving users clear instructions on how to interact with the email. Conversely, image-based buttons can cause several accessibility issues:

Best practices for semantic buttons

By using semantic buttons, you provide a more robust and accessible user experience across devices and assistive technologies, making your emails easier to navigate and interact with for all recipients.

Section 508 compliance

Section 508 of the Rehabilitation Act requires that all electronic and information technology used by federal agencies is accessible to people with disabilities. While your emails may not be sent to or from government agencies, following Section 508 standards can help ensure broad accessibility for all recipients.

To meet Section 508 requirements, ensure that your emails are compatible with screen readers, keyboard navigation, and other assistive technologies. This includes using proper alt text for images, ensuring high color contrast, and using semantic HTML for structure.

Final thoughts

Making your emails accessible is not just a legal obligation in some cases, but also a best practice for inclusivity. By incorporating alt text, optimizing color contrast, ensuring readable and zoomable text, and properly using HTML structure, you can deliver a more engaging and accessible experience for all users.

Taking the time to enhance accessibility ensures that your message reaches everyone effectively and makes your email campaigns more successful in the long run.