アクセシブルなメールへの究極のガイド

公開: 2017-02-27

Eメールマーケターとして、私たちは購読者に完璧なEメール体験を提供するよう努めています。分析に基づいてメールが適切なタイミングで送信され、配信可能性を監視してスパムテストを実行することにより、メールが受信トレイに配信されるようにします。私たちは、コンテンツをより関連性の高いものにパーソナライズし、デザインをいじくり回して、メールが無数のデバイスやすべてのメールクライアントで完全に表示されるようにします。

これらはすべて、メールが確実にコンバージョンにつながるようにするための推奨手順です。ただし、購読者のかなりの部分、つまり視覚的、身体的、または認知的および神経学的障害を持つ人々は、電子メールを見逃す可能性があります。

すべてのサブスクライバーが電子メールにアクセスしやすくするために、いくつかの小さな手順を実行するだけです。この投稿では、これらの手順とは何か、そしてそれらがどのようにしてすべての人にとって電子メールを改善できるかについて説明します。

あなたのメールはアクセス可能ですか？

Litmusチェックリストのアクセシビリティチェックにより、主要なアクセシビリティのベストプラクティスに対して電子メールをテストし、改善すべき領域を特定し、すべてのサブスクライバーが電子メールにアクセスしやすくなります。

詳細→

アクセシビリティとは何ですか？

アクセシビリティは、ユーザーエクスペリエンスとデザインの基礎となる柱の1つとして機能します。電子メールの場合、使用している可能性のある障害や支援機器に関係なく、すべての人がメッセージを受信して理解できるようにすることを意味します。

電子メールのアクセシビリティは、サポートが不十分な電子メールクライアントへの対応の延長と考えることができます。回避策とフォールバックを含めることで、すべてのサブスクライバーが前向きなエクスペリエンスを確実に受けることができます。

メール開発者として、市場シェアが1％未満のクライアントでメールを適切に表示するために何時間も費やしていますが、メールにアクセスできるようにするために数分を費やす人はほとんどいません。
– Mark Robbins、Rebelmail

電子メールデザインのアクセシビリティ

アクセシビリティに影響を与える可能性のある電子メールの視覚的側面と、どこを改善できるかを見てみましょう。

色をインテリジェントに使用する

色覚異常のある購読者は、電子メールの一部の色を区別できない場合があるため、情報が伝達される方法が色だけではないことを確認してください。

色のコントラストは、視覚障害のある加入者にも問題を引き起こす可能性があります。電子メールのさまざまな要素間、特にコピーと背景色の間で高い色のコントラストを使用します。これを行う1つの方法は、WebAimのカラーコントラストチェッカーを使用して、電子メールの色のコントラスト比をチェックすることです。

あなたのメールはアクセス可能ですか？

Litmus Email Previewsの色覚異常フィルターを使用して、視覚障害のあるユーザーの電子メールがどのように見えるかを確認します。

Litmusを無料でお試しください→

有害なコンテンツを作成しないでください

アニメーションGIFなど、特定の速度またはパターンで点滅するコンテンツは、一部の個人に感光性の発作を引き起こす可能性があります。コンテンツをフラッシュしたり、同様のコンテンツを含む可能性のある動画へのリンクを含めたりしないでください。

テキストと画像のバランスをとる

目の見えるユーザーは関連性のないコンテンツを視覚的にスキャンしたりスキップしたりできますが、目の不自由なユーザーは一度に1通ずつメールのコンテンツ全体を聞く必要があります。メールに書かれた内容を調整して、メインメッセージを配信します。また、デザインがJAWSやWindow-Eyesなどの一般的なスクリーンリーダーとどの程度互換性があるかを検討してください。

メールの読みやすさを向上させる

より大きなフォントサイズを使用する

デスクトップまたはラップトップの画面で14ピクセルよりも小さいものは、読むのに多少の努力が必要です。ユーザーはデバイスのズームレベルを上げて画面を読みやすくすることができますが、これはメールに悪影響を及ぼし、壊れたり途切れたりする可能性があります。

モバイルデバイスではテキストが小さく表示される可能性があるため、ユーザーはメールを読みにくくなります。メディアクエリを使用して、ユーザーがメールを読みやすくするために、小さいデバイスで最小フォントサイズを14ピクセルから16ピクセルに増やします。

 @media screen and (max-width: 600px) { p.mobile {font-size: 16px;}}

呼吸するためにあなたのコピースペースを与えなさい

一部の人にとっては、コピーの行が互いに接近して配置されている段落やテキストのブロックを読むのが難しい場合があります。すべての人が読みやすいように、テキストに適切な行の高さを設定します。フォントサイズより4ピクセル大きい行の高さを選択することをお勧めします。

 <p style=”font-size:14px; line-height:18px;>Paragraph with font-size and line-height set</p>

ヒント：モバイルデバイスのフォントサイズを大きくするときは、行の高さも大きくすることを忘れないでください。

コピーの段落には、読みやすくするために呼吸する余地も必要です。電子メールをスキャンするときは、段落を簡単に識別でき、場所を維持できる必要があります。段落の上下に十分な空白を作成します。

テキストを読みやすくするためのもう1つのステップは、テキストを電子メールの端から離すことです。表のセルまたは段落タグにパディングを追加すると、これを実現するのに役立ちます。

あなたの電子メールで正当化されたコピーを避けてください

「ジャスティファイド」コピーとは、テキストが左右の余白と同じ高さになるように、文字と単語の間隔が調整されることを意味します。印刷物では一般的ですが、一貫性のない単語間隔は、正当化されたコピーを読みにくくする可能性があります。左揃えのテキストは、すべての人にとって読みやすいことが証明されています。

適切な書体を選択してください

Webフォントを使用することで、電子メールで使用できる書体のプールが増えましたが、ボディフォントとしてLobsterを使用することを決定する前に、それがどれほどアクセスしやすいかを考えてください。電子メールの書体を選択するときは、等間隔で凝縮されすぎないものを選択してください。これは、アクセシビリティだけでなく、モバイルユーザーにとっても良い考えです。

セマンティック要素を使用する

セマンティック要素を含めると、スクリーンリーダーを使用するサブスクライバーは、ヘッダーごとに電子メールを「スキャン」することができます。これは、<p>タグと<h>タグを使用して行うことができます。これらはすべてのクライアントでサポートされているため、電子メールをよりアクセスしやすくするための開始点として適しています。

歴史的に、<p>タグと<h>タグのスタイル設定は簡単ではありませんでした。そのため、これらのタグが電子メールで使用されているのを見るのはまだかなり珍しいことです。これらのタグのいずれかにラップされたテキストの周囲のマージンは管理が困難でしたが、次のようなコードを使用すると、その空白を制御できます。

 <h1 style=”mso-line-height-rule:exactly; Margin:0; font-size:24px; line-height:28px;”>This is a title in an email</h1>

 <p style=”Margin:0; font-size:14px; line-height:18px;”>And this is the paragraph</p>

ヒント： mso-line-height-rule：exactly;を使用します。 <h>タグでは、MicrosoftOutlook電子メールクライアントで設定した行の高さのルールが維持されます。

メール開発者のPaulAiryが、メールでセマンティックHTML要素を使用してアクセスしやすくする理由と方法について説明しているLitmus Live2017のこのクリップをご覧ください。

このビデオをツイートする→

LitmusLiveの専門家から学ぶ

Litmus Liveカンファレンスに参加するときは、実際のアドバイス、ベストプラクティス、実用的なポイントを使って、より優れたメールマーケティング担当者になりましょう。

詳細→

読み取り可能なコピーを書き込む

よりアクセスしやすく読みやすい電子メールを作成することは、電子メールのコーディング方法だけでなく、コピーの作成方法にも依存します。電子メールのコピーをより人間味のあるものにすることは、その読みやすさを助け、あなたとあなたの購読者の間の1：1のコミュニケーションを構築するのに役立ちます。

Flesch-Kincaid Reading Easeテストとして知られる最も人気のあるテストは、Microsoft Wordにあり、コンテンツの読みやすさを0〜100のスケールで計算します。つまり、次のことを意味します。

90-100のスコアは、11歳の学生が簡単に理解できます。
60〜70のスコアは、13〜15歳の学生が簡単に理解できます。
30-50のスコアは大学生によって理解されます
0〜30のスコアは、大卒者によりよく理解されます

何かをより「読みやすく」することは、トリッキーなトピックや重要な主題から遠ざかることを意味するものではありません。あなたの文章を呟くのではなく、それはテキストのアクセシビリティを指します。あなたのスイートスポットは、一般の聴衆を捕らえるために60から70の間のどこかにあります。もちろん、聴衆が高度な教育を受けている場合は、より複雑な言語を使用することを恐れないでください。

コピーを直接かつ的確に編集することで、読みやすさを向上させることもできます。

アクセシブルなコンテンツを作成する

リンクをクリック/タップ可能にする

防弾ボタンのサイズがモバイルデバイスの親指や指で使用できる大きさであることを確認すると、電子メールのアクセシビリティにも役立ちます。大きなボタンは、マウスを正確に制御できない人にとって有益です。

私は大きなボタンが好きで、嘘をつくことはできません。
–ジャスティン・ジョーダン、リトマス

AppleのiPhoneヒューマンインターフェイスガイドラインでは、ボタンの最小幅と高さを44ピクセルにすることを推奨していますが、この数はモバイルデバイスのベンダーによって異なります。別の経験則では、72ピクセルの最小幅と高さを使用します。これは、親指の平均ピクセル幅です。

「ここをクリック」リンクコピーを廃止する

リンクのコピーとして「ここをクリック」を使用することは避けてください。スクリーンリーダーのユーザーは、メールをスキャンする方法としてコンテンツをスキップして、コンテンツをタブで移動することがよくあります。リンクコンテキストを提供すると、これらのユーザーがクリックスルーするかどうかを決定するのに役立ちます。

たとえば、靴の商品リストに移動するリンクがある場合、「もっと靴を見る」などのリンクコピーを使用すると、スクリーンリーダーユーザーにとってのリンクのあいまいさが軽減されます。リンクのあいまいさを減らすことは、リンクを取り巻くコンテキストを読む必要がないため、すべてのサブスクライバーにとって有益です。これは、すべてを取り込むことなく定期的に電子メールをスキャンするユーザーにとって有益です。

アクセシビリティだけでなく、「ここをクリック」リンクを削除すると、メールコンテンツがデバイスに依存しないようになります。「ここをクリック」は、ラップトップまたはデスクトップを使用している加入者には意味がありますが、タップが必要なアクションであるモバイルデバイスまたはタブレットを使用している人には意味がありません。

ALT属性を正しく使用する

ALT属性は、HTMLメールの黎明期からメールのベストプラクティスでした。これは、メールクライアントがデフォルトで画像をブロックしているためです。画像に添付されたALT属性で使用されるテキストは、画像が読み込まれないときに表示されます。これにより、サブスクライバーは、電子メールクライアントでデフォルトで画像がオフになっている場合、またはスクリーンリーダーを使用して電子メールを読んでいる場合に、電子メールを「見る」ことができます。

ALT属性を正しく使用するには、画像のコンテキストを周囲のコンテンツとの関連で完全に理解する必要があります。まず、画像が機能的、例示的、または装飾的であるかどうかを判断する必要があります。

すべての画像にはALT属性が必要であるため、スクリーンリーダーで読み取る必要がない画像や、サブスクライバーにとって重要なものを表す画像には、nullのALT属性を使用する必要があります。

すべての画像をオフにしてメールを表示すると、ALT属性が必要な画像と、null属性を持つことができる画像を判断するのに役立ちます。

コンテキストが画像のALT属性の使用をどのように通知するかをより深く理解するには、ALT属性に関するWebAimのページにアクセスしてください。

すべてのプレゼンテーションテーブルでrole =” presentation”を使用します

電子メールのデザインでは、テーブルを使用してコンテンツを保持し、電子メールのデザインを構造化します。テーブルは、設計に使用することを意図したものではありません。ただし、Outlookなどの電子メールクライアントの制限により、電子メール設計者は<table>要素を設計要素として使用することを余儀なくされています。

スクリーンリーダーがコンテンツを保持する<table>要素と純粋に設計用の要素の違いを理解できるようにするには、サブスクライバーが読み取る必要のあるコンテンツを保持する各テーブルでadd role =” presentation”を使用します。すべての<td>ではなく、各<table>要素に追加するだけで済みます。これにより、スクリーンリーダーがテーブルの各セルを一度に1つずつ読み取る必要がなくなり、サブスクライバーが重要なコンテンツに直接アクセスできるようになります。

role =” presentation”に加えて、aria-hidden =” true”は、ビジュアルコンテンツ用であり、スクリーンリーダーから非表示にする必要があるHTMLの要素に追加できる別のHTML属性です。

 <table role="presentation" aria-hidden="true" cellpadding="0" cellspacing="0" border="0"> <tr> <td></td> </tr> </table>

role =” presentation”は画像にも使用できます。メール開発者のRemiParmienterは、MacOS用のスクリーンリーダーアプリケーションであるVoiceOverのユーザーがChromeで異常な動作をすることを発見しました。 VoiceOverは、ALT属性が存在するが空であっても、画像のファイル名の読み取りを開始しました。画像の名前が読み取られないように、ALT属性が空の画像ではHTML属性role =” presentation”を使用することをお勧めします。

アクセシブルなメールの実際

課題を超えて見れば、ある程度のアクセシビリティを実装できます。できないことではなく、できることに焦点を合わせます。
–ポール・エアリー、封筒を越えて

Litmusコミュニティのメンバーは、アクセス可能な電子メールを作成するためにコミュニティコンテストに参加しました。提出物は、新しい聴衆に電子メールを開くために取ることができる小さなステップを示しました。

この電子メールの購読者は、電子メールのデザインを壊すことなく、ブラウザを介してテキストサイズを最大200％増やすことができます。また、写真に敏感な発作に苦しむ人々のために、3サイクル後（5秒以内）に停止するアニメーションGIFを備えています。

Eyal Bittonは、コンテキストから意味のあるリンクにコピーを使用する電子メールを作成し、Eyalは、非表示のテキストを使用して、電子メールの終了を盲目のサブスクライバーに通知します。

タイプEのニュースレターは、インタラクティブなプログレッシブエンハンスメントを使用して、サブスクライバーが標準または大きなテキストサイズから選択できるようにします。電子メール開発者のPaulAiryには、オプトインによって駆動されるオプションも含まれています。このオプションでは、加入者は、特定の障害に苦しんでいる場合に、色付きの背景で電子メールを表示することを選択できます。

これらの電子メールは、電子メールがよりアクセスしやすくなり、より多くの聴衆に届く可能性があるために、ほんの数ステップしかかからないことを示しています。これらの手順の多くは、アクセシビリティを支援するだけでなく、すべての人の電子メールを改善するのにも役立ちます。

画像をオンまたはオフにしてメールをプレビューする

60以上のデスクトップ、モバイル、およびWebメールクライアントで、画像オフビューを含め、電子メールがどのように表示されるかを確認したいですか？リトマスを無料でお試しください！

今すぐテストを開始→

電子メールのアクセシビリティに関する究極のガイド

このガイドには、能力に関係なく誰でも楽しめる電子メールの作成、設計、およびコーディングに必要な洞察と段階的なアドバイスが含まれています。

電子ブックをダウンロード→