• メールの内容を論理的に構造化するために、セマンティックHTMLタグを活用しましょう。異なるセクションを定義するために見出し（

  から

  まで）を使用し、テキストブロックには段落（

  ）を使用し、適切な場所にはリスト（

  、
  、
  1. ）を適用します。この堅牢なセマンティック構造は、スクリーンリーダーがユーザーに正確に情報を伝えるために重要です。
• コンテンツが自然な読み順に従うようにします（左から右への言語の場合、上から下、左から右）。これは特にレスポンシブデザインにおいて重要です。なぜなら、コンテンツの再配置が意図された順序の表示を妨げる可能性があるからです。

コンテンツ内の見出しを示すために、太字やフォントサイズの拡大などの視覚的なスタイリングのみに頼らないでください。代わりに、実際のセマンティック見出しタグ（例：

、

、

）を使用してください。

言語宣言

メールの言語を タグで指定してください（例： ）。 これにより、スクリーンリーダーが正しい発音を使用するのに役立ちます。

レイアウト用のテーブル（注意して使用）

• HTMLメールを作成する際、メールクライアント間でのCSSサポートの不一致により、意味的なデータプレゼンテーションよりもレイアウトにテーブルを使用する必要があることがよくあります。そのような場合に最適なアクセシビリティとユーザーエクスペリエンスを確保するために:
  タグに role="presentation" 属性を追加してください。
  この属性は、支援技術に対してテーブルを構造化データテーブルではなく、視覚的なレイアウト要素としてのみ解釈するように明示的に指示します。その結果、支援技術は混乱を招く列数や行数を発表しないため、スクリーンリーダーに依存するユーザーにとっての明確さが大幅に向上します。
• 表内のコンテンツが論理的一貫性を保ち、線形化した場合（セルごと、行ごとに読む）でも理解可能であることを確認してください。これにより、支援技術による効果的な解釈が保証され、ユーザーエクスペリエンスが向上します。
• HTMLメールの基本的なレイアウト要件では、 要素よりもセマンティックHTML構造を優先してください。 希望する視覚的な結果を達成しながら、明確で論理的なコンテンツの流れを維持するために、インラインスタイルを使用した
  要素を使用します。

過度に

テキストコンテンツ

• 明確で簡単な言葉を使うようにしてください。この実践は可読性を高め、すべてのユーザーがメッセージを簡単に理解し、効率的に処理できるようにします。
• 過度な大文字と感嘆符の使用を制限してください。このような使用は、受信者に対してテキストが叫んでいるように感じさせる可能性があり、スクリーンリーダーがコンテンツを誤解したり誤って発音したりする原因となり、アクセシビリティを低下させます。

• 過度な大文字や感嘆符の使用は、叫んでいるように受け取られることがあり、スクリーンリーダーによって誤読される可能性があります。
• 重要なテキストを画像内に埋め込まないでください。代わりに、すべての重要な情報が実際のHTMLテキストとして存在することを確認してください。この実践は、支援技術によるコンテンツのアクセシビリティと適切な解釈を保証します。

画像とメディア

画像の代替テキスト（Alt Text）

• すべての情報画像に対して、常に説明的な代替テキスト（altテキスト）を提供してください。例えば：
  。この属性は、スクリーンリーダーが視覚障害者に画像の内容を音声で伝え、メールクライアントが画像をブロックしたときに意味のある情報を表示することを保証します。
• 画像が純粋に装飾目的で使用され、追加の情報を提供しない場合は、空の alt 属性 (alt="") を実装します。これにより、支援技術が画像を読み上げるのを防ぎ、不必要な聴覚的な混乱を避けることができます。
• 画像がリンクとして機能する場合、altテキストがリンクの目的地またはアクションを説明していることを確認してください。例えば:

画像の使用

色のコントラスト

テキストと背景の間に強い色のコントラストを維持してください。通常のテキストでは最低でもWCAG AA比4.5:1、大きなテキスト（18ptまたは14ptの太字）では3:1を目指してください。オンラインのコントラストチェッカーを利用してコンプライアンスを確認します。

重要な情報を伝えるために、色だけに頼らないでください。例えば、エラーを示す際には、色付きのテキストに加えて（またはそれに代えて）、必ずアイコンやテキストインジケーターを添えてください。

フォントとサイズ

• ウェブセーフフォントを利用するか、メールコンテンツのために堅牢なフォントフォールバックを定義してください。エディターは多くのフォントをサポートしていますが、Outlookのようなクライアントではカスタムフォントのサポートが限られています。
• 読みやすさのために十分に大きなフォントサイズを使用してください。本文のテキストには、14pxから16pxの最小値が推奨される開始点として役立ちます。
• ユーザーまたはメールクライアントによるテキストのリサイズに対応し、レイアウトを損なわないようにメールコンテンツをデザインします。

レイアウトと間隔

パディングと空白を効果的に活用して、読みやすさを向上させ、コンテンツブロックを視覚的に分離します。Gmailでのメールのクリッピングを避けるために、区切り行の代わりにパディングを実装します。

リンク（CTA）

• リンクの目的や行き先を明確に示す説明的なリンクテキストを使用してください。例えば、「ここをクリック」ではなく「夏のコレクションを見る」を使用してください。
• リンクが周囲のテキストから視覚的に区別できるようにしてください。それらを下線で引くか、コントラストの良い独自の色を使用してください。
• メール本文内のクリック可能なリンクの数を最小限に抑えます（ヘッダーおよびフッターのリンクを除く）。これらを3〜5に制限して、コンテンツの膨張やメールのクリッピングを防ぎましょう。

背景画像にリンクを追加しないでください。このプラクティスは、誤ってクリックしてしまうことや、ユーザーエクスペリエンスの低下につながる可能性があります。

ボタン

• HTMLボタンを画像ベースの代替品より優先してください。これらのボタンには明確なテキストラベルを付け、ユーザーが最適に操作できるように十分なタッチターゲットサイズを維持してください。
• ボタンのテキストと背景の間に十分なコントラストを提供して、読みやすさを確保してください。

HTMLおよびCSSの実践

CSS

メールクライアント全体で広くサポートされていないCSSプロパティ（例：flexbox）を使用しないでください。代わりに、

ダークモード

テスト

メールクライアントとデバイス全体でテストする

• さまざまなメールクライアント（例：Outlook、Gmail、Apple Mail）やデバイス（デスクトップ、モバイル、タブレット）でメールを徹底的にテストしてください。この実践は非常に重要です。なぜなら、レンダリングは大きく異なる場合があるからです。
• スクリーンリーダー（NVDA、VoiceOver、TalkBack）などの支援技術を使用してメールをテストします。このプロセスは、これらのツールがあなたの電子メールの内容をどのように認識しているかを理解するのに役立ちます。
• 画像が無効になっているときにメールがどのように表示されるかを確認してください。