Accessible Emails

[00:00:00]
>> Rodriguez: So I mentioned a couple of times, accessibility and email. This is something that for a long time, wasn't really talked about in the email world. Accessibility was always an afterthought if people even thought about it. We've been using tables for a long time to code emails, tables are for layout are not inherently accessible.

[00:00:20]
We've been using all image based emails which aren't very accessible. We just haven't really cared about it, but it's nice that there a move in the last couple of years to create more accessible emails. But there's a couple of very specific things you should really account for in email itself that's a little bit different from the website.

[00:00:38]
But why should we care about accessibility in the first place? Hopefully, a lot of you have studied accessibility, or take some of the Frontend Masters courses about it, or at least thinking about it. Because it is increasingly important, there's 285 million low vision users. I think this was from the World Health Organization study last year.

[00:00:58]
39 million of which are blind. So those are people that are relying on assistive technology to consume digital content including emails. So if we're not accounting for those users, that's a lot of the large portion of the population that are completely ignored. They can't interact with their emails, they can't consume our content.

[00:01:16]
From a business perspective, that's people that we're leaving out of the equation. We're not getting money from them, we're not participating with them, we're not creating those relationships. So you really wanna focus on those users, and think about how we can create more accessible emails for them. A colorblind, 8% of men are colorblind to some extent, there is different variations of that by that kind of fact.

[00:01:40]
When we are thinking about links or design of our email, what information people can actually get from those. Women are a little bit better off point 0.5% of women are colorblind. But still significant portions of population that have these disabilities, these different abilities that affect how they consume our content.

[00:01:58]
My favorite thing though is that this idea that everybody's temporarily able bodied. This graphic's from the Microsoft Inclusive Design Toolkit which is an amazing resource for creating accessible digital products and digital content. But they propose this idea that we're all only temporarily able bodied. At some point we're gonna have some sort of disability.

[00:02:20]
Whether that's a permanent disability like we lose a limb, or we go blind. If it's temporary, it could be something like you just got an eye exam, and your pupils are dilated so your vision's a little bit off. It could be completely situational, or you are holding a baby in your arm, and you don't have the full use of your limbs for interacting with an email.

[00:02:40]
God forbid you're driving, you're trying to figure out where you need to go, and that information is in your inbox. So you're distracted, and you're trying to figure out where you need to go. So anything we can do to increase accessibility for the smaller portion of the population that has permanent disability is going to make and create a better experience for all users regardless of their abilities.

[00:03:03]
So it's really important to think about that kind of stuff when you're designing emails, when you're developing emails. So accessibility and email comes down to those two sides, the visual design of your campaigns and the content and your campaigns. And then the development practices we use to implement that stuff.

[00:03:19]
So from a design perspective you wanna ensure a couple of things, you want to rely on color contrast, keep that high. So anybody with low vision, or anybody with a dim screen, or like an older screen that doesn't have as wide of a color range, they can still read your content.

[00:03:37]
They can consume that content interact with your emails. It's important for people with any sort of reading disability, they might not be the strongest readers, they might have dyslexia. There's other things that could affect the way they read content or process visual information. You wanna create a strong visual hierarchy in your email so that it's easy for people to scan that content.

[00:03:58]
Get what they need out of that email campaign, and move on with their the day. Again, with reading disability is focusing on readability using things like left line text. Using that generous font size, that generous line height is gonna make it easier for people to read that content regardless of their reading ability.

[00:04:18]
And then keeping layouts simple, and making sure things like buttons are usable, text links are usable. Embracing those link conventions that we saw earlier are gonna create much better more accessible email regardless of somebody's ability. Readability is a big thing for me just because I feel like a lot of people don't consider it in their email.

[00:04:40]
So this is an email example, you can see it's a huge amount of text that's all center aligned. For most people, it's not a massive problem, but depending on your reading ability. Depending on just what you're doing throughout the day, this could prove a problem. Because all of those different lines have different starting points for a reader.

[00:05:03]
So mentally what your brain's doing is, you get to the end of the line, you're jumping down to the next line, trying to figure out where it needs to start. It might not seem like a big problem for people that are comfortable reading, or have really strong reading abilities.

[00:05:16]
But for others that's a huge hurdle for them finding that next line, and it could create this friction that sometimes they're unable to overcome. So using left line text is a great way to just provide baseline readability and accessibility for emails. Because you don't want all these different starting points for these lines.

[00:05:36]
I generally say if it's more than one or two lines of text then you should left align it. Headings are usually fine to have center aligned, but longer paragraphs like this can be problematic, yeah?
>> Speaker 2: Maybe we're doing does that apply for like justification as well, like or no-

[00:05:54]
>> Rodriguez: So, [LAUGH]
>> Speaker 2: Somehow, yeah.
>> Rodriguez: So there you go. Yeah, so the question about justification so you can justify that tax so that it has that even those outer portions so the ending line and starting liner even it looks nice and symmetrical. The problem with that is I introduced those similar hurdles as rivers of white in between the text.

[00:06:14]
So the spacing is adjusted in between each word to make it that uniform, symmetrical look. But when you do that it's the same mental hurdle for people that have any sort of reading disability. So it's just creating that friction for them, that frustration, and that's something we wanna avoid.

[00:06:31]
That's why I usually suggest left align text with that ragged edge for anything that's longer than a few lines of text. Headings, center line it, smaller blocks of copy, you can try justifying that text. It's nice visual look, but it's not really that useful for people that have to worry about that kind of stuff.

[00:06:55]
But the best way to make emails accessible is to use real age email text. So we saw earlier those image based emails, they don't use that text, so anybody using a screen reader. They're gonna really have a difficult time consuming that content. There's nothing for them to pull from.

[00:07:12]
So using live text, using html and CSS is the best way to create more accessible email campaigns. As much of your design and copy you can put into real text, the better. This is a great example from STRAVA, that does the exercise tracking, cycle tracking. They have this beautiful email, it looks gorgeous, has this big bold typography, these bright colors, it's a great email.

[00:07:40]
But most people would think this is all image based. But when you disable images, you can see that it's almost all live text. So that design is consistent across those different experiences from images being turned on, images being turned off. Lose a couple of things like the logo, the sharing icons on the right there.

[00:08:00]
But all the important information, your activity, your statistics that you wanna get from that email, it's all there. And it's all beautifully designed because it is using html and CSS. So I would urge you to use as much text as possible, and kinda rethink that a lot of people will think that for something to be accessible, it doesn't necessarily look good.

[00:08:25]
It might look outdated, or not be well designed but you can create really great while design experiences like this driving email. And keep them accessible by relying more on text than anything else. When it comes to development, there's a couple of things we wanna make sure we account for when we're coding our email campaigns.

[00:08:44]
Perhaps, the most important one is making sure that any tables we use are accessible for people using screen reading devices. By default tables like they denote that you're presenting some sort of tabular data. They're not traditionally used for layout like they were never intended to structural elements, or laying out a web page, or an email campaign.

[00:09:04]
So when you start using them for that, if you're not accounting for it then, somebody using a screen reader. Will encounter your email, and it'll read out each individual table, table row, and table cell. If we're using multiple columns, multiple cells, then it will literally say table. Table row one of three, table cell one of three before it even gets to your content, which is a horrible experience for somebody that just wants to get into the content of your email.

[00:09:31]
So the way we take care of that is by using this attribute role and setting that to presentation. So that tells screen or APs is that this is purely presentational, we don't want the table being read out loud to our user. So it'll skip over all those table tags, all those table rows, table cells, and just focus on the content of our email campaign.

[00:09:52]
Which we're hopefully using that semantic markup to provide that additional context. It should be noted that that role needs to be set on each individual table, it's not inherited. So a lot of times, email designs will have nested tables. You'll have a container table, which we'll look at again in a minute.

[00:10:09]
But you'll have nested tables depending on your layout. So if you set that at that main container table it's not gonna hair down to your other tables. So any table you introduce in an email, unless it's presenting tabular data of some sort, then include that role attribute and set it to presentation.

[00:10:26]
Using semantic markup, again, is really helpful. That can help reinforce that visual hierarchy by providing that same hierarchy for people using assistive technology. So using things like headings, and slanted like paragraphs, and emphasis, all those semantic elements that work across email should be used to provide that additional context.

[00:10:46]
Again, we saw using those texts alternatives for all of our images is really important for, not only accessibility purposes, but for sited users that have images disabled. They can still get some sort of contacts, some value from our email campaigns. And then we saw earlier when we were you're just starting off with our dock using the lang attribute to make sure that people using assistive technology.

[00:11:09]
It uses correct language profile so that they can understand exactly what that content of the emails trying to say to them.