Eメールマーケティングのアクセシビリティ：コードをよりアクセシブルにするための7つの簡単なコツ
公開: 2019-04-16アクセシビリティは、ユーザーエクスペリエンスやデザインと同様に、急速にメールマーケティングの柱になりつつあります。 身体的、視覚的、または認知的障害があるかどうかにかかわらず、または企業の設定のために電子メールの画像を表示できない場合でも、すべての加入者が電子メールキャンペーンを楽しめるようにするブランドがますます増えています。
Eメールマーケターとして、私たちは皆、購読者の受信箱に素晴らしいEメールを届けるよう努めています。 スパムテストと電子メールテストを実行して、すべてのデバイスと電子メールクライアントでデザインが完全にレンダリングされることを確認します。 ただし、画像にALTタグを設定するのを忘れたり、読みにくい色の組み合わせを使用したり、スクリーンリーダー用にメールを最適化しなかったりすることがあります。これにより、一部のサブスクライバーが疎外されます。
電子メールコードをよりアクセシブルにすることを始めたばかりの場合、物事は圧倒される可能性があります。 ただし、簡単に実装できる簡単なトリックがいくつかあり、電子メールのアクセシビリティに大きな影響を与えます。
すべてのサブスクライバーが電子メールにアクセスできるかどうかをセクションごとに確認する方法は次のとおりです。
 | あなたのメールはアクセス可能ですか？Litmusチェックリストのアクセシビリティチェックにより、主要なアクセシビリティのベストプラクティスに対して電子メールをテストし、改善すべき領域を特定し、すべてのサブスクライバーが電子メールにアクセスしやすくなります。 詳細→ |
アクセシビリティチェックリスト
1. <HTML>に言語コードを追加します
すべてのサブスクライバーがラップトップや電話でメールを読むわけではありません。スクリーンリーダーを使用してメールにアクセスするサブスクライバーもいます。 メールの内容は大声で読み上げられるので、発音が正しくなるように正しい言語である必要があります。フランス語で書かれたメールをアメリカ英語で発音したくないでしょう。
これを防ぐには、メールがどの言語で書かれているかをスクリーンリーダーに知らせる必要があります。メールに言語コードが指定されていない場合、スクリーンリーダーはコピーを正しく発音できず、雄弁なメールが送信される可能性があります。完全に間違って聞こえます。
そのため、<HTML>で言語コードを確認することが重要です。これはメールの言語を指定する単純なコードスニペットです。 それはあなたのコードになっていない場合は、あなたの電子メールのための適切な言語コードで「XX」-replace XX = LANGを追加します。 イギリス英語とアメリカ英語の区別など、さまざまなアクセントを説明できるすべての可能な言語コードと地域のリストは、ここにあります。
考慮すべきいくつかの特別なケースがあります。
- <HTML>タグでXMLを使用している場合は、 xml：lang =“ xx”も追加する必要があります。
- 電子メールコードにOutlook120dpi修正プログラムを含める場合は、言語を指定するためにこのソリューションが必要になります。 この修正でコードがどのように見えるかを次に示します。
<html xmlns_v="urn:schemas-microsoft-com:vml" xmlns_o="urn:schemas-microsoft-com:office:office" lang="en" xml_lang="en">
上級者向けのヒント：ESP内でローカリゼーションを設定している場合は、言語コードを動的に入力することができます。
2.画像には常にALTタグを含めます
電子メールの画像が購読者に常に表示されるとは限らないことに注意することが重要です。 画像がオフになっているか、接続が悪いか、スクリーンリーダーを使用している可能性があります。画像に多くの重要な情報を含めると、そのメッセージは失われます。 そこでALTテキストが登場します。購読者に表示される（またはスクリーンリーダーで読み上げる）テキストを設定して、購読者があなたの画像を見ることができる人と同じメッセージを受け取るようにすることができます。
メールコードに<IMG>タグがある場合は、必ずALTタグを設定してください。 すでにALTタグを入力している場合は、テキストが画像のテキストと一致することを再確認してください。 空のALTタグがある場合は、スクリーンリーダーで表示するために入力する必要のあるテキストが画像にないことを確認してください。 ALT =「」：あなたのイメージにはALTタグと画像自体-かの意味のために必要なテキストなしでテキストなしがない場合は、空のALTタグを追加するために必ず電子メールを-こと。 これを含めない場合、スクリーンリーダーは画像のURLを読み上げます。そして、長いURLが読み上げられることを誰も望んでいません。
メール内の画像にすべてのALTタグ（空かどうか）を設定したら、スタイル付きALTテキストの<IMG>タグにフォントスタイルを追加します。 このスタイリングを使用すると、ALTテキストを使いこなせるようになり、フォント、色、サイズ、スタイル、および太さの外観を変更できます。
3.すべての<TABLE>要素にrole =” presentation”属性を含めます
ほとんどのEメールマーケターはEメールレイアウトを構造化するためにテーブルに依存していますが、それらはスクリーンリーダーに深刻な問題を引き起こす可能性があります。 スクリーンリーダーが電子メールのコード内のテーブルを識別すると、1つとして読み上げられます。 文字通り、行と列の数がわかり、各列の位置と内容がわかり、メッセージを理解できなくなる可能性があります。
そのため、レイアウト目的でのみテーブルを使用していることをスクリーンリーダーに伝えることが重要です。 これを行うには、電子メールのすべてのテーブルにrole =“ presentation”を追加します。 この役割は、スクリーンリーダーに、テーブルから意味的な意味を削除するように指示します。したがって、行番号と列番号を読み取る代わりに、コンテンツに焦点を合わせます。
私たち自身の電子メールの1つからのこの本当に単純な電子メールヘッダーを見てみましょう：
アクセシビリティを最適化する前は、コードは次のようになりました。
<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr> <td align="center" bgcolor="#2f343c" valign="top"> <table class="w100p" width="600" cellpadding="0" cellspacing="0" border="0"><tr> <td class="w100p" width="600" align="center"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td> </td></tr></table> <a href="https://litmus.com?utm_campaign=soeanalytics2019rt&utm_source=email&utm_medium=marketing&utm_content=%%dynamic_content_1456%%"> <img src="https://pages.litmus.com/l/31032/2016-08-16/954sb7/31032/95886/litmus_logo_white.png" width="134" height="50" /> </a> <table cellpadding="0" cellspacing="0" border="0"> <tr><td> </td></tr></table> </td></tr></table> </td></tr></table>ALT属性がなく、テーブルがrole =” presentation”に設定されていないことに気づきましたか？
これらの小さな見落としは、アクセシビリティに大きな影響を及ぼします。 スクリーンリーダーが上記のコードを解釈する方法は次のとおりです。
スクリーンリーダー：アクセスできない電子メールヘッダー
これは、 ALT =””属性とrole =” presentation”を<TABLE>タグに追加してスクリーンリーダーに適したものにすることでリファクタリングされた同じコードです。
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr> <td align="center" bgcolor="#2f343c" valign="top"> <table role="presentation" class="w100p" width="600" cellpadding="0" cellspacing="0" border="0"><tr> <td class="w100p" width="600" align="center"> <table role="presentation" cellpadding="0" cellspacing="0" border="0"> <tr><td> </td></tr></table> <a href="https://litmus.com?utm_campaign=soeanalytics2019rt&utm_source=email&utm_medium=marketing&utm_content=%%dynamic_content_1456%%"> <img src="https://pages.litmus.com/l/31032/2016-08-16/954sb7/31032/95886/litmus_logo_white.png" width="134" height="50" alt="Litmus" /> </a> <table role="presentation" cellpadding="0" cellspacing="0" border="0"> <tr><td> </td></tr></table> </td></tr></table> </td></tr></table>スクリーンリーダー：アクセシブルなメールヘッダー
あなたが聞くことができるように、かなりの違いがあります！
4.セマンティック要素を使用してコンテンツを構造化する
セマンティック要素を使用すると、コンテンツ階層を簡単に強調表示して、購読者（およびスクリーンリーダー）に見出しと段落のコピーを表示できます。 セマンティック要素を含めると、スクリーンリーダーを使用するサブスクライバーは、電子メールをより簡単に「スキャン」することができます。
コピーを再確認するときは、見出しに値するコピーが<H>タグで囲まれていることを確認してください： <H1> 、 <H2> 、 <H3>など。 同様に、本文のコピーが<P>タグ内に格納されていることを確認してください。 メールを読むとき、スクリーンリーダーは特定のヘッダーに重点を置き、これらの<H >タグと<P>タグを設定すると、メールをナビゲートしやすくなります。
5.可能であれば、コピーを左揃えにします
本文に関しては、中央揃えにしたくなるかもしれません。 ただし、アクセシビリティに関しては、これは大きな問題ではありません。
テキストを中央に配置すると、行ごとに開始エッジが変更されるため、サブスクライバーは各行の先頭を見つけるために一生懸命努力する必要があります。これは、失読症やその他の読書障害を持つ人々にとっての課題です。 2行より長いコピーがある場合は、そのコピーを左揃えにします。 これはモバイルにとって特に重要です。幅が狭いと、想像以上に多くのテキスト行が生成されることがよくあるからです。 モバイルでは、それに応じてテキストを左揃えにする必要がある場合があります。
6.コピーのコントラストを確認します
メールの背景色に対するテキストの色のコントラスト比を確認してください。 あなたは色の不足を持っている加入者を持っているかもしれません、そしてあなたの色が彼らに十分なコントラストを提供しないならば、彼らはあなたの電子メールを読むことができないかもしれません。 コントラスト比を確認する方法は2つあります。
- HTMLをホストし、使用するURLを作成できる場合、これは私の色をチェックする私のお気に入りの方法です： http ： //www.checkmycolours.com/
- カラーコードを手動で入力する必要がある場合は、 https：//contrast-ratio.com/をチェックしてください。
7. CTA、リンク、および画像にホバー効果を追加します
リトマスでは、クリック可能性を示すために、CTA、リンク、および画像にホバー効果を使用しています。 ホバー効果は、メールをより魅力的にし、サブスクライバーのエクスペリエンスを向上させることができるシンプルなインタラクティブ要素です。 ホバー効果はAOL、Apple Mail、Gmail、Yahoo！でのみサポートされていますがメール、それらは人気のある効果であり、あなたの電子メールコードに実装する価値があります。 画像をフェードしたり、CTAボタンの色を変更したり、ポップアップタブを追加したりできます。 
LitmusBuilderでメール全体を見る→
メールのヒントがもっと必要ですか？
 | 電子メールのアクセシビリティに関する究極のガイドこのガイドには、能力に関係なく誰でも楽しめる電子メールの作成、設計、およびコーディングに必要な洞察と段階的なアドバイスが含まれています。 電子ブックをダウンロード→ |
最高のEメールマーケティングとデザインのヒント、統計、およびリソースを受信トレイに直接入手し、LitmusNewsにサインアップするときにEメールイノベーションの最前線にとどまります。
知っておく→