Email is still one of the most effective ways to reach your audience. Whether you are sending a newsletter, a product announcement, a transactional receipt, or a fundraising appeal, email is where your message lands directly in front of the people who matter most.
But here is something most marketers never think about: if your emails are not accessible, a significant portion of your audience cannot read them. People with visual impairments, motor disabilities, cognitive differences, and color blindness all interact with email differently. And unlike your website, where you control every pixel, email clients strip, override, and mangle your code in ways that make accessibility even harder.
In this guide, we will walk through everything you need to know to create accessible emails that every subscriber can read, understand, and act on.
Why Email Accessibility Matters
Email accessibility means designing and coding your emails so that people with disabilities can perceive, understand, and interact with them. Here is why it should be a priority:
- Your audience is more diverse than you think. According to the CDC, 1 in 4 adults in the United States lives with a disability. If you have 10,000 subscribers, roughly 2,500 of them may have some form of disability that affects how they read your emails.
- Accessibility improves engagement for everyone. Clear subject lines, readable fonts, high contrast, and logical structure help every subscriber, not just those with disabilities. Accessible emails get better open rates, click rates, and conversions.
- It is a legal requirement. Under the ADA and Section 508, digital communications including emails may need to meet accessibility standards. Several organizations have faced lawsuits over inaccessible email communications.
- It reflects your brand values. If your website is accessible but your emails are not, you are sending a mixed message. Accessibility should be consistent across every touchpoint.
For a broader look at why accessibility matters across your digital presence, see our guide on the benefits of web accessibility.
Start With the Subject Line and Preheader
Accessibility begins before the email is even opened. The subject line and preheader text (the snippet preview that appears next to the subject line in most email clients) are the first things a subscriber encounters. For screen reader users and anyone scanning their inbox, these elements are critical.
Write Clear, Descriptive Subject Lines
A good subject line tells the reader exactly what the email is about. Avoid vague or clever subject lines that rely on context the reader does not have yet.
Bad: “You will not believe this!” Good: “October 2026 Newsletter: New Accessibility Features and Updates”
Clear subject lines help everyone, but they are especially important for screen reader users who navigate their inbox by listening to subject lines read aloud.
Use the Preheader Text Meaningfully
Preheader text is the short preview snippet that email clients show next to or below the subject line. Many marketers waste this space with generic text like “View in browser” or leave it to auto generate from the first line of the email body.
Instead, use the preheader to summarize the email content or highlight the main call to action. This gives subscribers more context before they open the email.
<div style="display:none; max-height:0; overflow:hidden;">
This month: three new accessibility features, a free WCAG checklist, and an upcoming webinar on accessible design.
</div>
Do Not Use All Caps in Subject Lines
Subject lines in all capital letters are harder to read and can be interpreted as shouting. They are also more difficult for screen readers to process, since some screen readers may spell out acronyms or read all caps text letter by letter.
Use Semantic HTML Structure
Email HTML is notoriously messy. Many email designers use tables for layout, inline styles, and nonsemantic markup. But even within those constraints, you can and should use semantic HTML to make your emails more accessible.
Use Proper Heading Tags
Headings help screen reader users navigate your email content. Use <h1>, <h2>, and <h3> tags to structure your email just as you would a web page. Do not rely on font size and bold text alone to create visual hierarchy.
<h1 style="font-size: 24px; margin: 0 0 16px 0;">October Newsletter</h1>
<h2 style="font-size: 18px; margin: 24px 0 12px 0;">New Accessibility Features</h2>
<p style="margin: 0 0 16px 0;">We have added three new features to help you build more accessible websites.</p>
Use Paragraph Tags for Body Text
Wrap your body text in <p> tags rather than leaving it floating in table cells. Screen readers handle paragraph tags predictably, announcing them as paragraphs and providing natural reading flow.
Use Lists for List Content
If your email contains a list of items, use actual <ul> or <ol> tags. Screen readers announce lists and the number of items, which helps users understand the content structure.
<ul>
<li>New automated scanning for WCAG 2.2 criteria</li>
<li>Improved color contrast detection</li>
<li>Keyboard navigation testing dashboard</li>
</ul>
Some email clients strip list styling, so you may need to add inline CSS to restore bullets and indentation. But the semantic structure is what matters most for accessibility.
Accessible Images in Email
Images are a major part of email design, but they are also one of the biggest sources of accessibility barriers. Here is how to make them work for everyone.
Always Include Alt Text
Every meaningful image in your email should have descriptive alt text. Alt text is read aloud by screen readers in place of the image, giving visually impaired subscribers the same information that sighted subscribers get.
<img src="https://example.com/chart.png" alt="Bar chart showing 45% increase in accessibility scores after implementing Accessible Metrics" width="600" style="display:block; width:100%; max-width:600px;">
For decorative images that do not convey information, use an empty alt attribute: alt="". This tells screen readers to skip the image entirely. Never omit the alt attribute, because some screen readers will then read the image file name, which is not helpful.
Do Not Rely on Images Alone for Important Information
Some email clients block images by default. If your entire email is one big image, subscribers with images disabled will see nothing at all. And screen reader users will hear nothing but the alt text, which can never convey the full detail of a designed email.
Always include a text version of any important information that appears in images. If you have a promotional banner with a discount code, include the code in the body text as well.
Include Width and Height Attributes
Always specify the width and height attributes on your images. This prevents layout shifts when images load, which is important for users with low vision who may be zoomed in, and for cognitive accessibility where unexpected layout changes can be disorienting.
For more on making images accessible, see our deep dive on accessible images and alt text.
Color and Contrast
Color is a powerful design tool, but when used incorrectly, it creates barriers. Here is how to use color accessibly in email.
Maintain Sufficient Color Contrast
Text and background colors must have sufficient contrast so that subscribers with low vision or color blindness can read them. WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold).
This applies to email just as much as it does to web pages. Check your email color combinations with a contrast checker before sending.
Common problem areas in email:
- Light gray text on white backgrounds
- Colored text on colored backgrounds (like blue text on a green button)
- Text overlaid on background images where the contrast varies
Do Not Use Color Alone to Convey Meaning
Never rely on color by itself to communicate important information. For example, if you use red text to indicate a required field and green text to indicate an optional field, color blind subscribers may not be able to tell the difference.
Instead, pair color with text labels, icons, or patterns. For example:
<p><span style="color:#cc0000;">Required:</span> Email address</p>
<p><span style="color:#006600;">Optional:</span> Phone number</p>
For more on designing for color blind users, see our guide on color blindness and web accessibility.
Typography and Readability
Readable text is the foundation of accessible email. Here are the key principles.
Use a Readable Font Size
A minimum font size of 14px for body text is a good starting point for email. Many email clients have default sizes that are smaller, so explicitly setting your font size is important. For headings, use 18px or larger.
<p style="font-size: 16px; line-height: 1.5; font-family: Arial, sans-serif;">
Your email body text here.
</p>
Use Sufficient Line Height
Line height (the vertical space between lines of text) affects readability significantly. A line height of 1.5 times the font size is a good minimum for email body text. This gives readers enough space to track from one line to the next without losing their place.
Choose Accessible Fonts
Use web safe, sans serif fonts like Arial, Helvetica, or Verdana for email. These fonts are widely available across email clients and are generally easier to read than serif or decorative fonts. If you want to use a custom web font, always provide a stack of fallback fonts so that subscribers whose email clients do not support web fonts still get readable text.
<p style="font-family: 'Open Sans', Arial, Helvetica, sans-serif;">
Your text here.
</p>
Avoid Text in All Caps
Text in all capital letters is harder to read because the uniform letter shapes remove the visual cues that help readers recognize words quickly. It can also cause screen readers to spell out the text letter by letter. Use sentence case or title case for your email content.
For more on readable text, see our guide on accessible typography and readable text.
Links and Buttons
Calls to action are usually the most important part of any email. Here is how to make them accessible.
Use Descriptive Link Text
Link text should describe where the link goes. Avoid generic text like “Click here” or “Read more” because screen reader users often navigate by jumping between links, and generic link text gives them no context.
Bad: Click here to read our latest report. Good: Read our latest accessibility report.
Make Buttons Large Enough to Tap
On mobile devices, buttons need to be large enough to tap easily. Follow the same 44x44 pixel minimum touch target size that you would on a website. Add padding around your button text to increase the tappable area.
<a href="https://example.com/report"
style="display:inline-block; background:#0066cc; color:#ffffff;
text-decoration:none; padding:14px 28px; font-size:16px;
font-weight:bold; border-radius:6px;">
Read the Full Report
</a>
Ensure Button Contrast
Button text must have sufficient contrast against the button background. White text on a medium blue button may look fine to you, but check the actual contrast ratio. Aim for at least 4.5:1.
Use Real Links, Not Images of Buttons
If your call to action is an image that looks like a button, screen reader users will hear the alt text instead of being able to interact with a real link. Use a real <a> element styled as a button whenever possible. If you must use an image button, give it descriptive alt text like “Sign up for the free accessibility scan.”
Accessible Email for Screen Reader Users
Screen reader users interact with email in a linear way. They cannot scan a page visually, so the order and structure of your content matters enormously.
Logical Reading Order
Content should flow in a logical order from top to bottom. Avoid using CSS or table structures that reorder content visually but leave it in a confusing order in the HTML. Screen readers read the HTML source order, not the visual layout.
Table Layouts and Screen Readers
Most HTML emails use tables for layout because many email clients do not support modern CSS layout. This is a reality of email development. But you can minimize the impact on screen reader users:
- Use
role="presentation"on layout tables so screen readers know they are not data tables. - Keep your table structure as simple as possible. Avoid deeply nested tables.
- Use
<th scope="col">only for actual data tables, not for layout tables.
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding: 20px;">
<h1>Your Email Title</h1>
<p>Your email content goes here.</p>
</td>
</tr>
</table>
Language Attributes
If your email contains content in a language different from the primary language of the email, mark it with a lang attribute so screen readers pronounce it correctly.
<p>The French word for accessibility is <span lang="fr">accessibilité</span>.</p>
For more on how screen readers interact with digital content, see our guide on screen reader accessibility.
Plain Text Version
Every email you send should have a plain text alternative. Most email marketing platforms generate this automatically, but you should review it to make sure it makes sense.
Why Plain Text Matters
Some subscribers have their email clients configured to display only plain text. Others use devices or assistive technologies that handle plain text better than HTML. And some spam filters penalize emails that do not include a plain text version.
How to Write a Good Plain Text Version
- Include all the key information from the HTML version.
- Use clear text formatting since you cannot use headings, colors, or images.
- Spell out URLs in full rather than using anchor text.
- Use line breaks and spacing to create visual separation between sections.
- Make sure the plain text version has the same content as the HTML version, just without the styling.
Mobile Accessibility for Email
More than half of all emails are opened on mobile devices. If your emails are not accessible on mobile, you are excluding a huge portion of your audience.
Responsive Design
Use media queries to create responsive email layouts that adapt to different screen sizes. This ensures that text is readable, buttons are tappable, and images are appropriately sized on mobile devices.
@media only screen and (max-width: 600px) {
.container { width: 100% !important; }
.stack { display: block !important; width: 100% !important; }
.button { width: 100% !important; box-sizing: border-box; }
}
Font Size on Mobile
On mobile devices, a 14px font may look smaller than it does on desktop because of screen density. Consider using 16px or larger for body text in mobile emails to ensure readability.
Touch Targets
As mentioned earlier, ensure all interactive elements are at least 44x44 pixels. On mobile, this is even more critical since subscribers are tapping with their fingers, not clicking with a precise mouse cursor.
For more on designing for mobile, see our guide on mobile web accessibility.
Accessible Email for Cognitive Differences
Cognitive accessibility is about making content easy to understand and process. This benefits subscribers with cognitive disabilities, but it also helps everyone who is skimming their inbox on a busy day.
Keep It Simple and Scannable
- Use short paragraphs (2 to 3 sentences maximum).
- Use bullet points and numbered lists to break up content.
- Use headings to create a clear hierarchy.
- Put the most important information first.
- Use plain language and avoid jargon.
Avoid Overwhelming Design
Too many colors, fonts, images, and animated elements can overwhelm subscribers with cognitive disabilities or attention disorders. Keep your design clean and focused. One primary call to action per email is ideal.
Be Consistent
Use the same layout, color scheme, and typography in every email. Consistency helps subscribers know what to expect and where to find things. This is especially helpful for subscribers with cognitive disabilities who rely on predictability.
For more on designing for cognitive differences, see our guide on cognitive accessibility.
Testing Your Emails for Accessibility
Building an accessible email is only half the job. You need to test it before you hit send. Here is how.
Screen Reader Testing
Send a test email to yourself and open it with a screen reader. On Windows, use NVDA or JAWS. On Mac, use VoiceOver. On mobile, use VoiceOver (iOS) or TalkBack (Android). Listen to how your email is announced. Is the reading order logical? Are images described? Are links clear? Are headings announced?
Keyboard Testing
If your email contains interactive elements (like a form or an embedded survey), test them with a keyboard only. Can you reach every interactive element with Tab? Can you activate them with Enter or Space?
Contrast Checking
Use a contrast checker tool to verify that all text and background combinations meet WCAG AA standards. Check both your email body text and your button text.
Inbox Preview Tools
Many email marketing platforms offer inbox preview tools that show how your email will look in different clients. Use these to check that your layout does not break and that your content is readable across popular email clients like Outlook, Gmail, Apple Mail, and others.
Accessibility Checkers
Some email testing tools now include accessibility checks. These can flag missing alt text, contrast issues, missing heading structure, and other common problems. Run these checks before every send.
For more on accessibility testing methods, see our guide on how to test the accessibility of your website.
A Quick Checklist for Accessible Email
Use this checklist before sending every email:
- Subject line is clear, descriptive, and not in all caps.
- Preheader text summarizes the email content or highlights the main CTA.
- Body text uses a minimum 14px font size (16px recommended for mobile).
- Line height is at least 1.5 times the font size.
- Text and background colors meet 4.5:1 contrast ratio (3:1 for large text).
- Color is not the only way information is conveyed.
- All meaningful images have descriptive alt text. Decorative images have empty alt text.
- Important information is not conveyed by images alone.
- Headings use proper h1, h2, h3 tags for structure.
- Lists use proper ul or ol tags.
- Links have descriptive text, not “click here” or “read more.”
- Buttons are at least 44x44 pixels and have sufficient contrast.
- Layout tables use role=“presentation”.
- Reading order is logical from top to bottom.
- A plain text version is included and reviewed.
- Email is responsive and readable on mobile devices.
- One clear primary call to action.
- Design is consistent with previous emails.
- Email tested with a screen reader.
- Email tested for contrast and layout across email clients.
The Bottom Line for Email Accessibility
Your email list is one of your most valuable digital assets. But if your emails are not accessible, you are leaving a quarter of your audience behind. Accessible email is not a nice to have. It is a must have for any organization that cares about reaching every subscriber.
The principles are the same as web accessibility: use semantic HTML, provide text alternatives, ensure sufficient contrast, make text readable, and test with real tools. The difference is that email adds the challenge of inconsistent email clients and limited CSS support. But with the techniques in this guide, you can create emails that work for everyone, every time.
Every accessible email you send is another connection you make with a subscriber who might otherwise be left out.
Are your emails reaching every subscriber? Sign up for Accessible Metrics and run a free accessibility scan on your website today. You will get a detailed report against WCAG 2.1 AA standards that shows exactly what needs fixing, from color contrast to missing alt text to keyboard navigation and more. Make sure every message you send is accessible to every person who receives it.
