Menu
HTML email accessibility: table layouts, inline styles, dark mode, image fallbacks, and email client rendering constraints.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | email-accessibility |
| description | HTML email accessibility: table layouts, inline styles, dark mode, image fallbacks, and email client rendering constraints. |
Reference data for HTML email accessibility under email client rendering constraints. Used by email-accessibility agent.
Email HTML operates under severe constraints compared to web browsers:
| Feature | Gmail | Outlook (Win) | Apple Mail | Yahoo | Outlook.com |
|---|---|---|---|---|---|
Semantic HTML (<nav>, <main>) | Stripped | Stripped | Supported | Stripped | Stripped |
role attributes | Stripped | Stripped | Supported | Stripped | Stripped |
aria-* attributes | Stripped | Stripped | Supported | Stripped | Stripped |
<style> blocks | Supported | Supported | Supported | Supported | Supported |
| External CSS | Stripped | Stripped | Stripped | Stripped | Stripped |
| JavaScript | Stripped | Stripped | Stripped | Stripped | Stripped |
| CSS Grid | Supported | Not supported | Supported | Supported | Supported |
| CSS Flexbox | Supported | Not supported | Supported | Supported | Supported |
<button> element | Rendered | Rendered | Rendered | Rendered | Rendered |
tabindex | Stripped | Stripped | Supported | Stripped | Stripped |
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td align="center" style="padding: 20px;">
<!-- Content here -->
</td>
</tr>
</table>
Rules:
role="presentation" to prevent screen readers from announcing table semanticsrole="presentation" — they need proper <th>, scope, and <caption>cellspacing="0" cellpadding="0" border="0" on layout tables<img src="hero.jpg" alt="Product launch announcement: 50% off all subscriptions through March" width="600" height="300" style="display: block; max-width: 100%;">
Rules:
<img> must have alt attributealt="" (empty, not omitted)width and height — prevents layout shifts when images are blockeddisplay: block to prevent gaps in Outlookstyle="font-size: 14px; font-family: Arial, sans-serif; color: #333333;" on the <img> tag — some clients display alt text using these styles<a href="https://example.com/subscribe" style="color: #005a9c; text-decoration: underline;">
Subscribe to our accessibility newsletter
</a>
Rules:
text-decoration: underline — color alone can't distinguish links (WCAG 1.4.1)style attributes directly on <a> tags — some clients strip <style> blocks<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="border-radius: 4px; background: #005a9c;">
<a href="https://example.com/action" style="background: #005a9c; border: 15px solid #005a9c; font-family: Arial, sans-serif; font-size: 16px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 4px; font-weight: bold;">
<span style="color: #ffffff;">Get Started</span>
</a>
</td>
</tr>
</table>
<h1> through <h6>) for visual and semantic structure<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
lang attribute on <html> elementxmlns for XHTML compatibility (some email clients require it)<!-- Meta tag for dark mode support -->
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style>
@media (prefers-color-scheme: dark) {
.email-body { background-color: #1a1a1a !important; }
.text-content { color: #e0e0e0 !important; }
}
</style>
Rules:
data-ogsb="ignore" for Outlook.com to prevent unwanted inversionsdir="ltr" and table cell orderingdir="rtl" on the <html> element and reverse table cell order<mj-image src="photo.jpg" alt="Description of the image" />
<mj-button href="https://example.com" background-color="#005a9c" color="#ffffff">
Accessible Button Text
</mj-button>
<img src="photo.jpg" alt="Description" class="float-center">
<button class="button large" href="https://example.com">
<a href="https://example.com">Accessible Button Text</a>
</button>
| 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 <html> | 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 |
Use for web accessibility work in HTML, JSX, CSS, ARIA, keyboard, forms, contrast, modals, live regions, headings, links, tables, or WCAG review; starts accessibility-lead first and uses tool_search if subagent tools are lazy-loaded.
Developer tools accessibility router for Python, wxPython, desktop accessibility APIs, NVDA add-ons, scanner tooling, CI tooling, and accessibility developer experience.
Document accessibility router for Word, Excel, PowerPoint, PDF, EPUB, Office remediation, PDF remediation, and accessible generated documents.
GitHub workflow accessibility router for PR review, issues, Actions, releases, projects, security alerts, notifications, repository management, and accessible contributor workflows.
Markdown accessibility router for docs, README files, headings, links, tables, alt text, diagrams, generated docs, and publication-ready accessible markdown.
Compute web accessibility scores (0-100, A-F grades) with severity scoring, confidence levels, and remediation tracking across audits.