Accessible Image Alt Text & Image-Off Fallbacks

Provide meaningful alternative text for informative images, null alt attributes for decorative graphics, and styled fallbacks when remote images are blocked.

What it is

Alternative text (alt attribute) provides a textual description of an image’s meaning, content, and function. In HTML email, alt text serves two critical user populations:

Users of Screen Readers: Assistive technologies read aloud the alt string in place of the visual image.
Users with Image-Blocking Enabled: Many enterprise mail clients (desktop Outlook, Thunderbird) block remote images by default until the user clicks “Download Pictures”. When images are blocked, the email client displays the alt text inside the image placeholder box.

<!-- Informative Image with Styled Alt Text -->
<img 
  src="https://example.com/assets/logo.png" 
  alt="Web Specification Studio" 
  width="200" 
  height="48" 
  style="display: block; font-family: sans-serif; font-size: 16px; font-weight: 700; color: #1d4ed8; border: 0;"
>

<!-- Purely Decorative Divider (Null Alt Text) -->
<img 
  src="https://example.com/assets/divider.png" 
  alt="" 
  role="presentation" 
  width="600" 
  height="2" 
  style="display: block; border: 0;"
>

Why it matters

Over 40% of Enterprise Mail Clients Block Images by Default: In corporate B2B environments (Microsoft Exchange, Outlook desktop), remote images are blocked by security policy. Emails containing critical buttons or headings baked into images without alt text render as empty blank white rectangles.
WCAG Compliance & Screen Reader Accessibility: Missing alt attributes force screen readers to announce the raw image URL or filename (<img src="banner_v2_final_compressed.png">), frustrating assistive technology users.
Cumulative Layout Shift (CLS) Prevention: Declaring explicit width and height attributes on every <img> element reserves the necessary layout box in the DOM, preventing jarring layout shifts when images finish loading.

How to implement

1. Distinguish between Informative and Decorative Images:

Informative Images (Logos, charts, product photos, action icons): Provide a concise, descriptive summary of the information conveyed by the visual:
```
<img src="chart.png" alt="Q2 Revenue growth chart showing a 24% increase over Q1." width="400" height="200">
```
Decorative Images (Spacer graphics, borders, background textures, visual flourishes): Set an empty null alt attribute (alt="") and add role="presentation" so screen readers ignore them:
```
<img src="decorative-curl.png" alt="" role="presentation" width="100" height="20">
```

2. Apply Inline Styles Directly to <img> for Image-Off State: When images are blocked, mail clients display the alt text using the CSS typography applied directly to the <img> tag:

<img 
  src="https://example.com/btn-confirm.png" 
  alt="Verify Your Email Address" 
  width="240" 
  height="48" 
  style="display: block; font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; font-weight: 600; color: #1d4ed8; text-align: center; line-height: 48px; background-color: #eff6ff; border-radius: 6px;"
>

3. Always Declare HTML width and height Attributes: Declare explicit dimensions in both HTML attributes and inline CSS styles:

<img src="photo.jpg" alt="Conference Venue" width="560" height="280" style="width: 100%; max-width: 560px; height: auto; display: block;">

4. Never Put Critical Text Inside Images: Always construct buttons and headlines using real HTML text and background colors rather than static graphic images.

Common mistakes

Omitting the alt Attribute Entirely: Omitting alt is an accessibility violation. If the image is decorative, write alt=""; do not omit the attribute.
Redundant Filler Words: Writing alt="Image of our company logo" or alt="Graphic showing...". Screen readers already announce the element as a graphic.
Baking CTA Buttons into Images: Slicing “Click Here to Buy” into an image. When images are blocked, the call to action disappears completely.
Omission of Dimensions: Leaving out width and height, causing image placeholders to collapse into 0x0px pixels when blocked by Outlook.

Verification

1. Test in Image-Off Mode: In Thunderbird or browser DevTools (Disable Images), load the email and confirm that:

Every image placeholder displays styled, legible, and meaningful text.
The overall layout does not collapse or distort.

2. VoiceOver / Screen Reader Verification: Run a screen reader through the email and verify that informative images are announced clearly while decorative graphics are silently skipped.