Email Campaign Accessibility Checklist
General Guidelines
Layout and Structure
- The email layout is clean, simple, and easy to navigate with clear sections.
- There are no complex tables or multi-column designs that may confuse screen readers.
- The content flows logically from top to bottom and left to right. The reading order of the content should match the visual layout.
- Keyboard focus is visible when tabbing through the email.
Content
- Colors or sensory characteristics are not used alone to convey meaning.
- User interface components have a contrast ratio of at least 3:1 against adjacent color(s).
- User interface components do not contain anything that flashes or blinks more than three times in any one-second period — strobe effects should never be used.
- User interface components with labels that include text or images of text have a name that contains the text that is presented visually.
Links
- Links and buttons are keyboard-navigable and easily clickable on mobile.
- Buttons are at least 44x44 pixels for easy tapping.
Semantics
- Semantic HTML elements are used (e.g., <header>, <nav>, <main>, <article>, <footer>) to help screen readers interpret content correctly.
- Appropriate HTML tags are used (like <table> for tabular data and <p> for paragraphs) instead of generic <div> or <span> tags.
- ARIA attributes (Accessible Rich Internet Applications) are used to enhance accessibility, such as role="banner", role="navigation", or role="button" where necessary.
Actionable Email Accessibility Guidance for Content Creators
1. Images and Alternative Text (Alt Text)
| Action |
Requirement |
Why It Matters |
| Write Descriptive Alt Text |
Every image must have an alt attribute. The text should clearly describe the image's purpose or content. |
Screen readers announce this text when images are blocked or for users who cannot see the image. |
| Use Null Alt Text for Decoration |
If an image is purely decorative (e.g., a spacer, a simple border, or a background pattern), use a null alt attribute (alt=""). |
This prevents screen readers from announcing unnecessary information, improving the user experience. |
| Avoid Text in Images |
Do not embed critical information, calls-to-action (CTAs), or body text within an image file. |
If the image fails to load, the user loses the content. Live text is scalable and readable by screen readers. |
2. Text and Color Contrast
| Action |
Requirement |
Why It Matters |
| Ensure High Contrast |
All standard body text must meet a minimum contrast ratio of 4.5:1 against its background. Large text (18pt or 14pt bold) must meet 3:1. |
Users with low vision or color blindness need sufficient contrast to read the content clearly. |
| Use Live Text |
All primary content must be rendered as live HTML text, not text embedded within an image. |
Live text can be resized, reflowed, and read by assistive technologies. |
| Do Not Rely on Color Alone |
If you use color to convey meaning (e.g., "required fields are marked in red"), you must provide a secondary, non-color indicator (e.g., an asterisk or text description). |
Users who are colorblind or using high-contrast modes will miss the meaning if it relies only on color. |
3. Structure and Navigation
| Action |
Requirement |
Why It Matters |
| Use Proper Heading Structure |
Use <h1> for the main title of the email and subsequent headings (<h2>, <h3>, etc.) to organize content logically. Do not skip heading levels. |
Headings provide a navigable outline for screen reader users, allowing them to quickly jump to relevant sections. |
| Define the Email Language |
Ensure the email code includes the lang attribute (e.g., <html lang="en">). |
This tells the screen reader which language to use for pronunciation and reading rules. |
| Manage Layout Tables |
Since many email clients require tables for layout, ensure these tables are marked with role="presentation" or role="none". |
This tells the screen reader to ignore the table structure and read the content in the correct, linear order, preventing confusion. |
4. Links and Calls-to-Action (CTAs)
| Action |
Requirement |
Why It Matters |
| Write Descriptive Link Text |
Link text must clearly describe the destination or purpose of the link, even when read out of context. Avoid generic phrases like "Click Here" or "Read More." |
Screen reader users often navigate by jumping between links. Descriptive text (e.g., "Download the 2025 Accessibility Report") is essential. |
| Ensure Button Size |
All interactive elements (buttons, links) should be large enough to be easily tapped on mobile devices, ideally 44x44 pixels. |
This supports users with motor disabilities and improves usability for all mobile users. |
5. Pre-Send Checklist
| Action |
Requirement |
Why It Matters |
| Clear Subject Line and Preheader |
The subject line must be descriptive. The preheader text should provide a concise summary or continuation of the subject line. |
This is the first impression and helps users decide if the content is relevant before opening the email. |
| Test with Accessibility Tools |
Before sending, test the email in a tool that simulates screen reader output or checks for common accessibility errors (e.g., Litmus, Email on Acid, or browser-based checkers). |
Automated checks catch most technical errors, ensuring compliance before deployment. |