HTML メールのアクセシビリティ: 開発者ガイド
障害を持つユーザーも含め、すべての人に動作するメールを作成します。
世界人口の約15%が何らかの障害を抱えて生活しています。多くの人がスクリーンリーダーなどの支援技術を使用してメールにアクセスします。アクセシブルなメールデザインは倫理的であり、実用的でもあり、しばしばすべての人の体験を向上させます。
メールのアクセシビリティには独自の課題があります。クロスクライアント互換性のために必要なテーブルベースのレイアウトは、スクリーンリーダーを混乱させる可能性があります。このガイドでは、すべてのユーザーが使用できるメールを作成するためのテクニックを紹介します。
セマンティック構造
ロール属性を使用する
レイアウト用のテーブルには、スクリーンリーダーにデータテーブルではないことを伝えるために role="presentation" を指定します：
<table role="presentation" width="100%">
<tr>
<td>
Layout content here
</td>
</tr>
</table>この属性がない場合、スクリーンリーダーはテーブルナビゲーション（「行1、列1」）を発表し、レイアウトテーブルでは混乱を招きます。
適切な見出し階層
見出し要素（h1、h2、h3）を論理的な順序で使用します：
<h1 style="font-size: 24px; margin: 0;">Welcome to Our Service</h1>
<p>Introduction paragraph...</p>
<h2 style="font-size: 20px; margin: 20px 0 10px 0;">What's New</h2>
<p>Feature description...</p>
<h2 style="font-size: 20px; margin: 20px 0 10px 0;">Getting Started</h2>
<p>Instructions...</p>スクリーンリーダーのユーザーは見出しでナビゲーションします。適切な階層により、文書構造を理解し、関連するセクションにジャンプしやすくなります。
セマンティック要素を使用する
サポートされている場合は、セマンティックHTMLを使用します：
- <p> で段落
- <ul>/<ol> でリスト
- <strong> で重要なテキスト
- <em> で強調
画像と代替テキスト
意味のある代替テキスト
すべての画像に適切な代替テキストが必要です：
<!-- Informative image: describe the content -->
<img src="product.jpg" alt="Blue running shoes with white soles" />
<!-- Decorative image: empty alt -->
<img src="divider.png" alt="" />
<!-- Image with text: include the text -->
<img src="sale-banner.jpg" alt="50% off all items this weekend" />ガイドライン：
- 画像が何を示しているかを記述し、画像であることを記述しない
- 代替テキストを簡潔に（125文字未満）
- 装飾画像には alt="" （空、省略しない）を使用
- 画像にテキストが含まれる場合は、そのテキストを alt に含める
画像だけに頼らない
一部のユーザーは画像を無効にしています。重要な情報は画像ではなくテキストで提供します。画像ボタンを使用する場合は、テキストリンクのフォールバックを含めます。
色とコントラスト
十分なコントラスト比
WCAG 2.1 では最小コントラスト比を要求しています：
- 通常テキスト: 4.5:1 のコントラスト比
- 大テキスト（18px以上または14px以上太字）: 3:1 の比
<!-- Good contrast -->
<p style="color: #333333; background-color: #ffffff;">
High contrast text
</p>
<!-- Poor contrast (avoid) -->
<p style="color: #999999; background-color: #ffffff;">
Low contrast text
</p>WebAIM のコントラストチェッカなどのコントラスト確認ツールを使用して検証します。
色だけを使用しない
色を情報伝達の唯一の手段にしないでください：
<!-- Bad: color only -->
<span style="color: red;">Error</span>
<!-- Good: color plus icon/text -->
<span style="color: red;">⚠ Error: Invalid email address</span>リンクとボタン
記述的なリンクテキスト
リンクテキストは宛先を記述するものにします：
<!-- Bad -->
<a href="...">Click here</a>
<!-- Good -->
<a href="...">View your order details</a>
<!-- Good -->
<a href="...">Download the 2026 report (PDF, 2MB)</a>スクリーンリーダーのユーザーはリンクでナビゲーションします。「ここをクリック」を複数回繰り返すのは役に立ちません。記述的なテキストにより、ユーザーは各リンクの行き先を理解できます。
フォーカスインジケーター
リンクとボタンにはキーボードユーザー向けに視覚的なフォーカス状態が必要です。メールクライアントの対応が不均一ですが、試すことができます：
<a href="..." style="outline: 2px solid #007bff;">
Link text
</a>言語と読みやすさ
言語を宣言する
文書の言語を指定します：
<html lang="en">スクリーンリーダーはこれを使用して正しい発音を選択します。他の言語のコンテンツには、特定の要素に lang 属性を使用します：
<p>The French word <span lang="fr">bonjour</span> means hello.</p>読みやすいフォントサイズ
本文テキストは最低14px、できれば16px。行の高さを1.4〜1.6にすると読みやすさが向上します：
<p style="font-size: 16px; line-height: 1.5;">
Body text that is easy to read
</p>アクセシビリティのテスト
スクリーンリーダーテスト
可能であれば実際のスクリーンリーダーでテストします：
- VoiceOver (macOS/iOS): ビルトイン、Cmd+F5 で有効化
- NVDA (Windows): 無料、広く使用
- JAWS (Windows): 業界標準、有料
メールがどのように発表されるかを聞きます。構造は明確ですか？画像は記述されていますか？リンクは意味がありますか？
自動テスト
Litmus や Email on Acid などのツールにはアクセシビリティチェッカーが含まれています。欠落した代替テキストやコントラスト問題などの一般的な問題を検出します。
メールビルダーとアクセシビリティ
優れたメールビルダーは一部のアクセシビリティを自動的に処理します。Sequenzy などの類似プラットフォームは、レイアウトテーブルに role="presentation" を追加し、画像に代替テキストを促し、セマンティックHTMLを生成します。
MJML などのフレームワークはデフォルトでアクセシブルな出力を生成します。コンポーネントはスクリーンリーダーを考慮して設計されています。
アクセシビリティチェックリスト
送信前に：
- すべてのレイアウトテーブルに role="presentation" が付与されている
- すべての意味のある画像に記述的な代替テキストがある
- 装飾画像に空の alt="" がある
- 見出しが論理的な順序 (h1、h2、h3) になっている
- 色コントラストが WCAG 要件を満たしている
- リンクに記述的なテキストがある
- 言語が宣言されている
- フォントサイズが最低14pxである
結論
基本を理解すれば、アクセシブルなメールは難しくありません。セマンティック構造を使用し、代替テキストを提供し、コントラストを確保し、記述的なリンクを書きます。これらの手法は障害を持つ人だけでなくすべてのユーザーに利益をもたらします。
メールビルダーやフレームワークを使用する場合は、アクセシビリティのベストプラクティスに従っているかを確認します。優れたツールはアクセシビリティを容易にします。Sequenzy などの現代的なプラットフォームはデフォルトでアクセシビリティ機能を備えています。