> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lettr.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Email Accessibility
> Make your emails accessible to all recipients with alt text, semantic HTML, color contrast, and screen reader best practices
Accessible emails reach more people. Over 1 billion people worldwide live with some form of disability, and many of them use assistive technologies like screen readers, magnifiers, and keyboard navigation to read email. Building accessible emails isn't just good practice — it improves engagement for everyone, because the same techniques that help assistive technology users also make emails clearer and more readable on all devices.
***
## Semantic Structure
Screen readers rely on HTML structure to help users navigate content. Without proper structure, an email becomes a flat wall of text that's difficult to scan.
### Use Heading Tags for Hierarchy
Use `` through `` to create a logical content hierarchy. Never use font size or bold styling alone to indicate headings — screen readers won't recognize them.
```html theme={null}
Your Monthly Summary
Account Activity
Here's what happened this month...
Your Monthly Summary
```
### Use Lists for Sequential Content
When presenting a series of items, use proper list markup:
```html theme={null}
-
3 new orders received
-
2 shipments delivered
-
1 return processed
```
### Mark Layout Tables as Presentational
Email HTML relies on tables for layout. Add `role="presentation"` to every table that's used for layout (not data). This tells screen readers to ignore the table structure.
```html theme={null}
| Item |
Price |
| Widget Pro |
$29.99 |
```
***
## Images and Alt Text
Images are one of the most common accessibility barriers in email. Many email clients block images by default, and screen readers can only convey image content through alt text.
### Write Descriptive Alt Text
Every image needs an `alt` attribute that describes its content or purpose.
```html theme={null}
```
A decorative image (borders, spacers, visual flourishes) should have `alt=""` — not a missing alt attribute. An empty alt tells screen readers to skip the image. A missing alt causes screen readers to announce the filename, which is confusing.
### Never Put Critical Content Only in Images
Discount codes, CTAs, dates, and important instructions must exist as live text, not just in images. If images are blocked, the recipient should still understand the email.
```html theme={null}
```
***
## Color and Contrast
### Minimum Contrast Ratios
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios. Apply these to your email content:
| Element | Minimum Ratio | Example |
| -------------------------------- | ------------- | ---------------------------------------------- |
| Body text | 4.5:1 | Dark gray (#4a4a68) on white (#ffffff) = 7.2:1 |
| Large text (18px+ or 14px+ bold) | 3:1 | Medium gray (#6b7280) on white = 4.6:1 |
| UI components (buttons, links) | 3:1 | Indigo (#6366F1) on white = 4.5:1 |
Use the [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) to verify your color combinations. Enter your foreground and background colors to get an instant pass/fail result.
### Don't Rely on Color Alone
Color should never be the only way to convey information. Always pair color with text labels, icons, or patterns.
```html theme={null}
● Failed
● Delivered
✕ Failed
✓ Delivered
```
***
## Typography and Readability
### Font Size
Body text should be at least 14px, and 16px is preferred. Smaller text is difficult to read on mobile devices and for users with low vision.
```html theme={null}
Body text at 16px with 1.5 line height for comfortable reading.
Footer text can be smaller (12px minimum) but maintain adequate contrast.
```
### Line Length and Spacing
* **Line length**: Keep content within 600px max width. Lines longer than 75 characters are harder to read.
* **Line height**: Use 1.5 for body text. Tight line heights (1.0–1.2) make text harder to scan.
* **Paragraph spacing**: Add margins between paragraphs (16px minimum) to create visual separation.
### Font Stacks
Always include fallback fonts. Users with custom system fonts or accessibility settings should see readable text regardless.
```html theme={null}
This font stack covers all major operating systems with clean, readable defaults.
```
***
## Links and Buttons
### Descriptive Link Text
Screen readers can navigate by links, reading each link text out of context. Make sure every link makes sense on its own.
```html theme={null}
Click here
Read more
View your monthly report
Manage notification settings
```
### Button Size and Touch Targets
Buttons should be large enough to tap easily on mobile devices. The minimum recommended touch target is 44×44 pixels.
```html theme={null}
```
### Underline Links in Body Text
In body text, always underline links. Users with color vision deficiencies may not be able to distinguish link color from body text color.
```html theme={null}
Check your
dashboard
for details.
```
***
## Plain Text Fallbacks
Always include a plain text version of your email alongside the HTML version. Some recipients prefer plain text, and some email clients don't render HTML at all.
When using the Lettr API, include both `html` and `text` fields:
```javascript theme={null}
await fetch('https://app.lettr.com/api/emails', {
method: 'POST',
headers: {
'Authorization': 'Bearer your-api-key',
'Content-Type': 'application/json'
},
body: JSON.stringify({
from: 'updates@mail.example.com',
to: 'recipient@example.com',
subject: 'Your order has shipped',
html: 'Order #1234 shipped
Your package is on its way.
',
text: 'Order #1234 shipped\n\nYour package is on its way.\n\nTrack your package: https://example.com/track/1234'
})
});
```
The plain text version doesn't need to mirror the HTML exactly. Focus on conveying the same information and include full URLs (not hyperlinked text) so recipients can copy and paste them.
***
## Language and Direction
### Set the Language Attribute
Screen readers use the `lang` attribute to switch pronunciation rules. Always set it on the outermost element.
```html theme={null}
Your Email Subject
```
### Support Right-to-Left Languages
If you send emails in Arabic, Hebrew, or other RTL languages, use the `dir` attribute:
```html theme={null}
مرحبًا بك في خدمتنا
|
```
***
## Accessibility Checklist
Use `` through `` for content hierarchy, not styled `
` tags.
Descriptive alt for content images, empty `alt=""` for decorative images.
All layout tables have `role="presentation"`.
4.5:1 minimum for body text, 3:1 for large text and UI components.
Status indicators, errors, and important cues use text labels alongside color.
No "click here" or "read more" — every link makes sense out of context.
Body text is 14px minimum (16px preferred), line height 1.5.
Both HTML and plain text versions are sent with every email.
The `lang` attribute is set on the outer HTML element.
***
## Common Mistakes
Omitting the `alt` attribute entirely causes screen readers to announce the image filename (e.g., "IMG\_20240115\_hero\_v3\_final.png"), which is confusing and unhelpful. Always add an `alt` attribute — even if it's empty for decorative images.
Light gray text on a white background or white text on a light-colored button may look subtle and elegant, but it fails contrast requirements and is unreadable for many users. Check every text/background combination.
Screen reader users often navigate by tabbing through links. A list of "click here" links provides no context about where each link goes. Use descriptive text like "View your invoice" or "Update payment method".
Legal text and footers are often set to 10px or smaller, making them illegible on mobile devices. Keep footer text at 12px minimum.
Sending HTML-only emails excludes recipients using text-only email clients or those who prefer plain text for accessibility reasons. Always include a `text` version.
***
## Related Topics
Build and manage email templates with the Topol editor
Ensure your emails look good in dark mode
HTML, plain text, and AMP email explained
How different email clients render HTML email