Guidelines: Email Accessibility
Image-Only Emails:
Emails can look boring sometimes, so creating a fancy image to make your message look as good as possible is tempting.
Unfortunately, there are a few problems with this idea:
-
Images may be blocked: Some email programs allow users to block all images, or the email program may have an algorithm that blocks image-only emails because those kinds of emails appear to be spam.
-
Users can't change the contrast: Users with low-contrast vision may have a hard time reading the text in the image if they can't customize the contrast.
-
Users can't switch to dark mode: Images will not respond to dark mode settings, which could be irritating to users whose eyes are sensitive to light.
-
Zoomed text may be pixelated: If a user with low vision needs to zoom in, the text in a graphic will not be as clear as real text.
-
Alt text may be insufficient: Writing alt text for an entire graphic full of lots of text and various kinds of imagery can be awkward. There is also no semantic structure to alt text. There is no way to embed a bulleted list or headings into alt text, for example.
More Details:
Let's look at more details on image-only email accessibility in this PowerPoint: Why You Shouldn't Send Image-Only Emails.
Types of Images:
Images can add a lot of meaning to the content of an email, but they can also introduce accessibility barriers if the information, purpose, or mood that the image conveys is not communicated by assistive technology.
From an accessibility perspective, there are 4 main types of images:
-
Informational images: Images that communicate information such as a photograph of a location showing important landmarks.
-
Active images: Images that signal an action to be taken such as an icon button.
-
Decorative images: Images that convey tone or mood or provide some other decorative purpose.
-
Complex images: Images that require a more in-depth explanation such as an infographic or graph.
Informational, active, and complex images must be described for assistive technology users using ALT text. For decorative images, there may be some cases where the image does not convey any meaning within the content. Outlook does not have the option to "mark as decorative". The best practice in this situation would be to delete the automatically generated ALT text and leave the image ALT text blank.
Alternative (ALT) Text:
Alternative text, or ALT text, is an attribute we can add to images to supply a meaningful description for assistive technology. Additionally, if an image fails to load, the ALT text will be displayed as text.
It is important to convey the purpose of the image and any information it contains. Avoid using redundant or implied words. For example, "image of a girl on a swing in the park" should just be "a girl on a swing in the park" since the words "image of" are implied.
Examples:
Good: The text says, "A gray and white dolphin swimming backward with its body sticking out of the water."
Bad: The automatic ALT text says, "A couple of dolphins jumping out of the water," but the image actually shows only one dolphin, and it is not jumping.
Automatically Generated ALT Text:
In an attempt to improve image accessibility, Microsoft added logic that automatically provides ALT text for images. This technology can be helpful when the content author neglects to add ALT text, but automatic ALT text is often insufficient or inaccurate. Even if the description is technically accurate, it may not convey the author's intent or purpose for including the image. Always review any automatically generated ALT text and edit it as appropriate.
Pro Tip:
When in doubt, type the message into the body of your email to describe your image. Screen readers will read the text that is typed out into the body of the email, but NOT in the image itself. It is important to do one or the other; type the text into the body of the email OR add the ALT Text to the image.
Logos:
Avoid using logos in email signatures to ensure accessibility for all recipients. Logos can pose challenges for individuals with visual impairments or those using screen readers, as these users rely on text-based content to understand the message. Instead, prioritize clear and descriptive text that conveys the essential information without relying on visual elements. This approach enhances the overall accessibility of your emails, making them more inclusive and user-friendly for a diverse audience.
Bad Example of Logos:
In this example, the logos in the email signature were blocked and only showed an icon of a broken image, not the actual logo image itself.
For more information on Alt Text, check out the One Stop article: Core Topic: Alt Text
Videos:
For security reasons, Outlook does not currently support embedded videos in emails, meaning you cannot play video directly in the email client. A common workaround is to embed a screenshot of the video player as a link to the video on YouTube or Stream. When doing this ensure that the image has sufficient alternative text and descriptive link text.
Example:
Descriptive Link: Click the screenshot image to be directed to Bill and Ted's YouTube trailer.
Alt Text: Bill and Ted in the screenshot of the video and various player controls. There is text that says "Bill & Ted's Excellent Adventure Official Trailer #1 - Keanu Reeves Movie (1989) HD."
Videos should come with robust captions to support people who are deaf or hard of hearing. Additionally, people with cognitive disabilities or who are not fluent in the language of the video may benefit from being able to read the text as they watch a video.
Many video players now have automatically generated captions, but these are typically much lower in quality than manual captions that were written by a person. This is because there can be transcription errors with the speech-recognition software and because captions should include additional information like background sounds, voice inflections, and music that affects the mood of the content. Whenever possible, try to source videos with high-quality manually generated captions.
GIFs:
A GIF (Graphics Interchange Format) is an image, often animated, or a short, animated video that is often used to add humor or personality to communications. An important accessibility concern with embedding an animated GIF is that the GIF will automatically play in a loop. This can cause trigger sickness for people with vestibular conditions, it can also lead to distraction for people with focus-related cognitive disabilities such as ADHD.
Unfortunately, reduced motion settings on the system will not prevent the GIF from auto-playing on Mac, though the motion will not animate on a Windows machine. For this reason, linking to the GIF would be preferred, possibly with the use of a screenshot of the GIF including clear link text and alternative text for the image. When selecting a GIF to use, ensure that there is no flashing content.
Flashing Content:
Flashing content or strobe-like effects in videos can trigger photo-epileptic seizures which are very dangerous. Although videos cannot be embedded in Outlook emails directly, external video and GIF links need to be reviewed for this type of harmful content. Ensure that embedded GIFs have no flashing content.
Attached Documents in Outlook:
When uploading documents as attachments to an email, people must understand what the document is so that they can determine if they would like to download or open the attachment. Give document files clear and purposeful names that will be easy to understand.
Check that the file extension (e.g., jpeg, pdf, etc.) has been included so that people know what type of document they are going to engage with.
For additional information, contact:
Debbie Dramstad
Web Accessibility and Application Specialist
debra.dramstad@vcsu.edu
VCSU Resources:
Why You Shouldn't Send Image-Only Emails
Core Topic: Alt Text