Email accessibility practices

Accessibility goes beyond people with disabilities. It can affect us all to a certain degree. Everyone should be able to read the emails we send out.

Abstract accessibility aspects for sightAbstract accessibility aspects for hearing

Accessibility gets overlooked

In a recent report on accessibility from the Email Markup Consortium, 99.9% out of 35,604 HTML emails tested contained accessibility issues categorized as “Serious” or “Critical”. This means that standard, even basic, accessibility practices were not followed.

Forgetting to include alt text for images is pretty common. As is not writing semantic code, which stems from how visual email editors output code as they try to account for various email clients and backwards compatibility. For best results, custom coding emails is the best way to ensure they are also fully accessible.

Managing accessibility

Implementing best practices does not have to be complicated. Keep in mind visual legibility with proper color contrast, good base font size, good spacing, and provide a clear indication of links and buttons. For code, use alt text on images, semantic code for headers and paragraphs, define a lang meta attribute, and add a presentation role for tables used for layout purposes.

You can ensure all these aspects are included in your custom code. And then you can implement visual editing that follows your code.

How Blocks Edit encourages accessibility

It starts with Blocks Edit’s editable tags that work around your custom design and code. This allows for using proper, semantic code for components to build visually with.

Blocks Edit screenshot of the visual editor with the team comments in the activity panel

While your team uses the visual editor, a notice is shown when mousing over an image without alt text set. A checklist can be kept as reminders for your team on best practices to follow. And when sharing or exporting your email, there is a text-only option to view how your email gets output for screen readers.

Don’t overlook accessibility!

Use Blocks Edit for free