Accessible emails aren't just a nice-to-have—they're a business advantage. Around 15% of people worldwide have some form of disability that affects how they interact with digital content. Beyond the ethical imperative, accessible emails also tend to perform better: clear structure, meaningful alt text, and readable fonts improve engagement for everyone.
Alt Text
Alt text is the single most impactful accessibility improvement you can make. It describes images for screen reader users and displays when images are blocked (which many corporate email clients do by default).
Writing Good Alt Text
- Be specific: "Red running shoes with white sole, $89.99" is better than "shoes"
- Include CTAs: If an image contains a call-to-action, include it: "Banner: 30% off spring collection. Shop now."
- Skip decorative images: For purely decorative elements (divider lines, background textures), leave alt text empty—this tells screen readers to skip them
- Don't start with "Image of": Screen readers already announce it's an image. Just describe the content
Setting Alt Text in the Plugin
Select an image component in Figma, open the Email Love plugin, and set the alt text in the properties panel. Copilot also flags images that are missing alt text.
Visual Hierarchy
Since MJML outputs text as styled <div> elements with inline CSS rather than semantic heading tags (<h1>, <h2>, etc.), email doesn't support the same kind of heading-based navigation that web pages do. This is a limitation of the MJML framework and email HTML in general—not specific to the Email Love plugin.
That said, a clear visual hierarchy still matters for readability and scanning:
- Use distinct font sizes to signal importance—larger, bolder text for primary messages, smaller text for supporting content
- Be consistent with your sizing scale across emails so subscribers learn to scan your layout quickly
- Maintain a logical content flow from most important to least important, top to bottom
While screen readers can't navigate email headings the way they do on the web, clear visual structure, meaningful alt text, and good content ordering still significantly improve the experience for all readers.
Color Contrast
Text must have sufficient contrast against its background to be readable by people with visual impairments. The Web Content Accessibility Guidelines (WCAG) recommend:
- Normal text: Minimum 4.5:1 contrast ratio
- Large text (18px+ or 14px+ bold): Minimum 3:1 contrast ratio
- Tools: Use WebAIM's Contrast Checker (webaim.org/resources/contrastchecker) or Figma plugins like Stark to verify
Dark Mode Considerations
When dark mode inverts your colors, contrast can suffer. Light gray text on white (low contrast on light mode) might become unreadable in dark mode. Test your color combinations in both modes.
Readable Typography
- Minimum font size: 14px for body text, 16px recommended
- Line height: 1.5x to 2x font size for readability
- Font choice: Sans-serif fonts (Arial, Helvetica, Verdana) are generally more readable on screens
- Text alignment: Left-aligned text is easier to read than justified or centered for body copy
- Line length: Aim for 50–75 characters per line. Overly wide text blocks are hard to track visually
Link Accessibility
- Descriptive link text: "Read our accessibility guide" is better than "click here"
- Distinguish links visually: Use underlines or a different color—don't rely on color alone (color-blind users may not distinguish them)
- Sufficient link spacing: On mobile, links that are too close together are hard to tap accurately
Language & Content
- Set the language attribute: The plugin sets the lang attribute in the HTML tag. This helps screen readers pronounce content correctly
- Use plain language: Clear, simple language benefits everyone, not just people using assistive technology
- Meaningful subject lines: Screen reader users often decide whether to open an email based on the subject line alone
Accessibility Checklist
Check | Action | Priority |
Alt text on all images | Add descriptive alt text or empty alt for decorative images | Required |
Color contrast | Verify 4.5:1 ratio for normal text, 3:1 for large text | Required |
Visual hierarchy | Use distinct font sizes and consistent styling to signal content importance | Recommended |
Font size | Minimum 14px body text | Required |
Link text | Use descriptive link text, not "click here" | Recommended |
Language attribute | Set lang attribute on HTML | Recommended |
Dark mode | Test contrast in both light and dark modes | Recommended |
For more accessibility guidance, check WCAG 2.1 guidelines at w3.org/WAI/WCAG21/quickref/
Powered by