Welcome

Welcome to S Squared, the digital marketing blog of Shaw + Scott. We’re your go-to source for staying looped in on the industry’s most innovative trends and brand strategies. We cover the latest and greatest in cutting-edge marketing insights, helping you to navigate the digital spectrum-and take your program to new heights.

Building Emails for Accessibility: Layout & Design Elements (Part 1 of 3)

Vinca Swanson October 20,2017

This past year, there has been lot of buzz around issues of web accessibility. In this three-part series, I’ll cover ways that email builders can address accessibility concerns. This is primarily a how-to tech series for developers, but it’s also a handy guide for marketers, enabling teams to make sure they’re providing the best possible experience for all subscribers.

The series will include the following parts: 

Part 1: Layout & Design Elements

Part 2: Tags & Clean Coding

Part 3: Auditing Your Work

In Part 1 here, I will discuss email layout methods and approaches to design that can support readability:

Reading Hierarchy

Screen readers and keyboards read pages top to bottom, left to right, so consider your table <tr> layout build to allow proper reading of your copy.

Below are examples of the same copy laid out differently in the table structure and how a screen reader would read them:

Sample A

Picture1-1.png 

 Sample B

Picture2-1.png

Sample A is a more logical layout because it ensures that, when presented by a screen reader, the content appears in the intended order. The Sample B layout would make it more difficult for someone using a screen reader to understand the storyline. This is particularly important in responsive builds where these columns stack 1x1 in mobile devices.

Element Hierarchy

Use html tags to create hierarchy in your email. For now, <table> structures are the leading scaffolding elements of email, but if there comes a time when tables are not needed, using <div> elements will replace tables and continue to properly structure the email build. Using role=”presentation” within your <table> tag, will eliminate the scaffolding of the table, tr, and td, and expose image elements and textual content. H1, H2, etc. are helpful defining elements that set titles and headers apart from the copy. The <p> element assists in identifying copy as well.

Images Effects and Animation

Consider users with disabilities when creating gif animations. Jarring transitions, contrasting bright colors, and glaring frames can incite responses ranging from mild annoyance to outrage. In some cases, gifs could even contribute to epileptic fits, so be careful when crafting animation. Any enhancements like hover/rollover effects should be subtle as well.

Color Contrast

Problems with seeing contrast is not a dilemma unique to those with color blindness. This problem can be brought on by poor monitors and screen resolutions, as well as varied lighting, glare, and screen sizes. Applying good contrast to your emails requires not just focusing on image design, but on your fallbacks as well. Test your email without images and make sure your alt tags read well against the background color. Make sure your fallback fonts are as readable as your first choice, especially when using thinner font weights.

Links and CTAs

Accessibility practices reinforce good habits like making links and CTAs relevant. Avoid generic copy like “Click Here”, and rather use something more descriptive of the action.

Picture5.png

Linking only “here” is not only generic – it also confuses readers.

Picture6.png

By linking the copy that describes the action, the reader can understand clearly what the link is for and why it’s there.

Picture7.png  Picture8.png

Which one of these CTAs allows the reader to know exactly what happens when they click on the button?

Choose Your Font Sizes Wisely

Never use fonts smaller than 14px. Copy at 11px for terms and conditions is largely unreadable in a mobile device without pinching. On the flip side, you’ll need to test large fonts not only in desktop views but in mobile as well – there are times when big is not awesome:

Picture9.png

Here, a large font may look great in desktop, but blows out even the most reliable responsive codes in mobile screens.

Stay tuned for the next two parts in this series: Part 2, “Alt Tags & Clean Coding,” and Part 3, “Auditing Your Work.”

 

Resources:

https://www.slideshare.net/paulairy/a-type-of-accessibility-65004974

https://www.slideshare.net/M_J_Robbins/accessibility-in-email-eoainsights

https://www.campaignmonitor.com/resources/guides/accessibility/

 

Tags: Dev, HTML, accessibility

About The Author

Vinca Swanson

Vinca Swanson

Interactive Web Specialist, Shaw + Scott (Portland) A creative developer with a passion for ideation, Vinca brings top-notch strategy and flawless execution to every campaign. Vinca specializes in email marketing, UX design, and front-end development. She also has a solid background in SEO. Vinca digs deep into each campaign she works on to ensure that every box is checked and no stone is left unturned. Vinca has worked with such brands as Holland America, Home Depot, Lululemon, Oracle, Harry & David, and Coca-Cola. Prior to joining the Shaw + Scott team, Vinca worked with Un-Cruise Adventures as a Graphic Designer and Email Marketing Specialist.