Home / Best Practices / Email

Accessible Email

Basics

  1. Use role="presentation" for table layout.
  2. Write meaningful link text.
  3. Ensure sufficient color contrast.
  4. Use semantic code.
  5. Caption videos.
  6. Make sure text content is legible.
  7. Add alternative text for images, especially graphic text.

In depth

At ASU, all digital content, including email, must be accessible to everyone. How do you ensure that all your recipients can access your message, especially with mass emails? Follow the steps below for more accessible email communications.

  1. Accessible table layouts. 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. Descriptive hyperlinks. Make sure the link text tells users what they're clicking on--instead of “Click here,” use “Register for the webinar.” See more on accessible links.
  3. Color contrast. For people with low vision or who are color blind, effective color contrast can ensure they receive your email message. Use a color contrast tool like WebAIM Color Checker to test the contrast between text and background colors. See more on color contrast.
  4. Use semantic code. Use your email program's built-in styling tools to format lists, headings, and other elements. These add “hidden” markup that tells assistive technology users what these elements are, even when users can’t see them. See more on accessible code.
  5. Video captions. Ensure all videos are captioned. See more on captioning video.
  6. Legible text. Avoid font sizes smaller than 14 pixels, allow for adequate line-height and paragraph space, and left-align text 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.
  7. Alternative text for images. Alternative text should be short but descriptive and highlight the relevance of the image to your message. You can put alternative text in the body of the email, in an image caption, or as ALT text on the image itself. 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.")

    Add ALT Text in Outlook

    In Outlook, after uploading the image into your email message, right-click on the image and choose "Add alternate text."
    New message screen in Outlook, showing the add alt text popup for images

    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.
     

Relevant W3C WAI documents

  • 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