The fourth industrial revolution has changed the way we live and has made email communication to those with visual impairment easier. According to the World Health Organization (WHO), 1.3 billion people worldwide live with some type of visual impairment; 217 million living with moderate to severe vision impairment and roughly 36 million people in the world are blind. Voice assistant technology (such as Siri, Echo, Google Home, etc.) can help make your emails more accessible to everyone, if coded properly.
Coding your emails for voice assistant technology is essential for giving your subscribers with visual or hearing impairment a good experience. Here are four coding tips you can use for creating a more accessible email:
1. Set your role attribute in the table tag to “presentation”.
Today, screen readers are beneficial for reading your email out loud but if not coded correctly it can give your subscriber a terrible experience. With a mind of its own, screen readers read each column in a row before even getting to the real content. This is obviously not helpful, and no one wants to know how each table or div tag is structured in your code. Alexa: Table with one row and one column, row one column one.
That is why it is important to set your role attribute in the table tag to “presentation” to tell screen readers how to interpret the table, so it can read it in a way that makes sense for the subscriber. If this isn’t set, the screen reader will interpret the table as data and will read out the HTML code. It is important to add this to all tables in your code, not just the parent tables.
Example:
<table border=”0” role=”presentation”>
<tr>
<td>Hello world!</td>
</tr>
</table>
2. Add alt tags to all images.
Without an image alt tag, screen readers may read the full image path in the same way they read out
table tags or div tags in your HTML. Adding the alt tag to your images not only prevents your subscribers from listening to unnecessary email code but also has many benefits in your subscriber’s inbox. Adding alt tags will not only create some content for those who don’t download their images but also help screen readers interpret what the images are in your email. But keep in mind, not all images need alt text. Avoid adding the alt text to images that don’t provide information on the message of your email or call-to-action button. If an image doesn’t require alt text, it is best to still add the alt tag but leave it blank.
Examples:
<img src=”images/feature.jpg” alt=”Click here for more information” />
<img src”images/spacer.gif” alt=”” />
3. Avoid using title attribute in your image tag.
Avoid using the title attribute in your image tag as it will overwrite your alt text and adds an extra layer of redundancy to your code. It can be easily overlooked if you have both attributes and update one but not the other. It’s best to only use alt tags.
This:
<img src=”images/feature.jpg” alt=”Hello world!” />
Not This:
<img src=”images/feature.jpg” alt=”Hello world!” title=”More information” />
4. Add language attribute
Adding a language attribute to your HTML tag can help screen readers recognize and articulate different languages. For example, you don’t want a screen reader to read “Bon-jore” when it should be pronounced “bawn-zhoor”. Or saying “Ho-la” when it should be pronouncing it “oh-lah”.
Example:
<html lang=”fr”>
And if there are multiple languages in your email, you can add separate language attributes to span tags as well as H1, H2, H3, P tags and so on.
Example:
<span lang=”fr”></span>
Using these tips will help ensure that your next email is accessible to all types of subscribers and will help provide a more enjoyable experience.
