Accessibility Checker

The Accessibility tab shows WCAG compliance issues in your email, helping you reach all subscribers including those with disabilities.

Why Email Accessibility Matters

• 15% of people have some form of disability
• Accessible emails reach a wider audience
• Improvements often help usability for everyone
• Required by law in some regions (ADA, EU Accessibility Act)

---

What We Check

Our accessibility checker uses axe-core, the industry standard for automated accessibility testing.

Critical Issues (Errors)

These must be fixed:

Missing Alt Text

• All informational images need descriptive alt text
• Decorative images should use alt=""

Color Contrast

• Text must have 4.5:1 contrast ratio minimum
• Large text needs 3:1 minimum

Missing Form Labels

• Form inputs must have associated labels

Serious Issues (Warnings)

Should be addressed:

Heading Hierarchy

• Use proper heading order (H1, H2, H3...)
• Don't skip heading levels

Link Purpose

• Link text should describe the destination
• Avoid "click here" or "read more" alone

Table Structure

• Layout tables need role="presentation"
• Data tables need proper headers

---

Understanding Your Score

The Accessibility tab shows:

• Error count - Critical issues (red badge)
• Warning count - Serious issues (yellow badge)
• Passed checks - Green checkmark if no issues

Score Interpretation

• 0 errors, 0 warnings - Excellent! Well-optimized for accessibility
• 0 errors, some warnings - Good, but room for improvement
• Any errors - Issues need fixing before sending

---

Fixing Common Issues

Adding Alt Text

<!-- Informational image - describe it -->
<img src="product.jpg" alt="Blue running shoes, model XR-500" />

<!-- Decorative image - empty alt -->
<img src="divider.png" alt="" role="presentation" />

Improving Color Contrast

Use tools like WebAIM Contrast Checker to verify:

• Normal text: 4.5:1 minimum
• Large text (18px+ or 14px+ bold): 3:1 minimum

Descriptive Link Text

<!-- Good - describes destination -->
<a href="/sale">View our summer sale collection</a>

<!-- Bad - doesn't describe anything -->
<a href="/sale">Click here</a>

Layout Tables

<!-- Add role for layout tables -->
<table role="presentation" cellpadding="0" cellspacing="0">
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
</table>

---

Quick Checklist

Before sending, verify:

• All images have meaningful alt text
• Color contrast meets minimum ratios
• Links have descriptive text
• Layout tables have role="presentation"
• Heading hierarchy is logical
• HTML has lang attribute