Honor diversity and practice inclusion by making your email messages more accessible with these tips.
- Use Text Alternatives
- Use Meaningful Link Text
- Use Sufficient Text Contrast
- Use Left Alignment
- Avoid Harmful Content
1. Use Text Alternatives
If you use images or link to videos in your email messages, be sure to provide text alternatives for them. A text alternative is a textual description or representation of non-text content (e.g., images or video). They help people understand a video or image's purpose or the function it serves by providing the same information in text.
- For images ask yourself, what information will a person miss if she or he cannot see the image?
- Provide text with that information in the body of your message. The text alternative should convey the image's content.
- For video ask yourself, what information will a person miss if she or he cannot:
2. Use Meaningful Link Text
Link text should be descriptive. Describe what's going to happen in the actual link text. It should describe the result of the user action, not describe the user action.
For instance, avoid using "Click Here" or anything else that's very generic such as "follow this link" or "more" or "click to read more" or "here" as no content exists in those links nor a sense of their destination. It's not about what a link does. It's about the resource that the link points to, especially in the context of the referring document. Instead of using "Click Here" to read today's news, use "Today's News" or "Read Today's News" as the link text.
For more information visit the ITSS newsletter article, Improve Accessibility: Think Before You Link.
3. Use Sufficient Text Contrast
Text contrast is the difference in brightness between text and the background of that text. It is important to use sufficient contrast for people with visual disabilities.
What is sufficient? Web Content Accessibility Guidelines (WCAG) Level AA recommends, a contrast ratio of at least 4.5:1 for normal text and 3:1 for larger text. Plenty of tools exist to help you test your color scheme. WebAim's Color Contrast Checker is a good one.
4. Use Left Alignment
For most email clients, simply leave out any alignment declarations. For example, text in Gmail will be justified to the left by default.
People with certain cognitive disabilities and low vision may have difficulties reading justified or centered text. Extra space between words can cause rivers of white making it difficult to track along a line of text.
5. Avoid Harmful Content
Avoid flashing content or including links to videos that may have similar content. Content that flashes at certain rates or in patterns can cause photo-sensitive seizures in some individuals.
If you link to a non-flashing video, make sure it has a mechanism to pause or stop it. Some people with disabilities experience dizziness, nausea, and headaches from animated content.
The following is information from the Web Content Accessibility Guidelines (WCAG). WCAG serves as the University of Minnesota Accessibility Standard.
- Text Alternatives
- For Images
- F30: Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not alternatives (e.g., filenames or placeholder text)
- F65: Failure of Success Criterion 1.1.1 due to omitting the alt attribute or text alternative on img elements, area elements, and input elements of type "image"
- G74: Providing a long description in text near the non-text content, with a reference to the location of the long description in the short description
- G82: Providing a text alternative that identifies the purpose of the non-text content
- G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content
- For Images
- Link Text
- Understanding Success Criterion 1.4.3 Contrast (Minimum)
- Understanding Success Criterion 1.4.6 Contrast (Enhanced)
- Harmful Content
- Understanding Success Criterion 2.2.2: Pause, Stop, Hide
- Understanding Success Criterion 2.3.3 Animation from Interactions
- G19: Ensuring that no component of the content flashes more than three times in any 1-second period
- G186: Using a control in the Web page that stops moving, blinking, or auto-updating content