Email Newsletter Accessibility

Why Newsletter Accessibility Matters

• Broader reach:15% of the global population has some form of disability
• Legal compliance:University communications must be accessible under ADA/Section 508
• Better deliverability:Accessible emails often have better spam scores
• Mobile users:Accessibility best practices improve mobile reading experience
• Plain text fallback:Well-structured emails convert cleanly to plain text

Structure and Layout

Use Semantic HTML

Email clients have limited HTML support, but semantic structure helps assistive technology.

• Use<h1>through<h3>for headings (most email builders support this)
• Use<p>tags for paragraphs
• Use<ul>and<ol>for lists
• Addrole="presentation"to layout tables

Single-Column Layouts

Single-column designs are most accessible because:

• Reading order is predictable
• Content reflows well on mobile
• Screen readers navigate linearly

Reading Order

Ensure the HTML source order matches the visual reading order. Screen readers follow the code, not the visual layout.

Code Example: Basic Structure

<!-- Layout table with role="presentation" -->
<table role="presentation" width="100%">
 <tr>
 <td>
 <h1>Newsletter Title</h1>
 <p>Introduction paragraph...</p>
 
 <h2>Section Heading</h2>
 <p>Section content...</p>
 
 <!-- CTA Button -->
 <a href="..." style="...">Learn More</a>
 </td>
 </tr>
</table>

Images and Alt Text

Alt Text Requirements

Every image needs appropriate alt text:

Image Type	Alt Text Approach	Example
Informative image	Describe the content and purpose	alt="Students studying in the new library reading room"
Decorative image	Use empty alt	alt=""
Logo	Organization name	alt="University of Arizona"
Image as button	Describe the action	alt="Register for the event"
Chart or graph	Summarize the data	alt="Bar chart showing enrollment increased 12% in Fall 2025"

Image Best Practices

• Don't rely on images alone:Include text content for critical information
• Avoid text in images:Use HTML text instead—it's searchable and scalable
• Keep file sizes reasonable:Large images slow loading and may be blocked
• Use background colors:Add background color to image containers so buttons remain visible if images are blocked

Hero Image Example

<!-- Good: Informative alt text -->
<img src="hero.jpg" 
 alt="Campus panorama showing the new Student Union at sunset"
 width="600" height="300">

<!-- Good: Decorative pattern, empty alt -->
<img src="divider.png" alt="" width="600" height="10">

Links and Buttons

Descriptive Link Text

Link text must describe the destination or action.

Button Design

Create accessible buttons that work when images are blocked:

<!-- Bulletproof button using VML for Outlook -->
<table role="presentation" cellpadding="0" cellspacing="0">
 <tr>
 <td style="background-color:#AB0520; border-radius:4px; padding:12px 24px;">
 <a href="https://example.com/register" 
 style="color:#FFFFFF; text-decoration:none; font-weight:bold;">
 Register Now
 </a>
 </td>
 </tr>
</table>

Multiple Links to Same Destination

If an image and text both link to the same place, combine them in one link to avoid redundancy:

<!-- Good: One link with image and text -->
<a href="article.html">
 <img src="article-thumb.jpg" alt="">
 Read: How to Create Accessible Documents
</a>

Color and Contrast

Contrast Requirements

Element	Minimum Ratio	Notes
Body text	4.5:1	Standard text under 18pt
Large text (18pt+)	3:1	Headlines, buttons
Links	4.5:1	Must be distinguishable from surrounding text
Button text	4.5:1	Against button background

Don't Use Color Alone

Never rely solely on color to convey meaning:

• Links:Use underlines in addition to color
• Status indicators:Add icons or text labels
• Highlights:Use bold or borders along with color

Dark Mode Considerations

Many email clients have dark mode. To ensure readability:

• Avoid pure white (#FFFFFF) backgrounds—use off-white (#F5F5F5)
• Test how your colors invert in dark mode
• Add dark mode media queries if your platform supports them

Platform-Specific Tips

Mailchimp

• Use the alt text field for every image block
• Preview in "Plain Text" to check structure
• Use the built-in accessibility checker
• Choose responsive templates

Constant Contact

• Click on images to add alt text
• Use "Text" blocks for headings rather than image headers
• Preview on mobile before sending

Emma

• Edit image properties to add alt text
• Use the "Plain text" editor for the text version
• Avoid multi-column layouts

Custom HTML

• Userole="presentation"on layout tables
• Includelangattribute on the HTML element
• Test in Litmus or Email on Acid
• Always send both HTML and plain text versions

Testing Your Newsletter

Manual Testing

1. View with images disabled:Does the message still make sense?
2. Check the plain text version:Is the content complete and readable?
3. Tab through links:Are they in logical order?
4. Test on mobile:Does it reflow properly?
5. Screen reader test:Use NVDA or VoiceOver to read through

Automated Tools

• Litmus:Includes accessibility checking
• Email on Acid:Tests rendering across clients
• Accessible Email:Dedicated accessibility scanner
• WAVE:Check the web version of your email

Test Recipients

Send test emails to:

• Gmail (web and mobile app)
• Outlook (desktop and web)
• Apple Mail
• Yahoo Mail
• A screen reader user if possible

Pre-Send Checklist

Structure

• Single-column or simple layout
• Logical heading hierarchy (H1 H2 H3)
• Layout tables have role="presentation"
• Reading order matches visual order

Images

• All informative images have alt text
• Decorative images have alt=""
• No text conveyed only through images
• Message works with images disabled

Links and Buttons

• All links have descriptive text
• No "click here" or bare URLs
• Buttons visible without images
• Links are underlined or otherwise distinguishable

Color and Text

• Text contrast is at least 4.5:1
• Color is not the only indicator of meaning
• Font size is at least 14px
• Line height is at least 1.5

Testing

• Tested on mobile device
• Plain text version is readable
• Sent test to multiple email clients

Related Resources

• Outlook Accessibility Guide
• Gmail Accessibility Guide
• Writing Meaningful Links
• Color and Contrast Guide
• Accessible Newsletter Example