Agent WranglersLayout and accessibility Required
Describe every image
Give every meaningful image an alt that says what it shows or does, and give decorative images an empty alt="".
How to do it
The general method is in the website alt text rule. This rule adds what email needs. Many clients block images until the reader allows them, so the alt text is often all people see. Write alt text for the message, such as "20% off all boots" on a banner. Use alt="" on spacers and ornaments. Add width and height so the layout holds while images are blocked.
Example
<img src="https://img.example.com/boots-sale.png" width="600" height="300" alt="20% off all boots until Sunday">
<img src="https://img.example.com/divider.png" width="600" height="8" alt="">How to check
Turn images off in the client and read the message. Every point still comes across, and no file names or "image" labels appear.
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/image-alt-text.