Basics:
Links Deep Dive
Part 2
Alrighty, here we are at Part 2 of my series on links. If you missed Part 1, you should read that first so you can understand the core concept of links – what they are and how different users use them, along with a few email-specific issues we commonly encounter with links.
Because links are such critical elements of our emails, we should think about all the different parts of them that need accessibility support.
But first, a note to email designers:
My dear creative aficionados, if you design a link in an inaccessible way, it puts us developers in a rough spot, especially if you’re designing this and handing it off to a different company/agency to develop. Honestly, I really enjoy these conversations and will absolutely ping you or send you an email asking for a design revisit. *But* I am kind of weird and maybe oddly confrontational about accessible design. Most developers are just trying to get their job done. *Usually* we’re already behind when we notice an inaccessible design, and pulling a “Stop the presses!!” for an underlined link or bad color contrast is just really dumb. So please – my sweet ethereal sunbeam – please read this and make your links better. <3
Distinguish
One of the key aspects of our links in email is that they need to be distinguishable from other content – or, said more plainly – they need to look different from non-link content in some way other than color. From a technical perspective – this can be anything – bolded, italicized, larger font size, different font, technically, it doesn’t matter what is different about it, just that it looks different. This comes from SC 1.4.1: Use of Color (Level A) – which says, “Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.”
I find it fascinating, but not surprising, that you don’t have to worry about this criteria if the link is not distinguished only by color. So if you have a link in the middle of a paragraph and it’s not a different color, you’re scott-free! Okay, but don’t do that. Making something “technically accessible” but universally annoying is not winning.
Can you tell what text in this paragraph is a link? Nope. You can’t because if we format all the text in weird ways our users can’t tell what’s a link and what is not.
So while technically, you’d meet that criteria with any non-color formatting change, let’s be real, people largely expect links to be underlined.
And sure, it’s cool to be the wild, edgy guy who does something different just to be different, but at the end of the day, if the entire state of Nebraska decided to drive on the left side of the road instead of the right, driving to see my family in Iowa would be a pretty awful experience.
And this is where accessibility gets a bit more big-brained. We’re not *just* meeting criteria for color-blind users. We are doing what we can to ensure that our emails are really communicating, and that means doing some standard things to make things easier and more predictable for all users.
At the end of the day, please don’t make users multiple-guess what is a link in your email. Make it easy. It definitely doesn’t have to be underlined, and if you can style your links in such a way that it’s obvious they are a link without underlining, more power to you. But I say go ahead and make a text link underlined and a CTA link look like a juicy button.
Color Contrast
Anytime we see color contrast on our accessibility checklists, we know we’re thinking about folks with color blindness or low vision. This article goes into good detail with lots of visuals about the experience of color blindness – and this is also the company that makes those super rad sunglasses that somehow help colorblind folks see color. As someone who thinks she’s maybe a tetrachromat, I’ve always been super curious about the colorblind experience.
So it’s important that when we use color in our links, we’re cautious of color contrast requirements. The WCAG 1.4.3 (AA) has specific requirements for the color contrast between our foreground and background colors. My favorite tool for checking these ratios is the WebAIM color contrast checker, where you can easily throw in your hex values and confirm you’re meeting those criteria. If you’re using something to distinguish your links (like underlines) the color difference between your text and links isn’t super critical, so no need to go too far down that rabbit hole. Do pay attention to the definitions here: “Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.” These units can get a little fuzzy on us, and it’s part of why we have to be very aware of our mobile rendering – if the text is scaling in mobile, that font size you entered isn’t going to be the practical font size. I don’t see this happen too often, but I’m also an Android user, and lots of you guys aren’t coding for Android’s Gmail app. When that text scales down, those color contrast ratios can get bumped to small text, which fails many more color contrast ratios.
So I’m getting into the weeds here (but that’s what I like to do) so let’s break it down a bit more: If you are *only* using color to distinguish your links – no underlining or other formatting – you have a higher caliber of color contrast that you must use. WebAIM has a very handy link color contrast checker for exactly this, so you can easily check to make sure your color contrasts are good. In this scenario, you’re comparing the text color near the link to the link color to the background color (that’s three colors to check). Note that it is also recommended that you have some formatting changes on the hover instance of a link that only has a color differentiator… which is where we get into a bit more trouble with email. As you may already know, hover pseudo-classes are somewhat well-supported among email clients, but not great. Considering the hover solution is recommended and not required, you’re still okay to use it. (I like seeing these in footer links!)
Size
The size of the link is important here as well. In the next part of this series, I will talk about link text and will include the length of that text, so in this item, I’m talking about the clickable space available for the link. Or, more accurately, the number of pixels available for you to click or tap to activate the link.
We discussed this a bit in my article about CTA links (not buttons!) to show that one of the important parts of a CTA link is that the entire visible button-like shape is clickable, or as much of it as possible. (I should note that this doesn’t include text links when they are included in a paragraph of text. We don’t need to take additional steps to make those bigger)
The new version of the WCAG – WCAG 2.2 – has a new success criteria for link size that gives us some additional detail. This new criterion – SC 2.5.8 – gives us the dimension goalposts of 24×24 CSS pixels, which is much easier to meet than the sole success criteria that forces us into a whopping 44×44 pixel space, which was provided in SC 2.5.5. This new criteria is for conformance level AA, so we can all feel a little better about having straightforward directions from the WCAG.
This is great for smaller links that aren’t particularly consequential, like social icons, but I’m just going to say that for our big juicy CTA links – you still want to make those guys bigger. (I’m team big buttons and I cannot lie)
So there you have it, some of the top accessibility issues to consider when styling and formatting your links. The next part is going to be quite a bit more intense as we talk about the text that goes into those links, so get ready, and I’ll see you next week.