ResendTutorial
6 Tips for Accessible Emails
Summary
The Email Markup Consortium’s 2026 report analyzed 376,348 emails and found that only eight passed every accessibility check, while nearly all failures included Serious or Critical issues. The post focuses on six largely mechanical improvements: setting lang and dir, marking layout tables role=“presentation”, creating a heading hierarchy, writing descriptive link and image text, adding a specific title element, and meeting a 4.5:1 color-contrast ratio. It gives HTML examples, notes that clients may strip attributes from the html element, and distinguishes meaningful images from decorative ones that need empty alt text. It also describes updated React Email defaults for language, direction, image alt text, Markdown tables, and titles, while leaving content judgments such as headings, links, and contrast to authors.
Context
The report found that lang and dir were missing on roughly 96% of emails, 84% did not correctly identify presentation-only tables, 74% had no h1, 45% lacked a title element, and over half failed the 4.5:1 contrast ratio.
Approach / What changed
Apply structural accessibility defaults in email markup, then review content-specific choices manually. The post recommends setting language and text direction, identifying layout tables as presentational, organizing headings, describing links and images, adding a specific title element, checking contrast, and updating React Email to its latest version for improved defaults.
Takeaways
Only eight of 376,348 analyzed emails passed every accessibility check, and nearly all failed emails contained issues rated Serious or Critical.
Layout tables should use role=“presentation”; otherwise screen readers may announce rows and make the email difficult to navigate.
Decorative images should use empty alt text, while meaningful images need contextual descriptions and links should state where they lead.
FAQ
Why should lang and dir be repeated on an email’s body children?
Several email clients strip these attributes from the html element. Repeating them on the body’s direct children helps assistive technology and translation tools identify language and text direction.
How should headings and images be handled in accessible emails?
Use a clear heading hierarchy beginning with h1 when the email needs an outline, though short notifications may not need headings. Describe meaningful images with contextual alt text, and use empty alt text for decorative images.
What accessibility defaults were added to React Email?
The update sets language and direction on Body, defaults Img to an empty alt, makes Markdown tables render role="presentation", and has Preview emit a title element. The post recommends installing the latest react-email package to receive these changes.
Source and freshness
- Source
- resend.com
- Published
- Added to Yomu
Summaries are generated from the original by a language model. Check the original before relying on it.
Keep reading
Related reading
The Good Stuff
Paid picks we use ourselves. Links carry a referral code — a subscription through one earns us a commission at no extra cost to you.
The best engineering reads, once a week
One useful email. Unsubscribe anytime.