Skip to main content

Welcome to our new website! The content and organization have been heavily redone and we want to hear from you! 
Submit feedback

Accessible Email Newsletters

Creating inclusive mass communications that reach everyone.

Why newsletter accessibility matters

Newsletters reach hundreds or thousands of recipients. When they're not accessible, you exclude people who use screen readers, have low vision, or read on mobile devices. Accessible newsletters also perform better—they're easier to read for everyone and often have better engagement rates.

Newsletter accessibility checklist

Content & Structure

  • check_box_outline_blank Clear, descriptive subject line
  • check_box_outline_blank Preheader text summarizes content
  • check_box_outline_blank Logical reading order (single column preferred)
  • check_box_outline_blank Headings used for sections
  • check_box_outline_blank Short paragraphs and bullet lists
  • check_box_outline_blank Plain language (avoid jargon)

Images & Media

  • check_box_outline_blank Alt text on all meaningful images
  • check_box_outline_blank Decorative images have empty alt (alt="")
  • check_box_outline_blank Important info is in text, not just images
  • check_box_outline_blank Images sized appropriately for email

Links & Buttons

  • check_box_outline_blank Descriptive link text (not "click here")
  • check_box_outline_blank Links are visually distinct (underlined or buttons)
  • check_box_outline_blank Buttons have adequate size (44×44px touch target)
  • check_box_outline_blank Unsubscribe link is easy to find


 

Design & Color

  • check_box_outline_blank Text contrast at least 4.5:1
  • check_box_outline_blank Color not used alone to convey meaning
  • check_box_outline_blank Font size at least 14px for body text
  • check_box_outline_blank Responsive design for mobile

Technical

  • check_box_outline_blank HTML lang attribute set
  • check_box_outline_blank Tables used for layout have role="presentation"
  • check_box_outline_blank Plain text version available
  • check_box_outline_blank Tested in multiple email clients

Best practices by element

Subject lines & preheaders

  • Keep subject lines under 50 characters
  • Front-load the most important information
  • Use the preheader to expand on the subject (not repeat it)
  • Avoid ALL CAPS and excessive punctuation

Layout and structure

  • Single-column layouts are most accessible and mobile-friendly
  • If using multiple columns, ensure they stack properly on mobile
  • Use semantic headings (H1, H2, H3) even in email HTML
  • Keep the newsletter focused—don't overload with content

Images

  • Write alt text that conveys the image's purpose, not just a description
  • For images with text, include that text in the alt attribute
  • Limit image file sizes for faster loading
  • Always provide key information in text, not just in images (images may be blocked)

Links and CTAs

  • Each link's text should make sense on its own
  • Use buttons for primary calls-to-action
  • Ensure adequate spacing between clickable elements
  • Make URLs human-readable in plain text version

Recommended email platforms

These platforms include accessibility features:

 

Mailchimp

Includes alt text fields, accessibility checker, and plain text generation.

Mailchimp guide

Constant Contact

Built-in accessibility checker and mobile preview.

Learn more

Campaign Monitor

Supports semantic HTML and automated plain text.

Learn more

Testing your newsletter

  1. Preview in multiple clients — Outlook, Gmail, Apple Mail render differently
  2. Test on mobile — Most emails are read on phones
  3. Check with images disabled — Does it still make sense?
  4. Review the plain text version — Is it readable?
  5. Use a screen reader — Or test with NVDA/VoiceOver briefly
  6. Run an accessibility checker — Tools like Litmus or Email on Acid can help

Example: accessible newsletter structure

<!-- Set language -->
<html lang="en">
<head>
  <title>UA Weekly Update - January 5, 2026</title>
</head>
<body>
  <!-- Preheader text (hidden visually but read by screen readers) -->
  <span style="display:none;">This week: registration opens, new parking policy, and more.</span>
  
  <!-- Main content table with role="presentation" for layout -->
  <table role="presentation" width="100%">
    <tr>
      <td>
        <!-- Logo with alt text -->
        <img src="logo.png" alt="University of Arizona" width="200">
        
        <!-- Heading -->
        <h1>UA Weekly Update</h1>
        
        <!-- Content sections with headings -->
        <h2>Registration Now Open</h2>
        <p>Spring 2026 registration is now open for all students...</p>
        <a href="...">Register for spring classes</a>
        
        <h2>New Parking Policy</h2>
        <p>Starting February 1...</p>
      </td>
    </tr>
  </table>
</body>
</html>

Related resources