The age of the Internet means information is readily available all the time. But just because this information is available does not mean it is easily accessed by everyone. What if you rely on a screen reader to see the email for you? What if you are unable to operate a mouse and require the use of a keyboard only to navigate a web page? Or perhaps you are one of 300 million people with some type of color deficiency. How can you read the text if the color contrast is too low?
The Web Content Accessibility Guidelines (WCAG) were created by the W3C with the goal of “providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally.” This standard ensures all web users can engage with content no matter their abilities or what type of devices they use. This month we’ll show you how to implement a few of the most helpful accessibility guidelines so your subscribers can better interact with your campaigns.
Focus on Focus
When a user clicks on or selects an element with a keystroke, the element has a CSS pseudo class of :focus. All browsers have default styling for how an in focus element looks (usually a bold blue border or a gray dotted outline), and designers will often remove these styles. This is fine as long as you remember to add your own focus styles. Do NOT completely remove all styling for focus.
// Don't be this person
:focus { outline: 0; }
// Or
:focus { outline: none; }Instead make sure to keep an outline or border to indicate which element is focused on. This style can be a different color like bright blue or green to highlight the element, but remember several users may have a color deficiency. Giving the border a distinct style like dotted or bold solid can help give visual cues which element the user is focused on if color contrast is a problem. Creating your own focus style ensures readers will have a consistent visual experience no matter which webmail client or browser they may use to view the email. You can also design different focus styles for each element such as links, buttons, or form fields.
// Try this
input:focus { border: 2px solid blue; }
// Or
input:focus { outline: dotted red; }Use Semantic Markup
Using the appropriate HTML tags for the different sections of your email gives users with screen readers better context clues. Set the <title> of your email for accessibility, and this will also display in the browser tab. Instead of using only generic <div> tags, use tags like headings, paragraphs, buttons, and inputs to specify the different parts of your email. Using labels on forms helps users with screen readers navigate the page better as well.
<head>
<title> Tip of the Month Emails: Web Accessibility | emarketingplatform.com </title>
</head>
<body>
<h1> Tip of the Month: Web Accessibility </h1>
<p> Intro text. </p>
<h2> Focus on Focus </h2>
<p> About this topic. Find out more by subscribing to our emails! </p>
<form>
<label for="yourEmail">Your email:</label>
<input type="email" name="email" id="yourEmail"><input>
<button type="submit">Sign Up!</button>
</form>
</body>Set the Table
Two types of tables are frequently used in web design: data tables and layout tables. Tables are pretty clunky for screen readers to dictate, and if your content isn’t organized in a linear left to right fashion, it could read the information in the wrong order to the user.
Data tables are used to present information and usually are organized by labeled columns and rows. If you have a data table, be sure to keep the proper markup tags to distinguish between the different parts of the table. Use <tr> for table row, <th> for table headers (usually the column titles), and <td> for data cells. Also keep data tables simple – avoid complicated structures like nested tables or rows.
<table>
<tr>
<th>Name</th>
<th>Pet</th>
<th>Age</th>
</tr>
<tr>
<td>Kirk</td>
<td>Bird</td>
<td>40</td>
</tr>
<tr>
<td>Spock</td>
<td>Cat</td>
<td>Age is a human construct I don't conform to</td>
</tr>
</table>For layout tables, you don’t want the semantic tags like row and header to be read out loud. To remove semantic meaning from an element and any of its related child elements, use the presentation role; do this on your layout tables only. This is one of several roles that uses WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications). ARIA has several attributes to help supplement HTML so it will be better interpreted by assistive technologies. However, it does not have as much widespread support as native semantic HTML elements, and its roles can be misinterpreted or unsupported by various webmail clients. Some email providers may assign your element a different role entirely than the one you specified. Use of role=”presentation” is well-supported for layout tables, but do more research before using ARIA roles or its other attributes in email.
<table role="presentation">
<tr>
<td>Picture This</td>
<td><img src="/image.png?x14035" alt="A sunny beach with a towel and an umbrella to lounge on"></td>
<td>As Your Next Vacation Destination</td>
</tr>
</table>If you are interested in further detail, check out WebAIM’s (Web Accessibility In Mind) article on creating accessible tables and find more WCAG resources there too. Alternatives to using layout tables include the new CSS Grid or Flexbox.
On the Font Lines
Leave tiny, illegible font for eye doctor charts. No one likes squinting at a screen, so keep a minimum font size of 14px. If this looks terrible on smaller mobile devices, try going down no further than 12px. Pick a font that both reflects your brand and is legible. Once you’ve made those choices, color is next. WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger. An easy way to check if your font color and background color contrast enough is with a color tool like this one from WebAIM or using web accessibility features included in most browsers’ web developer tools.
// Excellent
h1 {
font-size: 40px;
// for smaller mobile devices / portrait mode
@media (max-width: 568px) {
font-size: 18px;
}
background-color: white;
color: #143942; // dark teal
font-family: Arial, Helvetica, sans-serif;
}
p {
font-size: 15px;
background-color: white;
color: #333333; // charcoal gray
font-family: Montserrat, Helvetica, arial, sans-serif;
}
// Obviously someone will find that one use case where this actually works but in general this is a no-no, ok?
p {
font-size: 11px;
background-color: red;
color: green;
font-family: Wingdings, Papyrus, fantasy;
}Linked in to Accessibility
Similar to focus, you want visual cues to readers when they are hovering, focusing on, or clicking on (:active) a link. Again careful with only relying on color to signify these actions – use visual cues like underline, bold font, or a symbol. To keep the experience smooth for users with screen readers, don’t set title attributes in your links. Keep the needed info to the text around the link or the actual link text. Avoid vague language like “Click Here” or “Read More” unless the text leading up to those links makes it obvious where the links are taking you. This post is full of accessible link examples but here’s what they would look like in html:
<p> Check out WebAIM's article <a href="https://webaim.org/techniques/tables/"> creating accessibility tables </a> for more resources. </p>And the CSS for the link:
a {
color: #2B7F91; // teal
text-decoration: none;
}
a:hover, a:active {
text-decoration: underline;
}
a:visited {
color: #081E82; // dark navy blue
}A Picture’s Worth One Alt Tag
Not all subscribers will be able to see your images, so it’s important the screen reader has text to describe it to them. To do so, use an alt attribute inside your image tag. It might seem long and clunky in the code, but try to describe the picture as best you can so the reader can understand what it is and why it’s important in the context of your email. The alt text won’t show up on the rendered page.
<h1> Tired of the same old game? </h1>
<img src="/cat_pic1.png?x14035" alt="Cat pouncing on toy mouse">If an image is purely decoration, then you do not need to use alt text. For example, a decorative line to separate text or a default placeholder image. Also, avoid using images as links – if you do, be sure to include alt text that explains the link’s location or purpose. An exception to this rule is most companies use their logos as a link to their website. In that case, be sure to include alt text.
That’s Not All, Folks
Although this is the end of the tip of the month, this is by far not the end of what you can do to improve accessibility in your web content. Hopefully widespread support for ARIA attributes in webmail clients will be in the future web developments. Until then, use the tools and resources above to give all your users equal opportunity to engage and interact with your web marketing materials.
