Back to Blog

It’s Not Just Your Website: How Email Must Be Accessibility-Compliant

White envelope with a green ribbon that has an accessibility icon in the middle

Summary: A simple email can present many reading challenges to some recipients. Here’s a guide to making emails useful for everyone. This article will cover making links accessible, including correct alt-text, and more.

True digital accessibility requires ALL digital content to be accessible. This includes web pages, mobile devices, pdfs, videos, PowerPoint presentations, Word documents, Excel sheets, email, and more! All HTML guidelines apply to emails in that format. 

When we create content, including emails sent internally as well as to clients and potential clients, we have a responsibility to ensure that content is accessible. 

View-In-Browser Link

For content that cannot be adequately made accessible in email form, a view-in-browser link can be used as an alternative, provided the link directs to an accessible alternative for all of the email’s content.

Two sets of the letters A where one is small and one is large

Font Size

The widely accepted minimum font size for email text is 14-point. There is variation in size with different font families, so even larger-point text may be needed with some fonts. It is important to choose a font that is easy to read.

In Outlook, the default font can be changed by choosing Preferences and selecting Font in the Preferences modal dialog. This will open another modal dialog where you can choose fonts for different types of mail (new mail, replies, etc.),and then you can set the font preferences in the next modal dialog.

Two cards with one that say Good Contrast and one that says Not Good Contrast

Contrast 

A contrast ratio of at least 4.5:1 is required for most text in email communications. AudioEye's Color Contrast Checker can be used to determine whether colors meet this requirement. However, since email can be viewed in light mode or dark mode, it is recommended that custom colors not be used unless absolutely necessary. Using the Automatic color setting will automatically update the colors for viewing in either light or dark mode.

Alternative Text 

Images in email communications must contain alternative (alt) text. Adhere to the following guidelines for alt text: 

  1. All images should contain the alternative-text attribute. 
  2. If the image is for purely decorative purposes, a null alt (alt=””) should be provided. 
  3. If the image is linked, the alternative text should inform the user of the link destination.
  4. If the purpose of the image is to indicate a control, the alt text should indicate what the control does (for example, appropriate alt text for a search button would be “search,” not “magnifying glass”).
  5. If there is text present in the image, that text should appear in the alt attribute.
  6. An image’s alt attribute should contain a clear textual representation of the non-text content.
  7. Alt text should be descriptive yet brief — we recommend that it not exceed 100 characters (excluding spaces).
  8. If the information conveyed within these images is important, we recommend removing the image and providing HTML text.
  9. Complex graphics and other images that cannot be adequately described in 100 characters or fewer should either be built with HTML5 markup or include alt text directing the user to a longer textual description displayed on the page or on a linked page. 

Links

Links included in emails should have proper context so recipients know where the links will direct them. Links with text like “Click Here” and “Learn More” are not appropriate. One thing NOT to do is set title attributes on links — this will cause a redundant announcement for some assistive-technology users. 

Illustration of a video thumbnail with small labels that read Captioning, Transcription, and Audio Description

Video Content 

Just like on web pages, video content must meet captioning, transcription, and audio description standards. 

Language Attribute 

HTML email should always have a language attribute to set the language. This ensures that screen readers pronounce words properly for the language used. This should go in the head of the email, such as lang=”en-us” for U.S. English. A list of HTML language codes can be found at W3Schools.

Title

For bulk emails especially, set a title (<title>) in the head of the email. This adds additional context for screen reader users.

Tables

Content presented in tables has specific semantics that are relayed to screen reader users. Do not use a table for layout purposes. Tables should be used only as intended: to display tabular data and information. 

Accessibility Checker

Outlook has an accessibility checker. To use this feature, activate the Edit menu and then select Check Accessibility. A side panel will open showing the results of an accessibility check. 
 
Remember: Automated tests cannot detect all accessibility concerns!

Share this post