Building Emails for Accessibility: Tags & Clean Coding (Part 2 of 3)

October 23, 2017
Vinca Swanson
Vinca Swanson


October 23, 2017

This post is part of a three-part series about accessibility in email marketing. Though the posts are written with developers in mind, they contain insights that anyone on the marketing team will find useful in considering how their emails look to all subscribers.

The series will include the following parts: 

Part 1: Layout & Design Elements

Part 2: Tags & Clean Coding

Part 3: Auditing Your Work

In Part 2 here, I will discuss tools that you likely already implement in your code, which can greatly increase the chances of your email being readable to people with differing needs (and, of course, on a range of devices).

The Set Up

Add lang=”en” to your <html> tag at the top. This identifies the language used in your email (English). Originally, it was used to assist search engines and browsers, but for email accessibility, it helps identify the language that will be read out loud.

Populate the <title> tag with something relevant to the campaign. Avoid leaving this blank.

Alt Tags

Alt tags are the single most important aspect when coding images in emails, as well as when coding webpages. Be mindful of populating the alt tag with relevant copy as it relates not only to the image but to the message. I see this part of the <img> tag underutilized when it should have a more prominent appearance in client reference forms. You’re thoughtful in your copy – why not extend that to your alt tags?

Avoid redundancy:

Picture3-1.png 

Instead, give a more robust presence that lets the user know something more about your product or your campaign:

Picture4.png

 

Remove Title Tags

Why not also populate the title tag in the <img> tag? We remove this tag so the reader does not repeat the copy or confuse what needs to be read to identify the image.

Code Clean

In-line css is bloat in any other web build, but with email it’s a necessity. Despite the repetition that must happen for proper rendering, useless code can still occur, and a good combing of the code is beneficial for optimized performance. Scour your code for unclosed and empty tags. Repeat css in-line only where necessary. Be aware of depreciated html tags and look for css attribute options.

Ie: html tags such as <b> and <i> are depreciated, and should be replaced with stylized <span> tags (<span style=”font-weight:bold;”>).

Make sure to check out Part 1: “Layout and Design Elements”, and stay tuned for Part 3, “Auditing Your Work.”accessibility-two-listing

 

Resources:

https://www.slideshare.net/paulairy/a-type-of-accessibility-65004974

https://www.slideshare.net/M_J_Robbins/accessibility-in-email-eoainsights

https://www.campaignmonitor.com/resources/guides/accessibility/

Tags: Dev, HTML, accessibility

Developer, Shaw/Scott (Portland) A creative developer with a passion for ideation, Vinca brings top-notch strategy and flawless execution to every campaign. Vinca specializes in email marketing, UX design, and front-end development. She also has a solid background in SEO. Vinca digs deep into each campaign she works on to ensure that every box is checked and no stone is left unturned. Vinca has worked with such brands as Holland America, Home Depot, Lululemon, Oracle, Harry & David, and Coca-Cola. Prior to joining the Shaw/Scott team, Vinca worked with Un-Cruise Adventures as a Graphic Designer and Email Marketing Specialist.

Subscribe Here!