Layout and accessibility Required

Mark up the message with meaning

Use headings, paragraphs and lists, and mark every layout table with role="presentation", so screen readers announce content and not table cells.

By Erik Bergstedt, Agent Wranglers. Updated 20 October 2026.

How to do it

Use one h1 for the main subject and h2 for sections. Put lang and dir on the html element and on the main wrapper, because some clients drop the html element. Give every table used only for layout role="presentation". Keep the reading order the same as the visual order.

Example

<html lang="en" dir="ltr">
<body>
  <div lang="en" dir="ltr" role="article" aria-roledescription="email" aria-label="Your order has shipped">
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
      <tr><td>
        <h1>Your order has shipped</h1>
        <p>Order 1042 left our warehouse today.</p>
      </td></tr>
    </table>
  </div>
</body>
</html>

How to check

Open the test send with a screen reader such as VoiceOver or NVDA. It reads headings as headings and never says "table" or "row" for layout.

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/semantic-structure.