Email and Event Announcements
In this training we focus on the basic principles of accessible email for the East Carolina University Community. Staff, students and faculty who receive announcements and campus-related email may have disabilities and so the content you send needs to be either fully accessible, or available in multiple formats so that everyone can enjoy receiving announcements about events and campus information.
In this article, our focus is on best practices for designing accessible email for the vision-impaired and those relying on screen reading devices, including synthesized speech and keyboard-only access. Providing information in different formats is the best plan.
Intercampus Email Protocols
When you create an email message for campus distribution, make sure you provide it in multiple formats using the principles of Universal Design for Learning. When including artwork, place all the text within that graphic within the email body, so that everyone will be able to read it. It is best to use standard san serifs fonts like Arial and Veranda with black text on a white background. As long as you keep a text version of the event notice in the email, you can then attach alternative formats as attachments to your email message. Word, PDF, and JPG or other graphic versions of the event flier can help you reach the widest audience, and keep your email in compliance with state and federal laws.
Guide to building accessible html email
First of all, what constitutes an accessible email? To meet basic accessibility requirements, an email message must:
- Maintain a logical reading order
- Use heading elements
- Include sufficient contrast between text and background colors
- Provide text alternatives for images
- Feature meaningful link text
- Use a descriptive subject line
Maintain a logical reading order
Unlike web pages, HTML email messages and templates commonly include tables, as these are the most reliable way to create layouts that work across desktop, webmail and mobile email clients. If not planned and built thoughtfully, people who rely on keyboard-only access might not receive the content in the order intended. Screen readers, for example, read aloud tabular content from left-to-right and from top-to-bottom.
The image below shows the order in which each text paragraph would be read aloud if assembled in a table of two columns and two rows:
To preserve logical reading order, a better layout would be a table of two columns and one row, as shown in the image below:
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 in which the context of the content is unclear.
HTML heading elements – like <h1>, <table> etc. – are critical to ensuring hierarchy is conveyed to screenreader users, who may not be able to see them. Keep in mind that simply styling text to stand out, or look more important is not sufficient when creating a content hierarchy for assistive devices.
Include 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.
Apps like Color Oracle for OSX can be used to simulate a variety of color deficiencies and ensure you are providing enough contrast – not to mention, non-color based cues – for all email recipients to understand your email messages. Another tool called the Color Contrast Analyzer can also help check 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. Purely 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 is decorative and should be ignored.
For example, a company logo is an informative image and should feature a text alternative. In HTML email code, this can be done using the alt HTML attribute, to convey its meaning to screen reader users:
<img src=”https://www. monitorme.com/assets/uploads/logo.png” alt=”Monitor Me Services” />
Feature meaningful link text
It’s also important to convey the purpose of links using link text. This text informs the reader as to what will display when the link is followed and are often used for document navigation purposes by screen reading devices.
As a result, it’s recommended that generic text such as “click here” or “read more” be avoided, as these will offer little meaning, especially when read out of context by a screen reader. Instead, we recommend links in code like:
<a href=”http://…/link-recommendations.html”>read our recommendations for better links<a>.
Use a descriptive subject line
The subject line is the first text people will read, or have read to them by a screen reader. It should be meaningful, descriptive, concise and shouldn’t repeat 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.
|Tables are optimized to preserve logical reading order
||Circle Yes or No
|Heading Elements Used
|Text Color contrast is sufficient
|Images have captions or alt attributes
|Headings are used
|Link text describes adequately where link leads to
|For any graphics fliers or events posters the email text contains all vital information.
|Email content can be zoomed using Keyboard Shortcut (Alt +/- for pc & Command +/- for Mac)
|Reading Order is logical
|Subject line is concise and descriptive