Email Accessibility: Newsletters Everyone Can Read

Core Principles (What "Good" Looks Like)

• Structure: Use tables for layout but keep a logical reading order with headings.

• Readable Type: 16–18px base body font, 22–24px buttons; high contrast; ample line spacing.

• Images: Meaningful alt text; empty alt for decorative purposes; avoid putting essential text in images.

• Links & Buttons: Use clear, descriptive text and ensure large tap targets.

• Dark Mode: Ensure colors invert smoothly; keep logo/CTA visible.

• Fallbacks: Graceful degradation in Outlook; always provide a web-view link.

Table-Based Semantics (Yes, You Can Be Accessible)

• Use a single-column layout when possible; it's optimal for mobile viewing.

• Keep the DOM order logical (headline → copy → CTA).

• Add a real heading for the main title and use role="presentation" on layout tables to prevent them from being read as data.

HTML Starter

<table role="presentation" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center">
      <table role="presentation" width="600" cellspacing="0" cellpadding="0">
        <tr><td style="font-size:0; line-height:0;" aria-hidden="true">&nbsp;</td></tr>
        <tr>
          <td>
            <h1 style="margin:0; font-size:24px; line-height:1.3;">Monthly Accessibility Update</h1>
            <p style="font-size:16px; line-height:1.6;">Quick wins and product news…</p>
          </td>
        </tr>
        <!-- CTA block -->
      </table>
    </td>
  </tr>
</table>

Alt Text, Link Text, and CTAs

• Alt Text: Brief and efficient (5–12 words). For decorative images, use alt="".

• Buttons: HTML buttons don’t work everywhere—use bulletproof anchors styled as buttons.

• Link Text: “Read our keyboard test plan” > “Click here”.

Bulletproof CTA

<a href="https://example.com" 
   style="display:inline-block; background:#2b2f36; color:#ffffff; 
          font-size:18px; line-height:48px; padding:0 24px; 
          text-decoration:none; border-radius:6px;">
  Read the guide
</a>

Readability: Type, Spacing, and Contrast

• Body: 16–18px, line-height 1.5–1.7.

• Headings: +6–10px above body size; steer clear of ultra-light weights.

• Contrast: Aim for AA compliance; be cautious of faint link colors on gray backgrounds.

• Spacing: 16–24px between blocks; 12–16px inside CTAs.

Dark Mode Considerations

• Favor solid backgrounds and strong brand colors that invert well.

• Provide a dark-mode logo (e.g., white version) with prefers-color-scheme where supported, but always keep the default visible.

Logo Swap (Progressive Enhancement)

<picture>
  <source srcset="logo-dark.png" media="(prefers-color-scheme: dark)">
  <img src="logo-light.png" alt="Adjustable">
</picture>

Images, GIFs, and Motion

• Steer clear of auto-playing GIFs with excessive motion. Keep loops short and mild.

• Place essential info in live text nearby, instead of within the image.

• Provide alt text that communicates the main message, not pixel details.

Forms & Interactivity (Be Realistic)

• Many clients block forms and advanced interactivity. Link to a web page for complex tasks (surveys, bookings).

• Ensure the landing page is accessible (labels, errors, focus) and enhance with Adjustable for better completion rates.

Testing Across Clients (Quick & Realistic)

• Test at least: Gmail (web/mobile), Apple Mail, Outlook (desktop/web), iOS Mail.

• Verify: reading order, alt text, link focus with keyboard, dark mode legibility, image-off experience, and large text settings.

• Include a “View in Browser” link at the top.

MJML Starter (Copy/Paste)

<mjml>
  <mj-body background-color="#ffffff">
    <mj-section>
      <mj-column>
        <mj-text font-size="24px" line-height="1.3" font-weight="700">
          Monthly Accessibility Update
        </mj-text>
        <mj-text font-size="16px" line-height="1.6">
          Practical tips, quick wins, and product news.
        </mj-text>
        <mj-button background-color="#2b2f36" color="#ffffff" font-size="18px" 
                   href="https://example.com">
          Read the guide
        </mj-button>
        <mj-image src="hero.png" alt="Designer adjusting contrast tokens in UI" padding="24px 0"/>
      </mj-column>
    </mj-section>
    <mj-section>
      <mj-column>
        <mj-text color="#6b7280" font-size="13px">
          You’re receiving this because… <a href="https://example.com/preferences">Manage preferences</a>
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Copy-Paste Checklist (Markdown)

How Adjustable Enhances Campaign Performance (On Your Site)

• Text to Speech and Language Translation make it easier for more recipients to engage with linked content.

• Accessibility Profiles, Text Options, Reading Ruler, Cursor Adjustment, Screen Mask, and Page Options (scale page, hide images/animations, highlight links) reduce friction on landing pages.

• Light/Dark/Color Modes keep calls-to-action clear in varied settings.

• Flexible toolbar/widget placement prevents covering mobile CTAs.

Try Adjustable

FAQs

Do Headings Work in Email?
Yes—use semantic heading tags where supported and ensure the visual hierarchy aligns with the reading order. Even in table layouts, screen readers benefit.

How Do I Handle Images Blocked by Default?
Utilize useful alt text, maintain CTAs as live text buttons, and make sure the message is clear without images.

Does Dark Mode Change Contrast Requirements?
The requirements stay the same, but colors might invert. Test both modes and make sure CTA text stays readable.

Should I Embed Forms?
Generally, no—email client support is inconsistent. Link to a web form optimized for mobile with accessible labels and error indicators.

Next Steps

• Transform your newsletter to a single-column layout, increase body text to 16–18px, and switch to bulletproof CTAs.

• Incorporate meaningful alt text and test dark mode across key clients.

• Optimize landing pages and enrich them with Adjustable to boost understanding and conversions from email traffic.

• Read next: Alt Text Best Practices, Color Contrast Accessibility, Accessible Forms.