Email Accessibility Guide

Why Email Accessibility Matters

Over one billion people worldwide have some form of disability. Many use assistive technologies like screen readers to access email. Inaccessible emails exclude these subscribers from your message and may violate accessibility regulations in some jurisdictions.

Beyond compliance, accessible design improves the experience for everyone. Clear contrast helps those reading in bright sunlight. Logical structure helps anyone skimming quickly. Good accessibility is good design.

Structure and Semantics

Use Proper Heading Hierarchy

Use h1, h2, h3 tags in logical order. Screen readers use headings for navigation. Skipping levels (h1 to h3) or using headings for visual styling only breaks this navigation.

Semantic HTML Elements

Use paragraphs for text, lists for list content, and tables only for tabular data (not layout). Add role="presentation" to layout tables so screen readers do not announce them as data tables.

Language Declaration

Specify the language of your email with lang="en" (or appropriate language code) on the html element. This helps screen readers pronounce content correctly.

Visual Design

Color Contrast

Maintain at least 4.5:1 contrast ratio between text and background for body text, 3:1 for large text. Use contrast checking tools to verify. This helps those with low vision and improves readability for everyone.

Do Not Rely on Color Alone

Never use color as the only way to convey information. If you mark required fields with red, also add an asterisk or text label. Some subscribers cannot perceive color differences.

Readable Font Sizes

Use minimum 14px for body text. Allow text to resize without breaking the layout. Avoid tiny text for legal disclaimers; it should still be readable.

Images and Media

Meaningful Alt Text

Every informative image needs alt text describing its content and purpose. "Photo of a red running shoe" is better than "Image." For decorative images, use empty alt attributes (alt="").

Avoid Text in Images

Screen readers cannot read text embedded in images. Use HTML text whenever possible. If images must contain text, include the text in the alt attribute.

Animated Content

Limit or avoid animations that cannot be paused. Flashing content can trigger seizures in some people. If using GIFs, ensure they do not flash more than three times per second.

Links and Buttons

Descriptive Link Text

Avoid "click here" or "read more." Use descriptive text that makes sense out of context. "Download the accessibility checklist" tells users what they will get.

Sufficient Click Targets

Make links and buttons large enough to click or tap easily. Add padding around links in text. This helps those with motor impairments and benefits mobile users.

Testing Accessibility

• Test with a screen reader (VoiceOver, NVDA, or JAWS)
• Check color contrast with automated tools
• Navigate using keyboard only
• Test with images disabled
• Review with accessibility linting tools

Accessible Templates with AI

Sequenzy generates templates with accessibility best practices built in. The AI produces semantic markup, sufficient contrast, proper alt text guidance, and accessible structure automatically.