Email Accessibility

When creating HTML email, begin by following the guidelines for Content Creators. Below are some additional guidelines and best practices.

Images

• Avoid images of text
  • Do not use images of flyers or invitations as the body of your message. Instead, all meaningful text should be available as text in the body of the email.
  • Large images might not scale properly to various screen sizes. As an alternative, use smaller images sprinkled throughout (headshot, event logo, etc.). Remember to include alt text for all images.
  • Screen reader software varies but will usually only read a limited number of characters of alt text (125 characters or so).
• Avoid animated images that strobe, blink or flicker (must not flash more than three times in any one second period).
• Consider what images will look like in dark mode.

Media

• Avoid autoplaying motion or audio media
• Provide easy access to controls to pause, stop, etc.
• Offer human-corrected alternative formats (captions, transcripts, audio description)

Tables

• Avoid using tables, unless needed for tabular data
  • Include a semantically marked header row or column
  • Avoid fixed-width tables
  • Keep it simple: avoid split cells, merged cells, or nested tables
• In some bulk email platforms, columnar formatting is achieved by using a table. If you have to use it for formatting, add role="presentation" to the table (if possible in your mail platform) so that people using screen readers can navigate it appropriately.

Fixed-width email

• Emails must be responsive to various screen sizes. They should not require a specific orientation (landscape vs. portrait).
• Users shouldn’t have to scroll horizontally to see any part of your message.
• Users must be able to Zoom to 400% without loss of information or functionality.
• Don’t put a border around your email message if it forces a fixed-width view.

Accessibility in Outlook

• Use built-in styles for headers, tables, and lists
• Check accessibility
  • Options (or Message) > Check Accessibility (There are some limitations to the Outlook checker, including not showing exactly where color issues are)
  • Use additional free color checking tools if needed
• Request accessible email
  • General > Accessibility > Ask senders to send content that’s accessible
  • When others are composing email, Outlook will let them know your preference and will offer the Accessibility Checker button.

Test accessibility

• Send yourself a test message and open it
• View it using various screen sizes
• View it in dark mode
• Inspect HTML by right-clicking in the body of your email
• Use a screen reader if you know how to do that
  • Note: Immersive Reader in Outlook doesn’t function like other screen readers (alt text doesn’t always read, link text is sometimes skipped, etc.), so don’t rely on it for testing.