---
title: "Layout and accessibility · Agent Wranglers"
url: https://agentwranglers.se/playbook/email/layout-and-accessibility
updated: 2026-10-20
licence: "All rights reserved"
---

# Layout and accessibility

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

> Build email that every client can show and every reader can use. Semantic HTML, live text, clear contrast, small files and a test send to each major client.

Email clients render HTML with very different engines. Classic Outlook on Windows uses the Word engine, Gmail removes some CSS, and Apple Mail supports nearly everything. Data on which client supports what is published at caniemail.com. Plain-text-only mail passes this chapter, because it has no layout to break.

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers email playbook: https://agentwranglers.se/playbook/email/layout-and-accessibility`.

## Required

- [Mark up the message with meaning](https://agentwranglers.se/playbook/email/layout-and-accessibility/semantic-structure): Use headings, paragraphs and lists, and mark every layout table with `role="presentation"`, so screen readers announce content and not table cells.
- [Describe every image](https://agentwranglers.se/playbook/email/layout-and-accessibility/image-alt-text): Give every meaningful image an `alt` that says what it shows or does, and give decorative images an empty `alt=""`.
- [Use contrast and more than colour](https://agentwranglers.se/playbook/email/layout-and-accessibility/email-contrast): Meet the contrast in [colour contrast](https://agentwranglers.se/playbook/website/accessibility/color-contrast) and never show meaning by colour alone, as [not colour alone](https://agentwranglers.se/playbook/website/accessibility/not-color-alone) says.
- [Make email text easy to read](https://agentwranglers.se/playbook/email/layout-and-accessibility/readable-text): Set body text to at least 16 pixels, with a line height of at least 1.4 and a content column no wider than 600 pixels.
- [Send text instead of pictures of text](https://agentwranglers.se/playbook/email/layout-and-accessibility/live-text): Put every important word in live text. Never send a message that is one large image.
- [Fit every screen](https://agentwranglers.se/playbook/email/layout-and-accessibility/responsive-email): Make the message work on a phone first, with fluid widths and media queries only as an extra.
- [Make buttons easy to tap](https://agentwranglers.se/playbook/email/layout-and-accessibility/email-buttons): Build each call to action as a link styled as a button, at least 44 by 44 pixels, with clear words.
- [Test in the clients your readers use](https://agentwranglers.se/playbook/email/layout-and-accessibility/client-testing): Send every new template to the main email clients before it goes to people, and check it in light and dark mode.

## Recommended

- [Build layout that Outlook can show](https://agentwranglers.se/playbook/email/layout-and-accessibility/layout-tables): Build the outer layout with tables and fixed widths where classic Outlook on Windows needs them, and use modern CSS only as an extra.
- [Inline the CSS and plan for it to fail](https://agentwranglers.se/playbook/email/layout-and-accessibility/inline-css): Put the CSS that matters inline on each element, and make sure the message still reads if a client strips the rest.
- [Plan for dark mode](https://agentwranglers.se/playbook/email/layout-and-accessibility/email-dark-mode): Design for clients that switch to dark mode, so text stays readable and logos stay visible.
- [Write a preheader](https://agentwranglers.se/playbook/email/layout-and-accessibility/preheader): Set the short text that inboxes show after the subject, so it adds to the subject instead of repeating it.

- Previous: [Unsubscribe and bounces](https://agentwranglers.se/playbook/email/unsubscribe-and-bounces)
- Next: [Email privacy](https://agentwranglers.se/playbook/email/email-privacy)
- [All chapters](https://agentwranglers.se/playbook/email)