Email accessibility matters! This means designing emails that are easier to consume for people with different physical, mental, or developmental abilities. Since it's estimated that over one billion people live with some type of disability, wouldn't it make sense to provide a great experience to such a large part of your audience?
Check out how Composer will help make your emails more accessible...
Language Attribute
This feature will let the screen reader know how it should pronounce or display the email content. Otherwise, they’ll read in their default device language, which can sometimes be confusing or hard to understand.
How to apply in Composer
Click the Settings tab > Scroll to Language Settings > Select the language from the dropdown.
⚠️ Tips:
The default language is set to English.
This does NOT translate the content, it configures the HTML lang attribute, for example:
<html lang="en">
.
Email Title Tag
Using the title attribute in an email will give the screen reader the ability to provide the user the context of the email. The subject line of the email will be used as the email <title>
and will populate in the message.
How to apply in Composer
All you need to do is write a descriptive subject line and Composer will do the work for you!
Table Roles
Composer automatically includes the table attribute role="presentation"
to instruct the screen reader to decipher the email as content. Otherwise, the screen reader would interpret it as data and read out the HTML code.
Paragraph Formatting
Since screen readers perform better when text is organized using paragraph hierarchy, Composer allows you to configure both Headline and Text elements when using live text.
How to apply in Composer
To create a text hierarchy select from one of the Headline options
<h1>, <h2>, <h3>
.For standard content, select the paragraph
<p>
tags option. The default size will be 16px.
Font Size
Reading with ease is super important regardless if your reader is visually impaired or if someone is reading your email in the bright sun. Since large font size is ideal and recommended, Composer's default font size is set to 16px.
⚠️ Tips:
This can be adjusted, but remember the smaller the font the harder it is read especially if you are using custom fonts.
The default font size is applied to all text-based elements including Navigation, Buttons, and Item Blocks.
Link Title Tags
If you are using alt text for your images there is no need to add link title tags as well. Since most screen readers will read both the alt and title text it will just provide a redundant and not ideal listening experience for the audience.
⚠️ Tips:
Composer will no longer automatically apply a Link Title except for the images in Recommended Product Blocks.
The default Link Title is "View product recommended for you".
Link titles should only be applied in special circumstances to provide additional clarity about the purpose of the link to the listener.
Using different alt text will append unique friendly link names to provide more context about your links.
Friendly Link Names
Listrak Composer will automatically append a friendly link name to any link included in a message. The Friendly Link Name uses the data-link-name="Link Name" attribute. The Link Name used in a Composer message will be based on the text of the link or the alternative text.
⚠️ Tips:
The Friendly Link Name can be added to an HTML message by adding the data-link-name="Link Name" attribute to the end of the link. Add the link name between the quotation marks.
The Message Link Tracking Dashboard will be based on the value in the Friendly Link Name field. If these are not applied to an HTML message the full URL will be used.
Visit The World Wide Web Consortium (W3C) for more ways you can make your email ADA compliant.