Accessibility in Email
According to Litmus, 77% of marketers say email accessibility is a priority for their brand, but only 8% follow accessibility best practices. Our goal with this workshop is to help attendees understand:
– Why does email accessibility matter?
– The copywriting, design, and coding aspects of accessibility
– What tools to use to be able to make your emails more accessible
You will end up leaving the workshop energized and ready to make a paradigm shift be prepared with clear reasoning why your company and/or clients should care and a thorough checklist with all the important aspects of email accessibility.
About: Roland Pokornyik
Roland is a seasoned online marketing expert who started his own email design SaaS – EDMdesigner – back in 2013. Since then he published 100+ articles and spoke at various conferences about email design. You can read his most recent writings on Chamaileon.io – a collaborative email design platform that helps designers, marketers & stakeholders streamline their email production processes.
About: Patricia Blesa
Patricia started her email HTML adventure in 2016 while working at a marketing agency and has been neck-deep into email code ever since. She’s responsible for assuring all emails created with the Chamaileon & EDMdesigner render flawlessly in all sorts of email clients. She’s among the organizers of the CSSConf & JSSConf in Budapest and also regular Fronted Meetups
Roland Pokornyik 0:01
Hello, everyone. Thanks for joining us. It’s Patricia and Roland here from came in. We are both email geeks and fans of email accessibility, which is our main topic for today, I speak about most of the content and design side of accessibility. by Patricia, we speak about email coding during this roughly 50 minute long session. So let’s start. We’re going to speak about these six topics. First, why accessibility matters than the main pressing principles of web accessibility, copy design code side of things. And finally, you will get a checklist that you can take home print out, or whatever you want to do with it. Let me start with the video.
Patricia Blesa 0:52
Hi, guys, so a lot of you have asked me how I use my phone so I thought I’d show you as I order a coffee. Come with me. Let’s go I don’t have my cane. I’m sorry. Alright, so I actually had this a lot slower than I would normally do it because I want you guys to understand it the
search field, see 20 Co, co Co, co co co co op co br co Colby, cold Nitro cold brew, Irish cream cold brew.
brew with Starbucks registered
Irish cream, vanilla, sweet green, cool, this one vanilla, sweet green,
Patricia Blesa 1:25
and I’m going to customise it so I want a venti because I really like coffee and the tea
button up change size,
Patricia Blesa 1:31
excuse me and alert cancel, continue to want to continue. regularised and I want to add a splash up to personal splash. Okay, so I’m going to keep finishing this up because might take a second but that’s pretty much how I do it.
Roland Pokornyik 1:47
It was the native Starbucks app, not an email. But regardless, this is the kind of experience we want all your subscribers with disabilities to fail when they interact with your email in their inboxes. Accessibility matters for many reasons what I mainly focused on dyslexia, colour blindness, and actual blindness, each affect many people in the globe. For example, five to 15% of the US population have dyslexia. While some other sources say that this proportion is somewhere in between 10 to 20%. On top of that, 4.5% of the population in Great Britain suffer from colour blindness. And I guess pretty much the same is true for the rest of the world. 2.4 to 3% of the population is blind even in developed countries as the like the US and the UK. There are so many who are affected by temporary disabilities. For example, I can I surgery, all this needs to be taken to account. Accessibility not only matters because of people with disabilities, but because of voice assistance that are becoming more and more popular these days. Alexa is the only voice assistant that can actually read out the whole email. The others like Siri, or Cortana will only read the sender name, subject line and preheader with this lovely text, saying that sender name sent you an email about subject. It says preheader would you like to reply? So this is the kind of experience people will have, then they they bounce up on your email. And they using their voice voice assistant, Google Assistant actually cannot read the email at all. Which is funny because Google owns Gmail. But there are more funny things when it comes to Google and Gmail. So let’s skip that topic. For now. Let me give you a brief introduction into the web content accessibility guidelines that you need to take into account in your email templates as well. So the first one is perceivability are perceivable. It means that your content needs to remain easily consumable for people with disabilities. Now order to reach this you need to add add add text for your visual elements. subtitles for video generally speaking on the web, which is not really applicable in email. In most cases, you need to use sufficient colour contrast and use design that works without collars as well. Second one is operable which means that people need to be able to interact with their emails in alternative ways. In order to do so. You need to make your emails easy to navigate with keyboard, mostly tabs. Use descriptive links to help people understand what a certain link does display elements for sufficient time. It’s especially important when you have animated Guess in the email, and avoid using visual visuals that can cause seizures or other unvented physical reactions. The third one is understandability, which means that you make your you need to make your text understandable for those who use screen readers, for example, you need to indicate the language at the very beginning of the email. Follow copyright copywriting conventions in a predictable way, and most importantly, make your text readable in terms of design and content as well. your content needs to be robust enough to be comfortable with all sorts of different user agents and assistive technologies that people with disabilities use. That’s for sure we’ll talk about more in this topic in the coding session. Let me start with the copywriting aspects of email accessibility. I’m a big fan of email design. But I also believe that great design starts with great content, so everything starts with the copy. Before I would dive right into the email copy, I would like to highlight that no matter how great your email content or design is, if you fail to make the sender name, subject line, and preheader interesting and trustworthy enough to make people open your message.
Also, remember that both Siri and Cortana will use the above format to read out your email. When you write email copy, please forget about SEO Google, use human to human language that’s called conversational and easy to understand. Even adult Americans prefer to read seventh grade level texts, by the average would be able to tackle ninth grade as well. You can use you can use for example VW to check your readability score, and Grammarly to check how correct clear engaging your content is and how well it’s delivered in order to make the right impression on the reader. The free plan in both tours is already a good starting point. Always make sure to use headers and hierarchy in your copy. Because the different header levels help your subscribers who use screen readers clearly understand the hierarchy of your message. So if you want to build up your email design system, it’s best to stick with certain heading and text is that should be carved into stone. Always avoid using all caps. The problem with all caps is not only that, it can feel like shouting on the web. But it also makes your text much harder to read, especially for dyslexic people. Also with a justified text, which might be a good idea from a design perspective, but it is difficult to read for both dyslexic and non dyslexic people as well. Just because it creates large, uneven spaces between letters and words. When the space is lined up about one or the other, distracting river fight space can appear. As you can see in this later illustration. This can cause dyslexic readers to repeatedly lose their place by reading and you cannot avoid creating the river effect easily by using left align text into the instead of justified text, especially for your paragraphs. So if you use centre aligning, make sure that the text that you align to the centre is short enough. According to Litmus f copy is longer than two lines, it should be left aligned and still its centre aligning seems to be more accepted in email designer than justified text. And actually there are many brands including Starbucks, Disney, Airbnb, GoPro or Nike who refused to obey this rule. And actually, it’s not a good experience for dyslexic people especially. But it’s it’s also challenging to read for for non dyslexic people, because you just don’t know where to go with your eyes when you want to start reading the next slide. Make sure to break up large books blocks of text always into multiple lines. You can see in this short animated GIF is just simply much easier and convenient to read shorter, shorter paragraphs and because they are more attractive to the eye they will be more engaging to read for for your subscribers. Best Practice says that you shouldn’t use longer paragraphs and five lines so rather keep it as a maximum please. When you want to put emphasis on something instead of Italy, or underline text, make sure to use Boy attacks because it’s much easier to read for dyslexic people, especially, I believe it also looks better from design perspective as well. To be honest, I always hated Italy and underline text, especially underline. I think Italy is good if you want to quote somebody, for example. But if you feel that the code is more important than that, just stick with normal text, and maybe a different colour. I’m pretty sure that most of you heard that our text is really important in emails, because images might be plugged in some email clients. And also because screen readers read out the alt text loud. But it’s still not too easy to write proper attacks for your images. Here are some tips to consider when you work on your alt text. Before we go through this list that I collected, I would like to remind you never use something like please enable images in your email as the alt text for your images. And
apart from that, it’s important that should never repeat the same alt text in your message. And every text that you add should be descriptive, short, maximum 100 characters, but most likely, even less. In this 100 characters you you’re better explaining your actual image that you heard the alt text for and make it meaningful. The screen readers feel that differentiate between our text or title text, they read both. So make sure that you only use our text in this case. For illustrations, no all text is required. It it’s enough to add image ads only to those images that haven’t been named in your in your email. The last one is that if it’s possible to start your alt text, it can be something that looks cool for those who who can actually see them. Of course not for people with certain disabilities. Here’s an example email from fandor. I ran a litmus test with it. And this is what the actual screen reader would understand from this email. As you can see, there’s hardly any text in this email. And on top of that, this email is may small, made up mostly of images, all the all of these buttons are pretty old buttons. But the whole called reborn, called karasik. reborn section is a false image, actually an animated GIF, which you can see here, I would strongly discourage you from using almost full images like Fender does, and is that I’m a big fan of proper HTML emails where there are images and text combined with bulletproof buttons. And that’s something that you can create with an email builder, like chameleon, for example, pretty easily. So even even this email from Fender would be possible to be added to an email builder like what they provide. But, of course, there are other solutions as well. So whenever you add an image, which has some sort of meaning, to deliver to the user, please make sure to add text, just for you to practice. Here’s how you can access the code of this email and you can try to write better attacks. When you do so please drop me an email and send me your version for this specific founder email. If you follow the steps that I outlined, previously, you’ll be able to make your email copy accessible. Now, let me show you the design side of accessibility. It’s also related a bit copy. But it’s something that comes up pretty often as a discussion, not only in emails, but on websites as well as lines in your email shouldn’t be longer than 75 characters. I think keeping the 600 pixels as a standard is still a good idea, especially because if you have such limitation in place, you won’t be able to write to long lines of text in your emails. And I’m a big advocate of short lines, even on blogs and websites, or otherwise see, for example, medium.com uses something between 80 to 90 characters, but since their spacings are big enough, it’s still convenient for the iterate in email. I will rather Try to stick with shorter lines than, than a blog like medium. Never make text to grey. Even if it sounds like a good idea from a design perspective, you want to keep readability in mind, like to colour codes that you should take into account when you write text on a white background in your email designs. Always optimised the call to action, size and spacing. According to WCAG, the minimum size for call to action should be 44 by 44. Big. So Google advises a bit bigger 1448 by 40 pixel. And the minimum spacing, according to Microsoft and Google should be a bit different. But I’m, I agree more with Google. Here’s a great example. From really good emails, it was an email with a long checklist, where the actual checklist items vary as checklist. So it’s really a good job by CGU, 90. Congrats on that.
So what I read this email, especially that the check box size is 28 by 28 pixel, the margin is 20 pixel on the right and even more on the left. So actually, both the WCAG and Google guidelines say that the call to action size should include the spacing around. So this checkbox while is still small, it qualifies as a as a good call to action, because the total size is already 1448 by 40. Arabic. So in this case, I mostly see this applied in email designs with the footer section, especially with social icons. So if you have small letters, 24 by 24 weeks and social icons, just make sure to add enough spacing in between them to make them clickable. Even on mobile devices. Once you have that nailed, make sure to optimise the contrast ratio in your emails, it’s really important to keep the contrast ratio between the text and it’s background about 4.5 to one, if the text is small, and three to one, if the text is larger, and what’s really important, no rounding is loud. So if you use that aimed at work, and you get a result, saying that your contrast ratio is 4.4 to one, you still need to change the colour, you cannot turn it up to 4.5. Let me show you an example. For this contrast ratio issue. So it’s an animated GIF. From Vinny Me page looks cool, but it violates a lot of things not only contrast ratio, it’s all caps. The contrast ratio is only one point 96 to one, and there’s moving can easily cause dizziness or vertigo for some people. And also the problem is that there, there isn’t just enough time to read the text, if you focus on it poorly. So this is good design. I love it. But if I take a look at it from an accessibility perspective, I have to say, No, please don’t do this. Maybe a static image that can be played on a click would make sense. But that’s not something that you would be able to do in an email. Or, in this case, if I really want to stick with this design, I would think of slowing down the animation a bit. Maybe that would help to make this email easier to consume. Still, even in that case, the contrast ratio needs to be fixed. To be honest, it’s really easy to run into this contrast ratio issue. I faced it myself as well and I prefer this presentation. At first I used my standard light blue in the slides with white phones. And after checking it, I had pretty much the same result contrast ratio that was like two to one. So I immediately updated my slides and master template and change everything to this deep blue that you can see in the slides now. So it’s not a unique issue that we see in this image. It’s easy to ignore contrast ratio is a much better example from GoPro, right, the hero hero image has a wonderful contrast ratio much better than expected. Even the bottom has a wonderful contrast ratio with this black background and light blue. The only problem is with the text. This is pretty much I what I faced with or light blue is that the text in this case has only a 2.5 to one contrast ratio. So the colour should be changed a bit.
One other important with colour is that you shouldn’t use colour only to make something understandable. So for example, when you have a chart, you need to add labels to it or maybe even add a pattern to the chart bars. Because this is what will make it easier for people with disabilities. To understand your illustration, maybe they might miss the colour, but not the pattern or not the label in this case, so it’s the best if you use both the label and the pattern in your charts. For example, this is something that you can check in travel. If you enabled colorblind flattening mode dayville add patterns to every colourful label that you create in Trello, which I’m pretty sure it’s really helpful for people with colour blindness. One last thing I would like to highlight is that you should always make sure that your email style aligns with your website. So here’s an example from Strava. You can see there, this is how the application looks like. This is how their emails look like they follow pretty much the same guidelines. Although you can see that the the email had a slight design change, you will, you’ll still know that. Okay, this email came from struggle, the first thing you should do is build up your email design system, which you can do in various ways. If you use hand coded emails, the best thing would be to create a master template that includes or your regularly used blocks. And whenever you or somebody from the team creates a new email, they should rely on this master template only. If you use an email design platform like cameleon, you can create this master template with the visual builder, you can save each and every block to your company folder or, or two separate folders, you can group them according to brands, whatnot. So I believe that purpose built email design tool can help those especially who are who want to build their email design system and they don’t want to just tinker around in their ESP building emails from scratch or, or reusing random emails from the past. I think it’s always best to go back and use the those pre designed elements in all the emails that you create, that you Once approved and managed to agree on everybody in the company. Okay, so this was my break, let me add the slides over to Patricia.
Patricia Blesa 23:23
Hello, my name is Patricia. And I’m an email developer at chameleon. And today I will talk about accessibility from a coding aspect. At first, I will talk about small changes in the code that make your email more accessible. And after that, I show some email specific issues and how to solve them. I’m either a visitor it for this
You can find it and others and you can fork it or copy and use the examples and try the tips and test them. And know my first tip is to add an attribute to your HTML tag. It’s very useful because your users screen reader will know how to interpret the email. So you can define it for them all content or if you have any content that for some reason, it’s an other language. You can put this attribute on
Patricia Blesa 24:43
like a blockquote or a p tag on h1 just my widow about how to do this but it’s really easy and it has no effect on the design at all. My next tip is a very important one is about and area row equal presentation to every table element that we use. First of all, why we use tables at all, we are the developers to using tables. Because outlook. There is an inner logic with three levels of support on how the word engine handles CSS styling on various HTML tags. And why this two part of CSS is on table man’s table, date, th, and TD elements. So for layer purposes, we still using table for consistent rendering across all email clients. Yeah, it’s a safe bet for and our clients do it best have the widest support, we can read up them. But we can use them wisely. Just use as many tables that are really necessary, for example, or two or three column layout. And don’t forget to add row presentation to every table that only for layout purposes, because without it, screen readers will read over the tables, rows and cells. And it’s not a pleasant experience to hear all the empty cells read out loud, and it won’t inherit to the nested tables. so be cautious. And you have to be cautious about these exceptions to the throw has no effect on tables reporters. If you use an actual table with data inside it you semantic table system.
Above about area roles in general role attribute is prioritised over time played through on the HTML element. So if you just test any other roles, check that they are havior. How you expect them is a short example have to use your presentation. But you can find a more detailed example there. Episode Three, I think Ron already mentioned, how important is to organise your content in a logical structure. And one way to achieve this using semantic html5 elements. But as developers don’t force it, because there are a lot of possible rendering inconsistencies in every browser have a beard is a system for semantic elements, and or the email client have an impact on rendering, because their beauty processing logic. There are a lot of factors out there that can bring your beautiful style. I’m not complaining. That’s the beauty of this work. The testing can be time consuming, but it’s really worth it because it helps user navigate and consume your content more easily. And if for some reason, your email lost it stylings, semantic elements still remain structured in a logical order. And there are fixes for the possible rendering consistencies, just set the margin and make sure your CSS rules have no invalid values, or typos in them. This topic is a bit tricky one because using semantic list items are not that easy. Like I mentioned previously, then set the margin can solve everything except this one because if you set marginalist outlooks with production will transform it to Peter with Spence in it and it’s far from the optional because we’re going to lose our styling and another benefit that is the screen reader can tell how many items there are in the list and it will describe the type of words used to denote the not each list item. So this not gonna happen on our books, but there is a solution for that too. You can wrap it this whole list In the container and put the marching on it, you can check it on the repository. And keep in mind, avoid image only emails, and use as many live text in the email as possible. Because it later helps your clients find your email inbox using keywords, if they want to use a coupon later or something and easier to make last minute changes on the content. You don’t have to modify an image. And less content will be unreachable in case of poor network. So avoid image only emails not just much better for accessibility, it’s better for users in general. And here is our last topic. There is that is a real tricky one. Avoid auto linking, there is interesting and strange behaviour. In some email clients, they just check your content and any text or numbers that support reminds them to a phone number or address or date or something like that. They convert into our link and is going to look like this. The problem with this is it’s not reliable, this blue text can break the design and cause accessibility issues are dark background. And if you not intended to link to your your user to a calendar date or something, it’s essentially useless. There are some tips how to avoid this kind of behaviour, just use CSS reset rules to get rid of that blue colour in use classes on intended links. And then, but there is a catch for accessibility reason. Don’t use only colouring, you mark your links with another method to like underlined 90 or bold font weight because people with called Imus may not notice that link. And there is another trick, you can use zero with non joiners inside techs that possibly affected by auto linking with this hack, you can trick the processor to miss your content won’t recognise it as item linking. And you can link them yourself with proper data with styling that you can define yourself to you can find an example for that depositary too. And I think that’s it. Here are some useful tools you can use, check them. And there are some really good resources about these topic.
Roland Pokornyik 33:28
Finally, here’s the checklist I mentioned to you in the beginning. If you obey these rules, your emails will be way more accessible than most companies. So at first, you need to make sure that your email is understandable. You use human to human brain language that has proper hierarchy, whether it’s image or text. from a design perspective, the contrast, the ratio needs to be just right. And you always need to be consistent with all your other communications. And of course, if you make your email accessible, I would strongly advise you to do the same with your website. And from the coding side, it’s important to define the language of the garden. For example, I experienced once I’m not a native speaker, I guess you figure that out. So I I made my computer read out an email in English. And since the language wasn’t defined, it started reading out in my mother tongue. And that sounds really funny. Somebody has a Hungarian pronunciation but still tries to speak English, US area with caution. We have that covered for you in coming in, in our new generator engine that’s going to go live in a week or so. So feel free to drop me a message and I’m happy to show you how we Take care of that. Use semantic HTML elements. Avoid auto linking can be really annoying. Also from a design perspective, and avoid the image on the emails at all cost. And, as I mentioned to you and also, as Patricia mentioned, it’s really bad idea to send emails that contain only images and betters use something. Their images and real HTML text have a good combination. Thank you for all for joining us today. Stay on be safe and take care will be available here in the chat session for another 10 minutes. If you have any questions or whatnot,