メールのアクセシビリティガイドライン、またはメールを誰にとっても使いやすいものにする

電子メールのアクセシビリティは、障害を持つ人々を含むすべての人にとって電子メールをユーザーフレンドリーにします。これにより、電子メールを認識し、簡単にやり取りできるようになります。

メールにアクセスしやすくするためにできるデザインとコピーの調整がいくつかあります。 この記事では、アクセシビリティの採用がメールキャンペーンにどのように影響するか、なぜそれが重要なのか、そしてそれを実践する方法について説明します。

アクセシビリティが重要な理由

では、なぜアクセシビリティについて心配する必要があるのでしょうか。また、アクセシビリティがあなたとあなたのビジネスにどのようなメリットをもたらすのでしょうか。 いくつかの事実を見てみましょう：

1. 一般に、世界の人口の15％、つまり10億人が何らかの障害を持っています。 世界保健機関によると、世界中で約13億人が何らかの形の視覚障害を抱えて生活しています。3600万人がまったく見えず、2億1700万人が中等度から重度の視覚障害を持っています。 お分かりのように、非常に多くの人が、デバイスとのやり取りやメールの閲覧など、日常のさまざまなことに問題を抱えている可能性があります。
2. それとは別に、障害者市場は年間可処分所得で1.2兆ドルに相当します。
3. Cone Communicationsによる最近の調査によると、アメリカ人の78％は企業が社会問題に取り組むことを望んでおり、87％は個人的に関心のある問題をサポートする企業から製品を購入するでしょう。

したがって、電子メールアクセシビリティを採用することで、視聴者を広げ、より多くの利益を得るための新しい機会を開くだけでなく、一人ひとりへの敬意と配慮を示すことができます。これにより、社会的責任のあるユーザーや障害を持つ人々の目から見た信頼性が高まります。

アクセシブルなメールを作成する方法

このセクションでは、すべての人がメールにアクセスしやすくするために役立つ7つの要素について説明します。

• 構造;
• コード;
• 代替テキスト;
• リンクとボタン;
• フォント;
• 色;
• ズームインとズームアウト。

これらの要素に加えて、ワールドワイドウェブコンソーシアムによる基準リストのアクセシビリティガイドラインを確認することをお勧めします。これは、障害を持つ人々がWebコンテンツにアクセスできるようにするのに役立ちます。

構造

まず、スクリーンリーダーが左から右、上から下に理解するように、メールの内容を論理的な順序で配置するようにしてください。 メールを声に出して読んで、画像を見なくてもコピー自体を理解しやすいかどうかを確認してください。

たとえば、Collaborative Fundはメールの論理構造を適切に維持しているため、目やスクリーンリーダーで簡単にフォローできます。

失読症や認知障害のある人にとって、大きくて複雑なテキストを理解するのは難しいかもしれません。 そのため、コピーの要点をまっすぐに理解し、文章を短くして、長い単語や専門用語を避けることをお勧めします。 1つの文内に1つの考えを配置し、1つの段落内に1つのトピックを配置します。

テキストの読みやすさをテストするには、Readableなどのサービスを使用します。 そこにテキストを貼り付けると、ツールが自動的に長い文や複雑な単語を強調表示し、より簡単な代替案や類義語を提案します。 Readableの動作をご覧ください。

コード

次に、コードを見てください。 h1 、 h2 、段落タグpなどの見出し要素が必要です。 これにより、スクリーンリーダーがメールをナビゲートできるようになります。 言語HTMLタグlang=””を使用すると、支援技術はコンテンツに使用する言語プロファイルを理解できます。 すべてのHTML言語タグのリストに移動して、必要な言語のコードを見つけます。

コードをクリーンアップし、閉じられていないタグやその他の問題がないことを確認するには、さまざまな電子メールテストツールを使用できます。

たとえば、コンテンツをビジュアル形式またはオーディオ形式で正しく表示する際の問題を回避するために、ダーティマークアップを試すことができます。 コードを貼り付けて、[クリーン]をクリックするだけです。

代替テキスト

画像には常に詳細な代替テキストまたは代替テキストを含めてください。支援技術を使用している、または画像をオフにしているサブスクライバーが全体的なコンテキストを理解できるように、画像の目的または意味を伝える必要があります。

Messy Nessy Chicの例では、メールフッターのソーシャルメディアボタンを含め、すべての画像に代替テキストが含まれていることがわかります。

メールに装飾画像（視覚的なデザインに使用され、特定の意味を割り当てていない画像）が含まれている場合は、空の属性alt=””を追加する必要があります。 これにより、スクリーンリーダーは画像をスキップします。

リンクとボタン

コピーに関しては、「ここをクリック」のようなテキストを避け、文の文脈にハイパーリンクを配置してください。 これにより、ユーザーはリンクがリダイレクトする場所を簡単に理解できるようになります。 また、リンクは周囲のテキストと区別できる必要があることを忘れないでください。

InsightTimerの例を見てください。 クリーンなハイパーリンクテキストを使用しているため、自分でメールを読むことができない人でも理解しやすいでしょう。

召喚ボタンについては、どのデバイスでも親指でタップできる大きさにしてください。 誤ってタップしないように、ボタンを十分な空白で囲みます。

フォント

アクセシブルなメールのフォントサイズは14px以上にする必要があります。 さらに、ほとんどのデバイスとオペレーティングシステムで正しく表示されるWebセーフフォントを使用する必要があります。 これらのフォントは、Arial、Comic Sans、Courier New、Georgia、Impact、Palatino、Tahoma、Trebuchet MS、Times New Roman、およびVerdanaです。 メールに最適なフォントの選択について詳しくは、ブログをご覧ください。

さらに、テキストの左揃えを適用することをお勧めします。 読んでいる間、それぞれの新しい行の始まりは私たちの目のアンカーとして機能します。 配置が中央に配置されると、すべての線が異なるポイントから始まり、ユーザーはある線から別の線にジャンプします。 位置合わせを正当化すると、単語間の間隔は毎回異なります。 そのため、視覚的なアンカーを同じ場所に保持するか、左側の配置を使用することが、読みやすくするための最良の選択です。

また、テキストを見出し、引用符、その他の種類の書式で分割することをお勧めします。

Brain Pickingsは、ほとんどがテキストで構成される非常に長くてコンテンツの多い電子メールを提供しますが、フォーマットの選択により、それらを「ダイジェスト」するのは簡単です。

色

まず、視力に問題のある人がメールにアクセスできるように、メールの色が十分に対照的であるかどうかを確認する必要があります。 たとえば、通常のテキストの比率は少なくとも4.5：1で、拡大テキストの比率は3：1にすることをお勧めします。これは、見出しでよく使用されます。

電子メールのアクセシビリティに関して良好なコントラストを確認するには、TanaguruやWebAIMなどのツールを使用できます。 前景と背景のコントラスト比を確認できます。 アクセシブルな色は、メールを理解しやすいかどうかを確認するためのもう1つの優れたオプションです。

たとえば、標準の黒のテキストと白の背景の組み合わせを確認すると、コントラスト比が21：1と非常に高いことがわかります。 ただし、背景色をオレンジに変更すると、比率は10.63：1に低下します。

ズームインとズームアウト

ロービジョンユーザーの場合、ズーム設定は、画面上のテキストやその他の視覚要素のサイズを大きくするためによく使用されます。 したがって、コンテンツの品質を損なうことなく、電子メールを少なくとも200％にズームできるかどうかを確認してください。

以下に、200％にズームしたFuturメールの断片を示します。すべてのメールコンテンツは表示されたままで、はっきりと読むことができます。

概して

アクセス可能な電子メールを作成するときは、次の点に注意してください。

1. 電子メールの論理的な読み取り構造を維持します。
2. 支援機器に必要な適切なタグが付いたクリーンなコードを使用してください。
3. ソーシャルメディアボタンやロゴなど、各画像の有益な代替テキストをメールに含めます。
4. すべてのリンクとボタンが使用可能であるか、操作しやすいことを確認してください。
5. フォントを14px以上に保ち、適切なフォーマットを使用して、テキストを左揃えにします。
6. 背景色と前景色のコントラストをよくします。
7. コンテンツを失うことなく、コンテンツを少なくとも200％にズームできることを確認してください。

事前の経験なしに電子メールのアクセシビリティを実装することは困難な場合があります。 ただし、その潜在的な影響を分析すると、この作業を行う価値があることは明らかです。 SendPulseを試して、クリーンでアクセス可能な電子メールテンプレートを作成し、すべてのサブスクライバーに送信してください。