Email Newsletter Accessibility Standards

Newsletter readers might not be able to access images in your newsletter because they’re blind or low vision, have images turned off to save bandwidth, or simply have their email client set up that way. Use Emma’s alt-text feature to add 1-2 concise, active voice sentences to explain the main action in any meaningful image. 

A meaningful image is one that adds context to an article or is necessary for understanding the content of the article. An event photo included with an article recapping the event is an example of a meaningful image. A decorative image is something that just adds flair to your page, like a horizontal divider. Emma automatically marks decorative images as decorative, so you just need to focus on the meaningful images.

What are some best practices for alt-text?

• Remember that your department wordmark is a meaningful image. Describe it in alt-text as “Logo for [Department Name]”.
• Don’t begin your alt-text with “Image of” because all screen reading software begins every alt-text announcement with “Image of”.
• Focus on the main content of the image. If your image contains a man lying asleep on a rug in a cozy living room with a polar bear standing over him, don’t describe the wallpaper. Focus on the man and the polar bear.
• Feel free to describe colors with vivid word choices. Many people who are low vision or blind acquired their vision disabilities, which means that they remember (and appreciate) vivid color descriptions. This can mean instead of describing something as “green”, you could describe it as “Kelly green”, “forest green”, “lime”, “chartreuse”, “olive” or other descriptors.
• If your image includes a photo credit or needs to be accompanied by licensing terms (such as for Creative Commons), those details should go in the image caption, not the alt-text.

Pro-tip: Don’t include images of text in your email newsletter, even if you have the text all listed as selectable text elsewhere in the newsletter.

Text, headings, and links need to have a good strong contrast ratio against their background in order to be readable for people with a variety of vision conditions. What’s a “strong contrast ratio”?

• For text that’s smaller than 18-points, it’s 4.5:1. 
• For text that’s at least 18 points or larger OR 14 points AND bold, it’s 3:1.

How do you measure the contrast ratio?

OAS strongly recommends using the TPGi Colour Contrast Analyser. This is a free, industry-standard desktop tool available for both the Mac and Windows platforms. 

To measure contrast, open up the Colour Contrast Analyser and take a sample of your text using the eyedropper icon in the “Foreground colour” bar. Then take a sample of the background color using the eyedropper icon in the “Background colour bar”. The Colour Contrast Analyser will automatically calculate your contrast ratio.

The Colour Contrast Analyser in Action

Meeting color contrast guidelines

Failing color contrast guidelines

Pro Tips

1. If you are working with the colors in the UVM color palette, feel free to use this reference sheet (.pdf) as a quick way to make sure your colors all have strong enough color contrast.
2. Make sure not to use color as the only way to distinguish between different items. For instance, “Click the orange button to register for the course, and click the green button to email us” doesn’t make any sense to people who don’t have access to those colors.
3. Section 508 accessibility guidelines prohibit using a patterned wallpaper, or watermark in a newsletter.

If you insert a list of related items in your newsletter, make sure to use Emma’s list tool to create either bullets or numbers for all of the items on your list.

Here is a bulleted list of related items set up using a list tool:

• Apples
• Bananas
• Pears
• Starfruit
• Coconut

A screen reader will announce this properly laid out list as: “List: item: apple, item: bananas, item: pears, item: starfruit, item: coconut. End list.”

And here’s a bulleted list of related items set up without using a list tool:

*Apples

*Bananas

*Pears

*Starfruit

*Coconut

A screen reader will not announce these items as a related list. (Test this for yourself, using Jaws, NVDA, Orca, or VoiceOver.)

Emma allows you to embed videos in your newsletters, as well as linking out to them if they’re on YouTube, Vimeo, Streaming UVM, or another video hosting platform. 

When you include video content in either of these ways, make sure if your video has spoken dialogue, it also has fully accurate closed captions. 

• Closed captions are captions you can turn on or off. Closed captions are accessible when they are 100% fully accurate.
• Open captions are ones that are burned right into the video; you can’t get rid of them. Open captions are not accessible.

If your video has no spoken dialogue (such as a highlight reel), it needs audio description. Audio description is an optional audio track where a narrator describes the action taking place in the video for people who are blind or low vision.

An example of audio description

The Office of Accessibility Services provides free fully accurate captions and audio description tracks to all UVM departments, staff, faculty, and students. You do not need to have a disability in order to request this service. You can request captions and audio description services online.

Headings help people who are navigating using a screen reader, or via a keyboard (with no mouse), or other assistive technology. They let assistive technology users skim the different sections and move quickly from one section to the next. 

The templates in Emma have been set up with the headings already done for you. Feel free to leave the headings to their default settings in the template. If you must make changes to them, make sure that:

• You always have one and only one H1 in your newsletter.
• All headings are nested. This means that H3 comes after H2, which comes after H1. Headings should also not skip levels. That means you shouldn’t put an H4 heading right after an H3 heading.

When you think of "nesting" headings, picture matryoshka dolls, wooden nesting doll toys where each doll is uniformly smaller than the next, so that they can be put away in one order only: each doll fits precisely inside the next larger doll.