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."
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 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 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.
Use semantic HTML tags and link text
Use correctly nested heading tags for your section 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 h1 heading level. 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 through h6 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 bulleted (unordered) 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
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.
The Center for User Experience
At the Center for User Experience, we are committed to working with you to make digital spaces more accessible, usable and inclusive for all students, faculty and staff at UW–Madison. We help the university follow its Digital Accessibility Policy by offering free evaluation and consultation services to all UW–Madison community members.
Get in touch
- Meet with us: Book a quick chat with one of our team members to ask any questions you have.
- Start a project with us: We support accessible design and development. Fill out our Let’s Connect form to begin working with us on your project or to request an accessibility evaluation.
- Email us: Not sure if you’re ready to meet? Email us to start talking and figure out what to do next.