Accessible email

Basics

• Ensure table layouts are accessible.
• Make text legible.
• Write purposeful link text, and underline links.
• Sufficient contrast
• Use built-in styling (WYSIWYG) toolbars.
• Caption video.
• Supply meaningful, equivalent text alternatives for all images.
  • How to Add ALT Tags in Outlook
• Avoid animations that play automatically.
• In Salesforce Marketing Cloud, use the provided email templates.

In depth

Federal and state law, in addition to university policy, require that ASU’s programs and services be available to persons with disabilities. Emails that provide information about ASU to students, their families and ASU employees must be accessible. Beyond the legal requirement of accessibility, good accessibility practices simply improve usability for all of our audiences.

Follow these best practices in your email designs to ensure an accessible experience for all users:

1. Ensure table layouts are accessible.

Tables are still the only reliable layout method for email, but they can be made accessible by adding role="presentation" to the <table> element and ensuring that content makes sense when read linearly. See more on accessible tables.

2. Make text legible.

• Avoid centered paragraphs. Left-aligned paragraphs are easier to read for some people. Avoiding larger center-aligned content will improve readability.
• Avoid font sizes smaller than 14 pixels and allow for adequate line-height and paragraph space to improve legibility. Also, ensure that the email or document can be resized to 200% with no loss of legibility or functionality. See more on accessible typography.

3. Write purposeful link text, and underline links.

• Underlining links helps users detect linked text. In general, it is a good practice to avoid using sensory cues only to convey important information.
• Make sure the link text is clear and tells users what they're clicking on--for instance, instead of “Click here,” use “Register for the webinar.” See more on accessible links.

4. Sufficient contrast

For people with color blindness, low vision, or compromised vision due to temporary environmental factors (such as stepping out into bright sunshine), high-color contrast makes text significantly more legible. Make sure any text or images have at least these visual color contrast ratios:

• Between text and background: 4.5:1
• Between link and non-link text: 3:1

Use a color contrast tool like WebAIM Color Checker to test the contrast between text and background colors. See more on accessible color contrast and the ASU color palette.

5. Use built-in styling (WYSIWYG) toolbars.

Use your email program's built-in styling toolbar to format lists, headings, and other elements. These add hidden markup that tells screenreaders what these elements are. See more on accessible code.

6. Caption video.

Ensure all videos are captioned. See more on captioning video.

7. Supply meaningful, equivalent text alternatives for all images.

ALT tags are important, and many people depend on them to describe non-text content. For example, screen readers and other assistive technologies can't analyze or read images. In addition, some users with cognitive impairments find text easier to interpret than images, and users with low vision often turn off images and instead depend on alternate text, which scales better than images.

• All images must have an ALT tag.
• If an image is decorative (i.e., doesn't contribute any meaningful information), the alt tag should be empty.
• For meaningful images, supply ALT text that briefly (less than 125 characters) describes the content and function of the image, while taking the context into account.

  Inequivalent content	Equivalent content
  Seat belts are comprised of a buckle and a tongue. ALT tag: "Seat belt"	Seat belts are comprised of a buckle and a tongue. ALT tag: "Insert the seat belt tongue into the buckle"

   

  Inequivalent content	Equivalent content
  ALT tag: ASU football fans.	ALT tag: Football stands filled with ASU students, yelling and giving the Fork-em-Devils hand sign.

   

• If you have a lot of graphic text, you can copy the text to an accessible Word doc and link to it at the top of the email (e.g., "For an accessible version of the email, download the Word file.")

How to add ALT tags in Outlook

In Outlook, after uploading the image into your email message, right-click on the image and choose "Add alternate text."

• For decorative images, add a single space.
• For meaningful images, add a description.

NOTE: Gmail does not currently provide the ability to add ALT text on images.

For more on how to write alternative text, see Images: ALT text.

8. Avoid animations that play automatically.

Imagery, such as animated gifs with flashing patterns and other visual stimuli, can be harmful to some people. This can potentially cause seizures and other health problems. Read more on animated images.

9. In Salesforce Marketing Cloud, use the provided email templates.

In Salesforce Marketing Cloud, use the shared university-wide template to get started creating emails. See the Brand Guide to access the Marketing Cloud email template.

Relevant W3C WAI documents

• WCAG 2.1 Guideline 1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.
• How to Meet WCAG 2.1 Guideline 1.1.1

• WCAG 2.1 Guideline 1.2.2 Captions (Prerecorded): Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.
• How to Meet WCAG 2.1 Guideline

• WCAG 2.1 Guideline 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1.
• How to Meet WCAG 2.1 Guideline 1.4.3

• WCAG 2.1 Guideline 1.4.4 Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.
• How to Meet WCAG 2.1 Guideline 1.4.4

• WCAG 2.1 Guideline 1.4.8 Visual Presentation: For the visual presentation of blocks of text, a mechanism is available to achieve the following:
  • Foreground and background colors can be selected by the user.
  • Width is no more than 80 characters or glyphs (40 if CJK).
  • Text is not justified (aligned to both the left and the right margins).
  • Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.
  • Text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window.
• How to Meet WCAG 2.1 Guideline 1.4.8

• WCAG 2.1 Guideline 2.4.4 Link Purpose (In Context): The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
• How to Meet WCAG 2.1 Guideline 2.4.4

• WCAG 2.1 Guideline 2.4.6 Headings and Labels: Headings and labels describe topic or purpose.
• How to Meet WCAG 2.1 Guideline 2.4.6