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
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.
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.
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.
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.
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.
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 |
|
|