![[email protected]](/rodriguezcommaj/accessible-emails/blob/master/fall%402x.png){kind=link}
![[email protected]](/rodriguezcommaj/accessible-emails/blob/master/logo%402x.png){kind=link}
![[email protected]](/rodriguezcommaj/accessible-emails/blob/master/product%402x.png){kind=link}
![[email protected]](/rodriguezcommaj/accessible-emails/blob/master/summer%402x.png){kind=link}
![[email protected]](/rodriguezcommaj/accessible-emails/blob/master/winter%402x.png){kind=link}
This repo has a few examples of accessible HTML email templates. Each template follows a few principles:
- Simplicity in design and code
- Responsive across devices
- Semantic markup, always
- Screenreader-friendly
- High contrast
- Text-first, images second
- Alternative text required
Each template is heavily commented to point out where accessible features are used. Use these to learn about creating more accessible HTML email templates.
Each template has been tested in Litmus for rendering, but "pixel perfect" is not a requirement (hint: it never should be).
For accessibility, each template has been tested with a variety of tools, including Litmus' Accessibility Checker in Checklist, NVDA on Windows 10, and a handful of #a11y extensions in Chrome.
Issues are welcome!