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:
You might also be looking for:
- 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.
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."
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.
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.
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.
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.
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.
Select content and text colors that are high contrast and are used with accessibility in mind.
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).
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.
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:
Abide by CAN-SPAM rulesEmail 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.