HTML email accessibility and usability

How to create accessible and usable HTML email newsletters, including making content readable on any device (ie. desktop or mobile device) using any software (i.e. screen reader, browser, braille display, etc) with colors that are high contrast.


On this page:

Font size
Use plain language
Alt text
Flashing images, gifs or animations
Video
Tables
CSS inline
Semantic HTML tags and link text
Selecting colors
Other considerations

You might also be looking for:

Plain text email accessibility and usability
Creating accessible audio and video content
Creating engaging email content


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="Chancellor Blank in front of Bascom Hall",  not alt="Picture of Chancellor Blank."

Chancellor Rebecca Blank in front of Bascom Hall.

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, e.g., <img src="decoration.png" aria-hidden="true" ...>.
  • Add alt text to provide context for the image.
Learn more about adding alternative text to images in HTML.

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 that 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 allows screen reader users to 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 appropritaely, for example, <table role=“table”>. Wherever possible, link to 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.


Use semantic HTML tags and link text 

Use correctly nested heading tags for your sections labels and headlines. Individual articles or excerpts should be wrapped in <p> tags. 

Using headings to organize content

Your masthead (also called hero area or banner) should be an Heading 1 <h1>, that is your newsletter title. If the masthead of your newsletter is an image, wrap it in an h1 tag and use suitable alt text. All new sections start with an <h2> tag that (if necessary) include <h3> and <h4> subsections of content. How to structure accessible headings

Numbered and bulleted lists (Ordered and Unordered lists)

To break up content into scannable chunks make sure your list text is wrapped in numbered (ordered or <ol>) or a bulleted (unordered or <ul>) list tags. How to create bulleted or numbered lists for accessibility.

Use descriptive link text

People who are blind or have low vision often navigate with screen readers by going from link to link. Providing users with descriptive link text is vital, because it tells them what is being clicked on, and where it will take them. Don’t use generic link text like “click here” or “read more.” Understand descriptive link text.


Selecting colors

Select content and text colors that are high contrast and are used with accessibility in mind. 

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, in an email written in English, the tag and attribute would read:

<html 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 

Smashing Magazine, a user experience design trusted resource, provides guidance. 






Keywords:email, email communication, email newsletter, usability, accessibility, communication   Doc ID:99409
Owner:Sandi A.Group:Accessibility & Usability
Created:2020-03-24 16:08 CDTUpdated:2020-03-31 14:00 CDT
Sites:Accessibility & Usability
Feedback:  0   0