電子メールのスタイル付きALTテキストの究極のガイド

電子メールの世界で一般的に受け入れられているベストプラクティスは、画像にALT属性を含めることです。 代替テキストの省略形である電子メールのALTテキストは、現在、電子メール愛好家の標準的な方法です。

理由はいくつかあります。

• ほとんどの電子メールクライアントは、デフォルトで画像をブロックします。 場合によっては、画像を表示する代わりに、電子メールクライアントが代わりにALTテキストを表示します。 これは、特に電子メールのデザインが主に画像で構成されている場合に、間違いなく便利です。 ALTテキストは、画像ができない場合でもメッセージを伝えるのに役立ちます。
• 接続不良やリンク切れなどで画像を読み込めない、または読み込めない状況では、画像の代わりにALTテキストが表示されます。
• 視覚障害のある読者のニーズに敏感なマーケターやデザイナーは、ALTテキストがスクリーンリーダーによって使用されることを理解しています。 これらのユーザーはテキストや画像を表示できないため、ALTテキストはスクリーンリーダーを介して画像を説明するのに役立ちます。

画像にALTテキストが含まれていることを確認します Litmusチェックリストを使用すると、画像がオフになっているメールのプレビューが表示され、画像のいずれかにALTテキストがない場合は通知が届きます。 毎回自信を持って送ってください。 Litmusを無料でお試しください→

HTMLメールの画像にALTテキストを設定するのは簡単です。 属性として知られ、HTMLの構文の標準部分であり、imageタグに含まれています。

 <img src="logo.jpg" width="400" height="149" alt="Litmus" >

高さと幅の値を含めることが重要です。これにより、画像が無効になっているときにALTテキストを配置するためのプレースホルダーボックスが作成されます。

標準のALTテキスト表示

GmailにALTテキストが送信されていないメールで無効になっている画像は次のようになります。

ALTテキストを含む電子メールの無効な画像との比較：

どちらを受け取りたいですか？

ALTテキストにスタイルを追加する

また、ALTテキストを使いこなして、インラインCSSを少し追加して、ALTテキストのフォント、色、サイズ、スタイル、および太さを変更することもできます。

 <img src="NAME OF IMAGE.PNG" width="500" height="462" alt="Litmus"/>

上記と同じ例ですが、ALTテキストスタイルが適用されています。

電子メールクライアント全体でのスタイル付きALTテキストのサポート

気の利いたテクニックですが、これはまだ私たちが話している電子メールであるため、当然のことながら、サポートはさまざまな電子メールプログラムに少し散らばっています。 次の例では、Salesforceの印象的なDreamforceメールからいくつかの要素を借用して、スタイル付きのALTテキストをテストしました。

ウェブメールスタイルのALTテキストサポート

GmailなどのWebメールクライアントは、これらのメールプログラムにさまざまなブラウザでアクセスできるため、最も多様です。 すべてのウェブメールクライアントで、スタイル付きALTテキストのサポートは、使用されているブラウザに依存しています。 スタイル付きALTテキストは、Firefox、Chrome、およびSafariの現在のバージョンでサポートされています。

たとえば、スタイル付きのALTテキストは、FirefoxでGmailを表示しているサブスクライバーに表示されますが、InternetExplorerでのみ機能します。 その場合、色はサポートされますが、フォントやその他の属性はサポートされません。 Internet Explorerは、一般に、スタイル付きのALTテキストには不向きなブラウザのようです。 色はサポートされていますが、フォントはサポートされていないことがよくあります。

• InternetExplorerのGmailとG-Suite
• InternetExplorerのGMX.de
• InternetExplorerのOffice365
• InternetExplorerのOutlook.com
• InternetExplorerのWeb.de
• Yahoo! InternetExplorerのメール

Gmail / Firefoxのスタイル付きALTテキスト：

Gmail / IEのスタイル付きALTテキスト：

リンクされた画像のALTテキスト

一部のウェブメールクライアントでは、リンクされた画像のALTテキストに下線が引かれたり、青色になったりする場合があります。 Yahoo! リンクされた画像のALTテキストに下線を引きますが、Gmailは指定された色に下線を付けて無視し、代わりに鮮やかな青にデフォルト設定します。

Outlook.com

Outlook.comは、すべての画像をブロックするのではなく、「疑わしい送信者からのコンテンツをブロックする」と主張していますが、誰が疑わしいと思われるかをどのように判断するかはわかりません。 ランダムに、一部の送信者は「信頼」され、画像を自動的に表示しますが、他の送信者はブロックされたコンテンツの警告をスローします。

ユーザーは、Outlook.com設定の安全な送信者リストにないユーザーの画像をブロックすることができます。 Outlook.comは、これら2種類のコンテンツフィルタリングを異なる方法で処理し、「疑わしい」送信者に対してGmailのような画像ブロック動作を使用し、Hotmailの灰色のボックスを使用して、より厳密なコンテンツブロック設定が設定されているユーザーの画像をブロックします。

デスクトップスタイルのALTテキストサポート

関係する変数がそれほど多くないため、デスクトップクライアントの信頼性は少し高くなります。

* OutlookはALTテキストにセキュリティメッセージを追加します。 詳細は以下をご覧ください。

Apple MailとThunderbirdはデフォルトでは画像をブロックしませんが、各アプリケーションの設定でブロックすることを選択できます。 これらのクライアントで画像ブロックを手動で有効にして、スタイル付きのALTテキストがサポートされているかどうかを確認しました。

特にWebフォントに関連して、他の変数のサポートには若干の違いがありました。

• Apple Mailはスタイル付きフォントをサポートしていませんでしたが、色やその他のプロパティはまだ含まれていました。
• Outlook 2000-2003では、色を変更することはできましたが、スタイル設定されたALTテキストで他のことを調整することはできませんでした。

Outlookのセキュリティメッセージ

Outlook 2003、2007、2010、2013、および2016は、ALTテキストの前に、長いセキュリティメッセージを付けて、「画像をダウンロードするには、ここをクリックしてください。 プライバシーを保護するために、Outlookはこの画像がインターネットから自動的にダウンロードされないようにしました。」 残念ながら、これにより、これらの電子メールクライアントのALTテキストは、Outlookのセキュリティ警告の最後にのみ表示されるため、ほとんど役に立たなくなります。

このメッセージはWindows10にも表示され、ALTテキストを完全にブロックします。

モバイルスタイルのALTテキストサポート

モバイルクライアントは、スタイル付きのALTテキストを強力にサポートしています。これは、特にAndroidの視聴者が多いマーケターにとっては朗報です。

Apple MailやThunderbirdと同様に、このモバイルOSがALTテキストをどのように処理するかを観察するために、iOS設定を手動で更新して画像をブロックしました。

Android（Samsung Galaxy Nexus）のスタイル付きALTテキスト：

スタイル付きのALTテキストは、AndroidのメールアプリとGmailアプリで同じように表示されます。

BlackBerry OS 6（Torch 9810）のスタイル付きALTテキスト：

iOS（iPhone 5）のスタイル付きALTテキスト：

Windows Phone 7.5（Nokia Lumia 900）での画像のブロック：

CSSフォントのプロパティ、リンク、長さは変数です

詳細に入ると、次のフォントプロパティのほとんどは、スタイル付きのALTテキストを表示するクライアントでサポートされています。

• フォントファミリー
• フォントサイズ
• フォントの太さ
• 色
• フォントスタイル

サポートされている特定のプロパティに関しては、テストにいくつかのバリエーションがありました。 ほとんどすべてのクライアントがカラープロパティをサポートしていましたが、フォントはサポートしていませんでした。 これはブラウザによっても異なります。 たとえば、ChromeのGmail / G-Suiteは、色の異なる2つのスタイルのフォントをテストしたときにどのように表示されたかを次に示します。

InternetExplorerのGmail / G-Suiteは色を尊重しましたが、フォントは尊重しませんでした。

一部のクライアントは、スタイル設定されたALTテキストですべてのフォントまたはサイズをサポートしていない場合があることに注意してください。ただし、ブランドやフレアを追加できないわけではありません。 この便利なリソースをチェックしてください。EメールマーケティングスペシャリストのJainaMistryは、Webフォントのサポートを再確認するためにキャンペーンモニター用に作成しました。

また、WindowsとMacに一般的にインストールされているフォントのリストをお勧めします。

その他の注目すべき画像ブロック動作

多くの電子メールクライアントでは、テキストのサイズまたは長さが画像コンテナの幅や高さを超えると、ALTテキストが消えます。 この動作のため、ALTテキストが完全に削除されないように、説明を短くし、フォントサイズを小さくすることをお勧めします。

ほとんどすべての電子メールクライアントでは、画像を自動的に表示または非表示にするように設定を変更でき（ほとんどの場合、非表示/ブロックがデフォルト設定です）、個々のメッセージに対して画像をオンにするようにユーザーに求めます。 また、ユーザーが特定の送信者を許可リストまたはアドレスブックに追加したり、「常に…から画像を表示する」を選択したりできるものもあります。

画像をオフ（およびオン）にしてメールをプレビューします。

画像を無効にすると、メールはどのように表示されますか？ ALTテキストは適切にレンダリングされていますか？ Litmusを使用して、50を超えるデスクトップ、モバイル、およびWebメールクライアント（画像オフビューを含む）で電子メールをプレビューします。

テストを開始→