Office of Marketing and Communications

Email Accessibility Guide

What is email accessibility?

Email accessibility is the practice of ensuring that those with disabilities or those using assistive technologies can understand and interact with all elements in your email. Common disabilities to consider include visual and hearing impairments as well as cognitive or learning disabilities. Assistive technologies range from screen readers and magnifiers for those with visual impairments, to head pointers or eye tracking for those with physical disabilities as well as text readers or dictation software.

Why is email accessibility important?

The World Bank estimates that 15% of individuals have some sort of disability or impairment, affecting millions of individuals worldwide. According to the NIH, 15% of adults over the age of 18 (37.5 million people) report some kind of hearing trouble and 2.9 million Americans have low vision. During the 2019 autumn semester, there were over 4,200 Ohio State students registered with disability services, 864 of whom use a screen reader. By not making your emails accessible, you could be limiting interactions with a significant portion of your audience. 

How do I keep email templates accessible?

Below are best practices to keep in mind when designing your emails. The Ohio State branded email templates are created to follow these standards and are a great place to start. Many of the elements listed below are already included in these templates; however, these best practices are provided to help you keep accessibility in mind when modifying the templates for your own emails. There are also elements that must be updated manually for each email send to create the best experience possible.

Making your current emails accessible 

Not that you are aware of the many elements that go into making your email accessible, but the branded email templates are a great place to start since they have language settings and presentation roles. Once you have identified the layout of your email and have input your content, use the following checklist. If you find it overwhelming to include all the modifications at once, start with one aspect at a time. 

  • Email Structure: Check your heading and paragraph tags. Does your hierarchical structure make sense? Are all paragraphs separated by <p> tags rather than line breaks <br /> or padding?
  • Visual Elements: Check your colors and images. Do your background and foreground colors have enough contrast? Are your images of digital quality? If there is any text in your visual elements, will someone with visual impairments have access to this information as well? Does your email have a good balance of images and text with no more than 40% images.
  • Alt Attributes: Did you update the alternate attributes (alt tags) for the images in your email so those with vision still understand the visuals in your email?
  • Text: Check the readability of your content. Is all of your text left aligned? Are your font size and line height large enough?
  • CTAs: Check the clarity of your call to actions. Do your buttons or text links utilize descriptive ARIA label attributes where necessary?

Considerations when building emails

Semantic Code

Without the following elements, the readability of your emails will be negatively impacted. The code in these sections show how each element is executed in the branded templates.

  • Language Settings
    • Your language must be set to English. at the beginning of the email code to ensure your content is registered by output devices in English.
    • HTML: <html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en" lang="en">
  • Presentation Role
    • Setting the role of your tables tells screen readers how to interpret and translate the information within them to the user. A role of "presentation" uses Accessible Rich Internet Applications (ARIA) to tell the screen reader that the table is a presentation table, not a data table (which is the intended use of tables in HTML). This makes reading email content a lot more intuitive for screen readers.
    • HTML: <table role="presentation" class="m-width100" width="600" border="0" align="center" cellpadding="0" cellspacing="0" style="width:600px; min-width:600px; max-width:600px; text-align: center;"> <tr><td class="m-24-34" align="left" valign="top" style="font-family: Arial, sans-serif; font-size: 28px; font-weight: bold; line-height: 38px; color: #333333; padding-top: 0; padding-right: 0; padding-bottom: 6px; padding-left: 0;"> <h2 style="font-family: Arial, sans-serif; font-size: 28px; font-weight: bold; line-height: 38px; color: #333333; margin: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;">This is a medium heading</h2> </td> </tr> </table>   </td>  </tr> </table>    
  • Heading and Paragraph Tags
    • Use hierarchical <h> heading and <p> paragraph tags to make it easier or those using screen readers to navigate and scan through your email, allowing them to decide which content they want to listen to.
    • One recommended structure is reserving <h1> for the email's title, <h2> for major headings and <h3> for major sub headings.
    • For multiple paragraphs, use separate <p> paragraph tags instead of multiple line breaks, so the screen reader interprets the paragraphs as block of text within a table. (Note: Line breaks are good for purposes like signatures or addresses.)
  • Tip: Rather than trying to turn an <h1> into an <h2> in your code, grab a new module from the brand site or from within SFMC to eliminate errors tied to the style sheet at the top of the email.
  • Tip: Screen readers read left to right and top to bottom, so order your elements in that way.

Visual Elements and Color

The next steps in making your email accessible focuses on all of the visual elements in your email including colors and images/gifs, so those with visual impairments can still interact with your content.

  • Colors
    • When including multiple colors in your email, keep in mind those who are colorblind. Color blindness can range from not being able to differentiate certain colors to not being able to perceive different colors at all.
    • Use a color contrast checker to make sure those with visual impairments can still read your content with specific background and foreground colors. Don't forget to check the colors of your in-text links.
    • Note: For colors, university accessibility standards require WCAG AA, but passing WCAG AAA whenever possible is ideal
  • Images and Animations Best Practices
    • Only include images that can be resized to 200% without losing their quality for those using screen magnifiers. Images should be under 1MB to render properly in email. 
    • Your email should not be made up solely of images. 
      • The accepted standard is no more than 40% of your email should be made up of images. 
      • Do not include any essential text in visual elements alone. Your main message should be delivered through live text.
    • Animated .gifs: Animated .gifs have been utilized in email for decades. The ability to view an animated .gif within an email is dependent on the inbox application of the user and not the marketing tool sending the email. The strategy for use of a .gif should be considered carefully, as it should make sense for the message.  
      • The .gif default frame should be a still image that best represents the message of the creative. If the inbox application used to view the .gif does not play the .gif this "default" frame will be visible.
      • The animation should stop after 5 seconds
      • The animation should not contain blinking/flashing content
        • Avoid animations with excessive flickering and flashing as they can trigger people with seizure disorders. A good rule of thumb is for flashing to be slower than 3 times per second.
      • Link to more information https://accessibleweb.com/question-answer/animated-gifs-okay/
  • Alternative Text (Alt) Attributes
    • For those using assistive tech, alternative texts in your HTML code allow them to still understand your images even if they cannot see them. When a screen reader passes through an image, it will  notify the user that they are over an image and read out a description of it. Therefore, always use an alternative text with your images or gifs that help a recipient understand your email content.
  • Emojis
    • Emojis can be a great marketing tool when utilized within a specific marketing strategy. It is recommended that all emails using emojis are part of a testing plan before implementation for a full campaign's send. To ensure both the figurative and literal meaning (and alt text) reflect what you intend. It’s important to check that assistive technology can read the emoji (because not all screen readers read them). (Source: https://www.tiny.cloud/blog/emojis-and-accessibility/)
      • Unicode emoji listings
      • For Ohio State purposes, it is recommended to not overuse emojis. Please confer with your copywriters and extended marketing team.
      • It is important to consider that many times screen reader listeners aren’t able to interpret your meaning when the emoji is being used as the descriptor. There are many meanings for emojis and the nuance of this cannot be inferred by all technology.
      • Emojis in the subject line:
        • For subject lines, alt tags are not a part of the code as emojis are not images but unicode characters. 
        • Emojis can emphasize the emotion for the content of the subject line and email body to engage the reader to open the email.
      • Emojis in the body content:

Text

The following section is all about making the text in your email readable, which encompasses every aspect of your copy.

  • Font Type
    • Only use web safe fonts that are easy to read. Per brand guidelines Arial is the default font for electronic communications and is used on all branded email templates because it is most widely supported on email clients. 
  • Font Size and Line Height
    • Ensure that all font sizes for your content are at least 14 pixels on desktop and 16 pixels on mobile. The templates all have font sizes larger than 15px (will be changed to 16px soon) as well as queries in the style sheet for consistency on mobile.
    • Line height is the vertical distance between rows of text. Ensure that your line height is larger than your font size for better readability. A good rule of thumb is having line height that is 1.5 times the font size, which is what the templates employ.
    • Tip: Don't forget to increase your line height on mobile devices if you change your font size.
  • Alignment
    • Left align all text (including headings), rather than centering or justifying (text that falls on the right and left margins), so it's easier for those with dyslexia and screen readers to read text
  • HTML: <tr> <td class="m-17-27" align="left" valign="top" style="font-family: Arial, sans-serif; font-size: 17px; line-height: 27px; color: #333333;"> <p> This is a paragraph </p> </td> </tr>

Calls To Action

These steps will make sure your call to actions are clear for everyone with disabilities or assistive technology.

  • All button widths and heights should be at least 44 pixels on desktop and mobile. The CTAs on the templates have a height of 50 pixels and width of 200 pixels.
  • Avoid including "Click here" in your CTA text. (e.g. use "More information instead of "Click here for more information")
  • In situations where your button or linked text does not adequately describe where a recipient would be directed, use an aria-label attribute to  help screen reader users decide if they want to click or not.  (e.g. For a "Read more" or "More information" CTA,  be more descriptive in your aria-label)
  • HTML: <table width="200" cellpadding="0" cellspacing="0" style="border-spacing:0;width:200px;min-width:200px;"> <tr>  <td class="bg-rollover" height="50" style="background-color: #bb0000; height: 50px;" align="center"> <a href="https://www.osu.edu/together-as-buckeyes/stories/aaron-westbrook.html" target="_blank" aria-label="Read more about Buckeye, Aaron Westbrook and Form5 Prosthetics" style="text-align: center; text-decoration: none;" xt="SPCLICK" <span style="color: #ffffff; font-size: 17px; font-family: Arial, sans-serif; text-decoration: none;"><strong style="font-weight:inherit;">READ MORE</strong></span></a> </td> </tr>  </table> 
    • ARIA (Accessible Rich Internet Application) labels add context for buttons that don’t provide context.
      • Note: In SFMC the ARIA label is the link properties "Title" entry

Resources

Check out these resources to help make your emails more accessible:

Have questions? Send a note to emailmarketing@osu.edu.