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

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 a clear indication of links. And for code, use alt text on images, semantic code for headers and paragraphs, a lang meta attribute, and a presentation role on tables, where necessary.

A bad email practice is to use only images, or a majority of images for the email’s layout. This doesn’t allow for using any semantic code and depends on only the alt text attribute for translating the text that’s in an image. It also makes mobile adjustments more difficult, requiring alternate images to be used in order for text to be legible on smaller screens.

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 the practices above were not followed. They are simple enough to include, but there are many reasons on how they can be missed.

Forgetting to include alt text for images is pretty common. As is not writing semantic code, which comes out of how code is generated by visual email editors as the try to account for various email clients. For best results, custom coding emails is the best way to ensure they are also accessible.

How Blocks Edit encourages accessibility

<div class="block-section" data-group="header" data-title="Header">
  <h1 class="block-edit" data-block="example-title" style="text-align: left">Title</h1>
  <p class="block-edit" data-block="example-text" style="text-align: left">Content</p>

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 using the visual editor, a notice is shown when mousing over an image without alt text set. The lang attribute can also be set and modified via the email's meta settings. When sharing or exporting your email, there is a text-only option to view how the email would output for screen readers, including image alt text.

Don’t overlook accessibility!

Use Blocks Edit for free