{"id":262835,"date":"2017-11-22T07:40:46","date_gmt":"2017-11-22T14:40:46","guid":{"rendered":"http:\/\/css-tricks.com\/?p=262835"},"modified":"2017-11-22T07:41:30","modified_gmt":"2017-11-22T14:41:30","slug":"html-email-accessibility","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/html-email-accessibility\/","title":{"rendered":"HTML Email and Accessibility"},"content":{"rendered":"
You love HTML emails, don’t you?<\/p>\n
As a developer, probably not… but subscribers absolutely<\/strong> do. They devour them, consume them on every device known to man, and drive a hell of a lot of revenue<\/a> for companies that take their email marketing seriously.<\/p>\n But most web developers tasked with building HTML emails merely want to get them out the door as quickly as possible and move on to more interesting assignments. Despite email’s perennial value for subscribers, tight timelines, and a general loathing of the work result in things falling by the wayside; and, just like in the web world, one of the first things to be set aside in email is accessibility.<\/p>\n <\/p>\n I think we all agree that accessibility is a vital topic<\/a>. Unfortunately, it’s one that’s ignored in the email marketing world even more than on the web.<\/p>\n Accessibility in email doesn’t have to consume a lot of time, though. There are a few simple practices you can build into your own campaigns that will make your emails more accessible and your subscribers even happier.<\/p>\n One of the main reasons that web developers hate building emails is that we’re still stuck using tables for layout in email. Although there are a few<\/a> different<\/a> ways to get around using HTML tables, most emails still rely on them to ensure that emails look good in Microsoft Outlook, which doesn’t support more traditional CSS positioning, let alone newer CSS layout techniques like Grid (although that’s possible<\/a> in email, too).<\/p>\n But HTML tables present a hurdle for users relying on screen readers for consuming their emails. This is made clear when you hear the output of a screen reader working through the typical HTML email campaign. Mark Robbins of Rebel posted an excellent example of this behavior<\/a> a while back.<\/p>\n The screen reader is doing it’s job: it sees a table, assumes that it contains tabular data, and reads it appropriately.<\/p>\n However, since we’re using tables purely for structural purposes, we need screen readers to ignore those tables. This is where ARIA roles can help us out. By applying the See the Pen Accessible Emails – Tables ARIA Presentation<\/a> by Jason Rodriguez (@rodriguezcommaj<\/a>) on CodePen<\/a>.<\/p>\n With that one simple addition, our emails are much more accessible. It should be noted that nested tables don’t inherit this behavior, so you will have to apply A common practice in email marketing is to use images for everything in the email: graphics, illustrations, copy, links, and buttons. Although this can be efficient (slice, dice, and send it on its way), it’s another huge problem for subscribers relying on screen readers. The typical image-based email has a lot<\/strong> of information that can’t be parsed by a machine. What’s more is that a lot of email clients disable images by default, too. Ever see something like this?<\/p>\nAccessible Tables?<\/h3>\n
role=\"presentation\"<\/code> attribute to a table, we can instruct the screen reader to skip over those elements and move straight into the content.<\/p>\n
role=\"presentation\"<\/code> individually to every table in your campaign. Creating a snippet or building this into your email boilerplate is a good way to ensure accessibility without having to even think about it.<\/p>\n
Out of the Image and Into the Code<\/h3>\n