Write an email that stays readable without images

Start where the poster disappears

Imagine a hypothetical community workshop announcement. Its attractive banner contains the new venue, a registration deadline and a QR code. With images unavailable, the email says only “An update for everyone” and “See below.” The failure is editorial before it is technical: the reader cannot discover what changed or what to do.

Build the message around a stricter question: can someone understand and act on it without loading any pictures? This fieldnote develops that workshop notice into a small HTML email. The sample names, dates, address and links are fictional. The checks below are a procedure to carry out, not results from a tested campaign.

Keep images when they help explain the subject. The aim is to make the essential message survive their absence. A short announcement is a good candidate for one continuous column with headings, paragraphs, a list and an ordinary link.

Write the facts that must survive

Before choosing a template, write a compact content contract. For this hypothetical notice, it contains the event, the change, the date and time zone, the full location, the action deadline and a way to ask for help. Mark every fact that currently appears only inside artwork.

Repair workshop: venue changed. Join us on 14 November 2026, 10:00–12:00, London local time, at North Hall, 18 Example Street, London. Confirm your place by 12 November. Reply to this email if you need help with access.

Those sentences are the message's minimum useful version. A photograph may add atmosphere; it cannot be the only place the address appears. A QR code may offer another route; it cannot be the only registration route. Keep the registration deadline beside the registration link so readers do not have to connect distant fragments.

Write a specific subject such as “Repair workshop: new venue for 14 November.” If you supply preview text, let it add the deadline rather than repeat the subject. Then read only the subject and opening paragraph: a reader should recognize the change immediately.

Build a short reading path in HTML

Mailchimp's email guidance recommends logical order, semantic headings, meaningful links, text for critical information and a plain-text version. Use those principles in whichever sending system you already have. This example assumes access to an HTML template; pasting raw tags into an ordinary message composer may display the tags as text.

Start a fresh draft with one column. Put the update first, attendance details second and the confirmation link third. Avoid sidebars, floating captions and a row of competing buttons. Here is an original body fragment, ready to adapt within your sender's document wrapper:

<h1>Repair workshop: venue changed</h1>
<p>Our 14 November workshop will meet at North Hall.</p>
<h2>When and where</h2>
<ul>
  <li>14 November 2026, 10:00–12:00, London local time</li>
  <li>North Hall, 18 Example Street, London</li>
</ul>
<h2>Confirm your place</h2>
<p>Please confirm by 12 November.</p>
<p><a href="https://example.com/workshop">Confirm your workshop place</a></p>
<p>Reply to this email if you need help with access.</p>

Replace the example URL with your real destination before sending. The surrounding document should declare the content language, for example lang="en" on its HTML element. Use actual heading and list elements rather than enlarging ordinary paragraphs to imitate them. The W3C structure tutorial explains how meaningful structure supports orientation and navigation.

Read the fragment from first line to last. Every fact should make sense in that order. If your editor offers only visual blocks, choose its heading and list blocks and inspect the generated HTML when available. A bold paragraph alone does not establish a heading.

Add presentation that can fall away

Give the message a comfortable line length and generous paragraph spacing, but leave the reading order in the HTML. As a starting design choice, try a 16-pixel body font with line spacing around 1.5; these are starting values to inspect, not a universal accessibility guarantee. Let the column shrink to the available width instead of imposing a wide fixed canvas.

Simple inline styles can carry those choices when your template supports them. For example, an outer content container might use font-family:Arial,sans-serif; font-size:16px; line-height:1.5;. Treat spacing and rounded corners as expendable. Essential wording must remain visible if the styling disappears. Avoid inserting repeated spaces to position text.

Choose a readable text/background pair and check its actual color values with a contrast checker. WCAG's contrast explanation specifies at least 4.5:1 for ordinary text and 3:1 for qualifying large text. Using 4.5:1 throughout avoids needing the large-text exception. Keep links underlined and use words such as “Venue changed,” so color is never the only signal.

This fragment does not require a layout table. If your organization's tested template already uses one for email compatibility, preserve its linear reading order and have the template owner review its accessibility. Removing every table without understanding the template can introduce new failures. Rendering support varies, so a browser preview is only an early check.

Give each image a job, then remove it

If the workshop photograph is purely decorative, use an empty alternative: alt="". If a photograph explains a relevant detail absent from the text, describe that detail. For an image that is itself a link, its alternative should communicate the destination or action. These distinctions follow the W3C images tutorial.

For this notice, put the address and entrance instructions in visible paragraphs even if a venue map is included. Do not move the whole announcement into a long alt attribute: that still makes an image responsible for the message. Also avoid assuming that every client will show every alternative cleanly inside a blocked image's reserved space.

Now remove the image blocks from a duplicate draft. Compare what remains against the content contract. Missing address? Restore it as text. Missing registration action? Add a normal text link. Large blank area before the update? Remove the image-dependent spacer or choose a simpler template.

Make the received message earn a pass

Send test copies through the actual sending system to accounts you control. Include a phone and a desktop client used by your audience. Where available, inspect with remote images blocked, enlarged text, and light and dark appearance. Record the clients and conditions actually checked; leave unavailable combinations unverified.

• Message check: without images, locate the change, time, address and deadline. Any missing fact is a failure; repair the text before polishing the design.
• Width check: on the phone, read the full address and link with enlarged text. Clipping, overlaps or sideways scrolling through ordinary paragraphs call for a narrower, flexible container and fewer columns.
• Keyboard check: in a client that supports keyboard navigation, move through the message links. Confirm that focus is visible and the confirmation link opens the intended page. Repair vague labels and unreachable actions.
• Reading check: with a screen reader where available, listen to the order and navigate by headings. A missing heading or repeated image announcement calls for inspecting the delivered markup and alternatives.

Also open the destination as a recipient would. A readable link still fails the task if it leads to an expired form or a page requiring an unavailable account. Check the deadline and venue against the destination, not just against your draft.

Keep a simpler version ready

Review the sender's plain-text alternative, if supported, after the final HTML edit. Preserve the same facts and include the full registration URL, since an HTML link label alone is insufficient there. Read both versions side by side for conflicting dates or old venue details.

If the delivered HTML fails, return to the saved minimal draft and remove the failing decoration or layout. Resend a test through the same route. When an urgent notice cannot be repaired in time, a concise plain-text message with complete facts and a working URL is a practical recovery option.

If an incorrect notice has already gone out, send a clearly titled correction with the corrected fact in the opening line. Do not rely on replacing a remotely hosted banner to reach everyone. Retain the final draft and your actual check notes. Passing these checks improves this message; it does not certify every client or establish complete accessibility conformance.