Create Accessible Email Announcements

Summary

Design accessible event announcements using these guidelines.

Body

Email announcements help us spread the word to the ECU community on all sorts of important topics: department events and seminars, office openings and closings, HR-related information and much more.

By designing email announcements in multiple formats and using the accessibility guides explained below, you allow those of your audience using screen readers and keyboard-only access to read your message.

The information on this page outlines best practices for sending an email announcement to the ECU community.

Create your Message in Multiple Formats

Often, you will have an image-based flyer for your event announcement. As a best practice, when you email the campus community, send the event details – the who, what, when and where – as the text-only body of your email and attach the Word, PDF, JPG or other graphic version of your announcement to the email. This will help you reach the widest audience.

Make sure that the original text version of your message follows the guidelines in the Design Accessible Email section.

Example 1

Important details should be in the body of the email with the image version attached. Body text should be properly styled using headings.

Join us for a presentation
Who: Lorem ipsum dolor sit amet
What: saepe cetero et pri. Mei ei ulllum
When: Ex cum simul alienum
Where: integre efficiantur

This JPG flyer can be an attachment

 

Design Accessible Email

To meet basic accessibility requirements, an email message must:

  • Maintain readability through a logical reading order and sans serif fonts
  • Structure content using headings
  • Include sufficient color contrast between text and background
  • Provide text alternatives for images
  • Feature meaningful link text
  • Use a descriptive subject line

Maintain readability through a logical reading order and sans serif fonts

Email messages and templates are commonly formatted in tables as this is the most reliable way to create layouts that work across desktop, web mail and mobile email clients. Screen readers read row by row from left to right (beginning from the top) and then down to the next row.

Example 2

Image 1 illustrates the reading order if content is arranged in a table of two columns and two rows. As shown, reading begins top left, continues to the end of the row and then moves down to the next row, from left to right, and so on to the end of the table.

This could be confusing if the content flow does not follow the left to right path.

Illustration: confusing reading order

To preserve logical reading order, a better layout is a table of two columns in one row, as shown in Image 2. The screen reader begins reading from the top left and then moves to the next column on the right.

Illustration: logical reading order left to right

This requirement is particularly important to keep in mind when creating responsive email layouts, especially where images and content are repositioned to allow for a comfortable reading experience on mobile devices.

Maintaining a single-column layout on all screens – regardless of size – reduces the likelihood of content being read by screen readers in either an incorrect order, or in a way that the context of the content is unclear.

Sans serif fonts, like Arial or Verdana, also maintain readability for sighted users as they are easier to scan.

Structure content using headings

Rather than using bold fonts in a larger size to denote a title, use the built-in styles in Microsoft Outlook to format titles as headings. Headings structure your content into logical sections: heading 1 is the title, with subsections under heading 2 and so on to create a hierarchy. Assistive devices allow readers to tab through properly-styled headings, saving time. Otherwise, readers are stuck listening to every word every time they access your message.

Example 3

To make a title into a heading, highlight the text and from the Format Text tab, click the appropriate heading style.
highlight the title and click a heading style

Provide sufficient contrast between text and background colors

People with moderately low-vision or color deficiencies can be less sensitive to luminosity or color contrasts when viewing text and images in an email message. Therefore, it’s important to incorporate sufficient contrast between text and the background of an email message as well as non-color-based cues to convey the meaning of your message.

Example 4

The example on the left shows an image with an ECU purple background with lighter, purple text. This message is hard to read. However, the image on the right shows a white background with ECU purple text and is easily read by most users.

Purple background and purple text does not have enough contrast   Dark text on a white background provides sufficient contrast

Apps like Color Oracle for Mac, Windows and Linux simulates how a color-blind reader perceives your message and images. Another tool called the Color Contrast Analyzer also checks for this issue and comes in both a Windows and OS X version.

Color Oracle screen shot

 

Provide text alternatives for images

All informative images must have an appropriate text alternative that conveys the meaning, or purpose, of the image. For example, a company logo is an informative image and should feature a text alternative or description. Decorative images — such as ‘spacer’ images for preserving layouts — should carry an empty or null alt attribute (alt=””) to inform screen readers that the image should be ignored.

Feature meaningful link text

It’s also important to convey the purpose of links using link text. This text informs the reader what will display when the link is followed and is often used for document navigation purposes by screen reading devices. Avoid the use of generic text such as click here or read more, as these offer little meaning, especially when read out of context by a screen reader. Instead, link text can be part of the content. For example, link text such as, read our recommendations for better links, informs the reader of where the link will go.

Use a descriptive subject line

The subject line of an email should be concise, meaningful and descriptive without repeating the sender name. People with vision impairments rely on subject lines to determine whether an email message is relevant to their needs.

Checklist: Is your email accessible?

Use the following checklist based on W3C Web Content Accessibility Guidelines to make sure your email is accessible prior to sending to campus.

Checklist Item Yes No
Sufficient color contrast between text and background    
Tables are optimized to preserve logical reading order    
Images have captions or alt descriptions    
Headings are used to structure content hierarchy    
Link text describes the link destination    
Image text is repeated in the email text    
Email content can be zoomed using keyboard shortcut

  • Alt key and "+" key for PC

  • Command key and "+" key for Mac


  •  
   
Reading order is logical    
Subject line is concise and descriptive    

Details

Details

Article ID: 67436
Created
Wed 11/13/19 3:42 PM
Modified
Thu 11/7/24 9:59 AM
Service Owner
Learning Technologies