Email Accessibility in 2017

It’s 2017 now, if you haven’t heard, and email marketing is still not dead. In fact, email is flourishing! There’s never been a more exciting time to be part of the email world. We’re bombarded from all sides with technological advances. However, there’s still something basic we’re not doing enough of; accessibility.

Setting the scene

According to the World Health Organization 285 million people are estimated to be visually impaired worldwide and over 5% of the world’s population – 360 million people – has disabling hearing loss. To put that into perspective, the population of the USA is 325 million.

The range of adaptive technologies available to these users is truly astonishing, ranging from tools we’ve heard about such as screen readers or screen magnifiers to the more advanced sip ‘n puff devices to eye tracking technology. The fact these tools exist means many users who otherwise wouldn’t be able to access the internet and, by proxy, their emails now can.

More good news! We can actually further assist these users by making our emails more accessible. This is my New Year’s Resolution for this year; create more accessible email. Let me show you how I’m going to do it.

Fixing the code

A lot of accessibility issues in email marketing stem from development. There are quite a few quick, actionable code changes we can make.

Use Semantic Code

This is one of the most basic fixes that can be applied to code. It also happens to be one of the most overlooked ones. Ensuring the use of

and

tags will help screen readers digest your content. Allowing the screen reader to properly differentiate between headings and paragraphs not only creates a more pleasant reading experience, it allows the user to navigate through your emails.

Set the HTML Language attribute

Another very simple fix we can apply to our emails is in the head of the email. By setting lang=”” with the correct language. Although a very minor fix it will ensure that words are being pronounced correctly by screen readers.

Unsure of how to use lang=””? You can read more here.

Set the Title of the email

Proper use of the tag has two benefits for our emails. Firstly, it’ll set a title on the tab of the webpage when viewing the email in a browser, rather than an email client. More importantly, it provides a title and some context for users with assistive technology, such as screen readers.</p> <h4>Encode your characters</h4> <p>Don’t forget to encode your characters in the HTML! It’s really simple, just add:</p> <pre><code></code></pre> <p>All this is doing is letting the browser or email client know which type of characters to expect in the following code. We’re simply making sure nothing untoward slips in, breaking the reading pattern for both people reading or using screen readers to read the email.</p> <h4>Don’t set titles on links</h4> <p>A bit of myth busting with this one, a lot of people still like to use title=”” to add titles to links. Where possible, we should avoid setting titles on links altogether. Stick to including the key information either as part of the text or the link itself. Screen readers will break their reading pattern to read the title and it can cause issues.</p> <h4>Set and style alt text</h4> <p>I’m sure most readers of this blog are aware by now of the importance of alt text. You should already be setting it to ensure your email is still legible before images load.</p> <p>Alt tags also serve a purpose in accessibility! Setting the right alt text will enable screen readers to accurately describe images to those using them. However, not all images need alt text. If your image is purely for the aesthetics of the email, such as a spacer gif or shadow, be sure to set an empty alt=”” on the image. This simply tells the screen reader to skip over these images.</p> <h4>Fix your tables</h4> <p>Fixing our tables is another very quick fix that, arguably, makes the biggest difference to email code. This fantastic piece of code was shown to me by <a href="https://twitter.com/m_j_robbins?lang=en">Mark Robbins</a> and it makes a world of difference. Simply add the below to your tables.</p> <pre><code>role=”Presentation”</code></pre> <p>This uses ARIA (more on that later, I promise) to tell the screen reader that this isn’t a data table, which is the intended use of tables in HTML, rather it’s a presentation table. This makes reading the content a lot more intuitive for screen readers.</p> <p>It’s worth noting that if you’re using a table for showing data you should leave this off those specific tables as you still want them to be read as data tables.</p> <div class="hr"></div> <h3>General Email Considerations</h3> <p>There are also some general email marketing points to consider when discussing accessibility, which don’t necessarily relate to code but can still make life easier for those dealing with the aforementioned visual and hearing impairments.</p> <h4>Be wary of contrast</h4> <p>There are no specific rules for contrast but it’s something to be wary of. This is especially important for subscribers who may suffer from color blindness. There are a few different tools out on the web for checking contrast but <a href="http://webaim.org/resources/contrastchecker/">one of the best is from webaim</a>.</p> <h4>Keep fonts legible</h4> <p>A general good rule of thumb is to have your fonts at a <span style="font-weight: bold" class="Apple-style-span">minimum of 14px in size</span>. Anything less than 14px can be very tough for people to read. That being said, it’s only a general rule. Around the web we’ve seen an increase in popularity of fonts being used with a light font weight. If using a light font, please consider using 16px as a minimum font.</p> <h4>Maintain a logical reading structure</h4> <p>You should try, where possible, to keep a logical reading order. Consider the fact that screen readers will, in general, read left to right before dropping to the next line. Keeping a logical reading order can also help those with dyslexia to maintain reading flow.</p> <h4>Avoid center aligned paragraphs</h4> <p>Yes, even on mobile! Although it can be aesthetically pleasing to have your text in the center it can be much harder for people with dyslexia to read center aligned text. Try and keep large bodies of text left aligned.</p> <div class="hr"></div> <h3>Is ARIA the answer?</h3> <h4>What is ARIA?</h4> <p>ARIA, or Assistive Rich Internet Applications, is a web spec created by W3C with the aim to add extra descriptive information to HTML elements to enhance the experience for those using screen readers.</p> <p>It’s worth noting that ARIA has zero effect on how your email looks or renders, it’s simply a descriptive layer we wrap onto the code.</p> <h4>How does ARIA work?</h4> <p>ARIA allows us to use HTML to tell screen readers what a HTML element is. The following are examples of ARIA roles:</p> <pre><code>role=”presentation” role=”article” role=”img” role=”listitem”</code></pre> <p>If you’d like to see more ARIA examples, <a href="https://www.w3.org/TR/wai-aria/roles">view them here</a>.</p> <h4>So, is ARIA the answer?</h4> <p>In short, no. At least, not yet! Although it’s making its way into web development, it’s still being left behind a bit in email marketing.</p> <p>As Mark Robbins correctly says in <a href="http://blog.rebelmail.com/accessibility-in-email-part-ii/">this fantastic blog</a> many different email clients already use ARIA elements in questionable ways. The examples he includes are:</p> <ul style="padding-bottom:20px"> <li>Gmail wraps your code with role=”listitem” inside role=”list” but only a single list item.</li> <li>Yahoo! use role=”presentation” on a div and that is inside role=”main” which is also odd. There should only be one main per page and a div is presentational by default.</li> <li>Outlook.com (newer version) uses role=”document”.</li> </ul> <p>So, with this in mind, my suggestion for now is to avoid using ARIA roles. If webmails are already adding potentially incorrect roles we would further add to the confusion. That being said, please still do heed my advice to use role=”presentation”, although ARIA roles aren’t ready for production, this is an exception to the rule for the benefit of screen readers.</p> <div class="hr"></div> <h4>Resources</h4> <p>Accessibility in email is something that isn’t always the first topic on our minds. I do, however, have some fantastic resources if you’d like to do some further reading on accessibility.</p> <ul style="padding-bottom:20px"> <li>Rebelmail – <a href="http://blog.rebelmail.com/accessibility-in-email-part-ii/">Accessibility in Email Part 2</a></li> <li>Campaign Monitor – <a href="https://www.campaignmonitor.com/resources/guides/accessibility/">Accessibility and Email Campaigns</a></li> <li><a href="http://a11yproject.com/">The A11Y Project</a></li> <li>The A11Y Project – <a href="http://a11yproject.com/posts/getting-started-aria/">Getting started with ARIA</a></li> <li>Mailchimp – <a href="https://blog.mailchimp.com/accessibility-in-email-marketing/">Accessibility in Email Marketing</a></li> <li><a href="http://beyondtheenvelope.co.uk/type-e.php">The Type E: Newsletter</a></li> </ul> <div class="hr"></div> <h4>It’s all down to us</h4> <p>Whether you’re a developer, designer, email marketer, or are otherwise involved in the creation of emails the burden of good accessibility falls to us. Even though we can’t use ARIA, we can take steps to ensure we give the best possible email experience, regardless of visual, hearing, or other impairments.</p> <p>If you think I’ve missed a resource, an important fix, or anything similar or you have any general thoughts or questions, please feel free to leave a comment or reach out to us on Twitter. I’d love to discuss email accessibility with you.</p> <p>When making any sort of changes to your email, whether it’s code based or simply changing the reading order of your articles, it’s important to ensure you re-test <span style="font-weight: bold" class="Apple-style-span">every iteration</span> of your email. Email on Acid’s rendering tests can show you how your email looks in over 70 different kinds of clients in seconds.</p> <div class="btnWrap2" style="margin: 10px 0px 20px;float: left;width: 100%;text-align: center"><a class="btn" href="https://www.emailonacid.com/pricing" title="Email Testing" target="new">TEST TODAY!</a></div> <div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/EmailonAcid?a=-rngMYhFKWk:BIUVqhAtCUk:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/EmailonAcid?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/EmailonAcid?a=-rngMYhFKWk:BIUVqhAtCUk:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/EmailonAcid?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/EmailonAcid?a=-rngMYhFKWk:BIUVqhAtCUk:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/EmailonAcid?i=-rngMYhFKWk:BIUVqhAtCUk:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/EmailonAcid?a=-rngMYhFKWk:BIUVqhAtCUk:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/EmailonAcid?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/EmailonAcid?a=-rngMYhFKWk:BIUVqhAtCUk:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/EmailonAcid?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/EmailonAcid?a=-rngMYhFKWk:BIUVqhAtCUk:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/EmailonAcid?i=-rngMYhFKWk:BIUVqhAtCUk:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/EmailonAcid?a=-rngMYhFKWk:BIUVqhAtCUk:TzevzKxY174"><img src="http://feeds.feedburner.com/~ff/EmailonAcid?d=TzevzKxY174" border="0"></img></a> </div> <p><img src="http://feeds.feedburner.com/~r/EmailonAcid/~4/-rngMYhFKWk" height="1" width="1" alt="" /></p> <script type="text/javascript"> jQuery(document).ready(function($) { $.post('http://acidonemail.com/wp-admin/admin-ajax.php', {action: 'mts_view_count', id: '48'}); }); </script> <!-- Start Share Buttons --> <div class="shareit floating"> <!-- Facebook Share--> <span class="share-item facebooksharebtn"> <div class="fb-share-button" data-layout="button_count"></div> </span> <!-- Facebook --> <span class="share-item facebookbtn"> <div id="fb-root"></div> <div class="fb-like" data-send="false" data-layout="button_count" data-width="150" data-show-faces="false"></div> </span> <!-- Twitter --> <span class="share-item twitterbtn"> <a href="https://twitter.com/share" class="twitter-share-button" data-via="">Tweet</a> </span> <!-- GPlus --> <span class="share-item gplusbtn"> <g:plusone size="medium"></g:plusone> </span> <!-- Pinterest --> <span class="share-item pinbtn"> <a href="http://pinterest.com/pin/create/button/?url=http://acidonemail.com/email-accessibility-in-2017/&media=&description=Email Accessibility in 2017" class="pin-it-button" count-layout="horizontal">Pin It</a> </span> </div> <!-- end Share Buttons --> </div><!--.post-content box mark-links--> </div><!--.single_post--> <div class="postauthor"> <h4>About The Author</h4> <div class="author-box"> <img alt='' src='http://2.gravatar.com/avatar/b28de7e97864d4816bdf1241309225d5?s=150&d=mm&r=g' srcset='http://2.gravatar.com/avatar/b28de7e97864d4816bdf1241309225d5?s=300&d=mm&r=g 2x' class='avatar avatar-150 photo' height='150' width='150' /> <div class="author-box-content"> <div class="vcard clearfix"> <a href="http://acidonemail.com/author/admin/" rel="nofollow" class="fn"><i class="fa fa-user"></i>admin</a> </div> </div> </div> </div> </div><!--.g post--> <!-- You can start editing here. --> <!-- If comments are open, but there are no comments. --> <div id="commentsAdd"> <div id="respond" class="box m-t-6"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title"><h4><span>Leave a Reply</span></h4> <small><a rel="nofollow" id="cancel-comment-reply-link" href="/email-accessibility-in-2017/#respond" style="display:none;">Cancel reply</a></small></h3> <form action="http://acidonemail.com/wp-comments-post.php" method="post" id="commentform" class="comment-form"> <p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true" placeholder="Comment Text*"></textarea></p><p class="comment-form-author"><input id="author" name="author" type="text" placeholder="Name*" value="" size="30" /></p> <p class="comment-form-email"><input id="email" name="email" type="text" placeholder="Email*" value="" size="30" /></p> <p class="comment-form-url"><input id="url" name="url" type="text" placeholder="Website" value="" size="30" /></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Add Comment" /> <input type='hidden' name='comment_post_ID' value='48' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p> </form> </div><!-- #respond --> </div> </div> </div> </article> <aside id="sidebar" class="sidebar c-4-12" role="complementary" itemscope itemtype="http://schema.org/WPSideBar"> <div id="search-2" class="widget widget_search"><form method="get" id="searchform" class="search-form" action="http://acidonemail.com" _lpchecked="1"> <fieldset> <input type="text" name="s" id="s" value="" placeholder="Search the site" /> <button id="search-image" class="sbutton" type="submit" value=""> <i class="fa fa-search"></i> </button> </fieldset> </form> </div> <div id="recent-posts-2" class="widget widget_recent_entries"> <h3 class="widget-title">Recent Posts</h3> <ul> <li> <a href="http://acidonemail.com/relationships-are-hot-acquisition-is-not/">Relationships Are Hot; Acquisition is Not</a> </li> <li> <a href="http://acidonemail.com/digital-marketing-conference-in-the-mile-high-city/">Digital Marketing Conference in the “Mile High” City</a> </li> <li> <a href="http://acidonemail.com/new-research-how-does-reputation-impact-deliverability/">New Research: How Does Reputation Impact Deliverability?</a> </li> <li> <a href="http://acidonemail.com/our-consumer-network-data-the-top-10-things-you-need-to-know/">Our Consumer Network Data: The Top 10 Things You Need to Know</a> </li> <li> <a href="http://acidonemail.com/maintaining-data-privacy-in-a-data-driven-world/">Maintaining Data Privacy in a Data Driven World</a> </li> </ul> </div> <div id="recent-comments-2" class="widget widget_recent_comments"><h3 class="widget-title">Recent Comments</h3><ul id="recentcomments"></ul></div><div id="archives-2" class="widget widget_archive"><h3 class="widget-title">Archives</h3> <ul> <li><a href='http://acidonemail.com/2017/07/'>July 2017</a></li> <li><a href='http://acidonemail.com/2017/06/'>June 2017</a></li> <li><a href='http://acidonemail.com/2017/05/'>May 2017</a></li> <li><a href='http://acidonemail.com/2017/04/'>April 2017</a></li> <li><a href='http://acidonemail.com/2017/03/'>March 2017</a></li> <li><a href='http://acidonemail.com/2017/02/'>February 2017</a></li> <li><a href='http://acidonemail.com/2017/01/'>January 2017</a></li> <li><a href='http://acidonemail.com/2016/12/'>December 2016</a></li> <li><a href='http://acidonemail.com/2016/11/'>November 2016</a></li> <li><a href='http://acidonemail.com/2016/10/'>October 2016</a></li> <li><a href='http://acidonemail.com/2016/09/'>September 2016</a></li> </ul> </div><div id="categories-2" class="widget widget_categories"><h3 class="widget-title">Categories</h3> <ul> <li class="cat-item cat-item-1"><a href="http://acidonemail.com/category/email-development/" title="Acid on Email tests your emails across the most popular clients, apps and devices, then measures the performance of your emails">Email Development</a> </li> <li class="cat-item cat-item-4"><a href="http://acidonemail.com/category/random/" >Random</a> </li> </ul> </div><div id="meta-2" class="widget widget_meta"><h3 class="widget-title">Meta</h3> <ul> <li><a rel="nofollow" href="http://acidonemail.com/wp-login.php">Log in</a></li> <li><a href="http://acidonemail.com/feed/">Entries <abbr title="Really Simple Syndication">RSS</abbr></a></li> <li><a href="http://acidonemail.com/comments/feed/">Comments <abbr title="Really Simple Syndication">RSS</abbr></a></li> <li><a href="https://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress.org</a></li> </ul> </div></aside><!--#sidebar--> </div><!--#page--> </div><!--.main-container--> <footer id="site-footer" role="contentinfo" itemscope itemtype="http://schema.org/WPFooter"> <div class="container"> </div> <div class="copyrights"> <div class="container"> <!--start copyrights--> <div id="copyright-note"> <span><a href="http://acidonemail.com/" title="" rel="nofollow">Acid on Email</a> Copyright © 2017.</span> <div class="right">Theme by <a href="http://mythemeshop.com/" rel="nofollow">MyThemeShop</a></div> </div> <!--end copyrights--> </div><!--.container--> </div><!--.copyrights--> </footer><!--footer--> </div><!--.main-container-wrap--> <script type="text/javascript">/* <![CDATA[ */ jQuery(document).ready( function() { jQuery.post( "http://acidonemail.com/wp-admin/admin-ajax.php", { action : "entry_views", _ajax_nonce : "653abc4a5f", post_id : 48 } ); } ); /* ]]> */</script> <script type='text/javascript' src='http://acidonemail.com/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js'></script> <script type='text/javascript'> /* <![CDATA[ */ var _wpcf7 = {"recaptcha":{"messages":{"empty":"Please verify that you are not a robot."}}}; /* ]]> */ </script> <script type='text/javascript' src='http://acidonemail.com/wp-content/plugins/contact-form-7/includes/js/scripts.js'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = {"visibility_show":"show","visibility_hide":"hide","width":"Auto"}; /* ]]> */ </script> <script type='text/javascript' src='http://acidonemail.com/wp-content/plugins/table-of-contents-plus/front.min.js'></script> <script type='text/javascript'> /* <![CDATA[ */ var wpreview = {"ajaxurl":"http:\/\/acidonemail.com\/wp-admin\/admin-ajax.php"}; /* ]]> */ </script> <script type='text/javascript' src='http://acidonemail.com/wp-content/plugins/wp-review/assets/js/main.js'></script> <script type='text/javascript' src='http://acidonemail.com/wp-includes/js/comment-reply.min.js'></script> <script type='text/javascript' src='http://acidonemail.com/wp-includes/js/wp-embed.min.js'></script> </body> </html>