Email Accessibility: Newsletters Everyone Can Read

Core principles (what “good” looks like)

• Structure: use tables for layout but preserve a logical reading order and headings.

• Readable type: 16–18px base body, 22–24px buttons; high contrast; generous line spacing.

• Images: meaningful alt text; empty alt for decorative; don’t put essential text in images.

• Links & buttons: clear, descriptive text and large tap targets.

• Dark mode: ensure colours invert gracefully; 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 reads best on mobile.

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

• Add a real heading for the main title and use role="presentation" on layout tables to avoid 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 purposeful (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; avoid ultra-light weights.

• Contrast: aim for AA; beware faint link colours on grey backgrounds.

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

Dark mode considerations

• Prefer solid backgrounds and strong brand colours that invert well.

• Provide a dark-mode logo (e.g., white knock-out) with prefers-color-scheme where supported, but always keep 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

• Avoid auto-playing GIFs with heavy motion. Keep loops short and calm.

• Put essential info in live text nearby, not inside the image.

• Supply alt text that conveys the key message, not pixel detail.

Forms & interactivity (be realistic)

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

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

Testing across clients (quick & realistic)

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

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

• Provide 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 supports campaign performance (on your site)

• Text to Speech and Language Translation help more recipients consume 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/Colour modes keep calls-to-action legible in diverse environments.

• Flexible toolbar/widget placement avoids covering mobile CTAs.

Try Adjustable

FAQs

Do headings work in email?
Yes—use semantic heading tags where supported and ensure the visual hierarchy matches reading order. Screen readers benefit even in table layouts.

How do I handle images blocked by default?
Use useful alt text, keep CTAs as live text buttons, and ensure the message is understandable without images.

Does dark mode change contrast requirements?
The requirements don’t change, but colours may invert. Test both modes and ensure CTA text remains readable.

Should I embed forms?
Generally no—email client support is inconsistent. Link to a web form tuned for mobile with accessible labels and errors.

Next steps

• Convert your newsletter to single-column, raise body text to 16–18px, and switch to bulletproof CTAs.

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

• Optimise landing pages and enhance them with Adjustable to improve comprehension and conversions from email traffic.

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