HTML email accessibility and usability

Last updated January 8, 2021

Learn how to create accessible and usable HTML email newsletters, including making content readable on any device using any software.

Font size = 16 pixels or larger

Use font sizes that are at least 16 pixels so they can be easily on mobile devices. Be sure to code your font-sizes in your CSS using “em” or “rem” relative units of measurement to allow fluid size adjustments by users who are reading your newsletter. How to use relative units of measure in CSS for accessibility.

Use plain language

Your readers should be able to understand your message the first time they read it. It’s respectful of their time and increases comprehension.  Plain language means:

  • Organizing so it’s easy to follow along
  • Leading with the main idea instead of the exceptions
  • Useful headings
  • Avoiding acronyms, jargon, and idioms
  • Action-oriented sentences and verbs so readers are clear about what they should be doing.
  • Being specific and avoiding vague language.
  • How plain language can improve your content.

Alt text for all images and graphics

All decorative elements should be included in your CSS rather than be images that appear in your HTML. Give all images and graphics alternative text using an alt tag of alt=” ” that includes what is visually being shown and it’s relationship to the surrounding content.

Only you can decide if an image is decorative, based on why you included it. If in doubt, view your newsletter without images; if it loses meaning because of the absence of particular images, make sure they have meaningful alt text.

Omit unnecessary words from alt text, e.g., alt="Bascom Hill in Fall with students walking in the grass",  not alt="Picture of Bascom Hill in the Fall with students walking in the grass."

Bascom Hill in fall with students walking in the grass.

Caution: Some text editors strip empty tags and attributes. If you find that your images empty alt tags have been removed from your email markup, first try another editor. If that’s not possible, you can either:

  • Hide the image from screen readers using the aria-hidden attribute.
  • Add alt text to provide context for the image.

Learn more about adding alternative text to images in HTML.

Considerations for videos, tables, and styling

This is an accordion element with a series of buttons that open and close related content panels.

Avoid flashing images, gifs, or animations

They can be distracting and can trigger seizures. If you must use them, keep them small and slow. Small images, like a flashing cursor, for example, are less likely to trigger seizures as are slower flashes, fewer than 3 flashes per second. Also, avoid high-contrast flashes and the color red both of which are more likely to trigger seizures.

Videos should be linked, not embedded

A better idea is use a screenshot from the video, including alt text, and meaningful link text to the video. Placing video in emails can present problems with accessibility, security and affect load time. Make sure the linked videos follow accessibility guidelines for captions, transcriptions and audio descriptions.

Tables

Unless you want a very simple layout of alternating headings and paragraphs, using tables for visual design remains helpful. If you use a layout table, set the role attribute to “presentation.” For example, <table role="presentation">

This lets screen reader users know that the table doesn’t contain data. Learn more about HTML tables and table layout CSS

Data tables are useful providing readers with an alternative to visually complex images like graphs or charts, but make them as simple as possible. Again set the role attribute appropriately, for example, <table role="table">

When linking to web content that includes tables, wherever possible, choose web content that includes effective and accessible tables.

CSS inline style

Including CSS inline ensures the email service will be able to access your CSS content. How to code CSS from W3C or practice styling HTML with inline CSS.

Selecting Colors

Color accessibility

Some readers can’t distinguish between certain colors due to colorblindness or situational reasons. Avoid relying exclusively on color to communicate a message. Always combine color with symbols and text to ensure readability for all users, including those with temporary, permanent, or situational disabilities. Learn more about the appropriate use of color in messaging (Web Content Accessibility Guidelines).

Color contrast

Text color (or foreground color), text size, and background impact how high the color contrast is in your color choices. Use a color contrast testing tool like WebAIM’s contrast checker to ensure your color combinations are high contrast so all users, regardless of ability or disability, can read your content. Use the UW–‍Madison brand colors and guidance to make sure your color choices are accessible and on-brand.

More HTML email considerations

Set the HTML language attribute

You can easily alert screen readers what language newsletter is in, and therefore how to pronounce words correctly, by setting the language attribute in the opening HTML tag to the appropriate language code. For example, an email written in English, would have the HTML tag with this attribute:lang="en"

Consult this list of HTML language codes.

Abide by CAN-SPAM rules

Email marketed outside of the UW–‍Madison must include an unsubscribe option in every email, as well as your company name and address. Setting up CAN-SPAM in the email footer.

Optimize image size

Make your image file sizes as small as possible without losing their visual integrity. This will prevent long email load times.

Avoid using invisible text

This is a common trick that spammers use, and can be a red flag for SPAM filters.

Coding accessible email newsletters

HTML email and accessibility, a 2017 article by Jason Rodriguez.