--- name: email-accessibility description: HTML email accessibility: table layouts, inline styles, dark mode, image fallbacks, and email client rendering constraints. --- # Email Accessibility Skill Reference data for HTML email accessibility under email client rendering constraints. Used by `email-accessibility` agent. --- ## Email Client Rendering Constraints Email HTML operates under severe constraints compared to web browsers: | Feature | Gmail | Outlook (Win) | Apple Mail | Yahoo | Outlook.com | |---------|-------|--------------|------------|-------|-------------| | Semantic HTML (`

`, `

`) | Stripped | Stripped | Supported | Stripped | Stripped | | `role` attributes | Stripped | Stripped | Supported | Stripped | Stripped | | `aria-*` attributes | Stripped | Stripped | Supported | Stripped | Stripped | | ` ``` **Rules:** - Test contrast ratios in both light and dark modes - Some clients invert colors automatically — use `data-ogsb="ignore"` for Outlook.com to prevent unwanted inversions - Transparent PNGs work well in both modes; JPGs with white backgrounds look broken in dark mode ## Reading Order - Email reading order follows the HTML source order (no CSS Grid reordering possible in email) - Single-column layouts are most accessible — multi-column requires careful `dir="ltr"` and table cell ordering - For RTL languages, use `dir="rtl"` on the `` element and reverse table cell order ## Framework Patterns ### MJML ```html Accessible Button Text ``` ### Foundation for Emails ```html Description

``` ## Email Accessibility Checklist | Check | WCAG SC | Priority | |-------|---------|----------| | All layout tables have `role="presentation"` | 1.3.1 | Critical | | All images have meaningful or empty `alt` | 1.1.1 | Critical | | Link text is descriptive | 2.4.4 | Serious | | Color contrast meets 4.5:1 | 1.4.3 | Serious | | Language is set on `` | 3.1.1 | Serious | | Heading hierarchy is logical | 1.3.1 | Moderate | | Links are underlined (not color-only) | 1.4.1 | Moderate | | Dark mode contrast is verified | 1.4.3 | Moderate | | Preheader text is meaningful | Best practice | Minor | | Alt text styled for image-blocked view | Best practice | Minor |