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.
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. Many are simple enough to include, but there are many reasons for why they can be missed.
Forgetting to include alt text for images is pretty common. As is not writing semantic code, which stems from how code is generated by visual email editors 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.
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.
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.
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.
<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>
</div>
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. When sharing or exporting your email, there is a text-only option to view how the email would output for screen readers. The lang attribute can also be set and modified via the email's meta settings.
Don’t overlook accessibility!