電子メールのアクセシビリティガイドライン:標準とベストプラクティス

公開: 2022-01-19

周りを見て、何が起こっているのか聞いてください。 フルカラーモードで、すべてがクリアに見えますか? そして、あなたは騒音と声をよく聞きますか? おめでとうございます、あなたは確かに幸運な人です。 さらに、あなたは実際に本当に幸せな人です。 あなたには視覚と聴覚があります!

これらの能力は一般的であり、デフォルトですべての人に与えられていると思うかもしれませんか? 連絡先リストの受信者の4.5%が色覚異常に苦しんでいるため、メールの内容を読んだり理解したりするのが難しいと言ったらどうでしょうか。

色覚異常だけが広範囲に及ぶ障害ではありませんが。 ほんのわずかな事実:世界中で2億8500万人が深刻な視覚障害に苦しんでおり、コンタクトレンズや眼鏡でも問題が発生します。

そして地球の人口の5%は聴覚障害を持っています。 言い換えれば、3億6000万以上。

それは考えるべきことです。 それらすべてを無視することはできません。 私たちは彼らに友好的であり、彼らの生活をより良くするために最善を尽くさなければなりません。 これがアクセシビリティのすべてです。

さあ、お茶かコーヒーを作って、詳細を見てみましょう。

電子メールのアクセシビリティは何の略ですか?

重度の視覚障害や完全な失明にさえ苦しむ人々がいます。 彼らは、画面読み上げソフトウェアを使用して、受信トレイの電子メールを発声しています— VoiceOver、Microsoft Narrator、およびその他の同様のツール。 したがって、私たちの義務は、これらのアシスタントに合わせてコンテンツを調整することです。

色覚異常に関しては、1型2色覚(特定の色を区別できない場合)から単色覚まで、これらの状態の人を助けるツールはありません。 したがって、メール画像を自分で最適化する必要があります。

他の人は、聴覚障害、失読症などに苦しんでいます。その結果、障害の種類ごとにアクセシビリティルールのセットがあります。 このようにして、見出しの質問に対する答えに到達しました。

一言で言えば、それはすべてのタイプの特別な要件を持つ人々が電子メールを読みやすくする標準に固執することを意味します。 幸いなことに、最新のHTMLメールテンプレートビルダーやその他のマーケティングソフトウェアは、これらの標準を非常に簡単に、特別なスキルなしで実装するための高度なツールを提供してくれます。

これらの標準と、アクセシブルな電子メールを作成するのに役立ついくつかのプラクティスを以下で共有します。

アクセシビリティ基準

ですから、親愛なる友よ、あらゆる種類の視覚、聴覚、知覚の機能不全を抱える受信者にとって読みやすい「普遍的な」電子メールを送信するために、私たちが従う必要のあるこれらの一連の推奨事項を1つずつ検討する時が来ました。

1.色覚異常

色覚異常の種類のリストがあります。 はい、どうぞ:

1型2色覚は、赤色の知覚が機能しないことを意味します。 1型2色覚の読者、別名赤盲の人は、黒と赤のすべての色合いを混同する傾向があります。 彼らはまた、暗褐色と暗緑色を区別することができず、青色と赤色の中間のダイアパソンの間に違いは見られません。 Uberからのこのメールをご覧ください。

Stripo-Email-Accessibility-Red-Original-Image

そして、これは、1型2色覚の受信者がそれをどのように見るかです:

Stripo-Email-Accessibility-Red-Test

先天赤緑異常は、緑の知覚の低下です。 これらの人々はまた、中間の赤/緑のダイアパソン、明るい緑/黄色、および水色/ライラックの色を混同する傾向があります。 もう一度、同じメールを見てください。左側がオリジナル、右側が先天赤緑異常です。

AcreliaNews

三型色覚は、青色とその色合いに対する盲目を意味します。 これが、この障害に苦しむ人々が通常、ライトブルー/グレーとダークパープル/ブラックを混同する理由です。 同じ電子メールのサンプルですが、右側に3型2色覚の認識があります。

単色性は、完全な色覚異常のためのものです。 これらの人々は、黒、白、そしてさまざまな灰色の色合いでのみ描かれた現実を見ることができます。 他の色はありません。 非常に古いテレビの画面で世界を想像してみてください。 これは、単色性がどのように見えるかです。 真剣に、それは私にグースバンプを与えます。

Green-Button
Wufooのオリジナルキャンペーン
Green-Button-on-Red example
単色覚者の目を通して同じ電子メール

私たちは何をすべき?

  • 14ピクセル以上の電子メールコピーのフォントサイズを選択します。 ただし、受信者にアクセシブルな電子メールデザインを提供するには、16pxをお勧めします。
  • 色覚異常のクライアントが区別できない可能性のある色に基づくコントラストソリューションは避けてください。 たとえば、赤や薄紫色の背景の上に緑や青のテキストでコピーを書かないでください。 以下のメッセージを見てください。 色覚の完全なダイアパソンを持っている人にとっては問題ありません…しかし、1型2色覚や単色視の場合でも同じくらい良いですか? 私はそうは思わない…
Accessibility-Green-Red

(オリジナルメッセージ)

Red-Test-Dots

(これは、1型2色覚のクライアントがそれを見る方法です)

Monochromacy example

(単色覚者がこのメッセージを見る方法)

お気に入りのチームが試合に勝ったのか負けたのかをどのように理解する必要がありますか?

  • 赤い写真の上に緑のボタンを追加する、またはその逆のアイデアを忘れてください。 上記のすべての「危険な」色の組み合わせについても同じことが言えます。 アイデアは本当に悪いです—色覚の機能不全を持つ人々はボタンにまったく気付かないかもしれません。
  • 製品の色は常に角かっこで囲んで指定します。たとえば、クライアントは赤い色を区別できない場合がありますが、赤いシャツやドレスは自分のイメージと完全に一致していることを知っています。
  • メール内のリンクを太字にします。

ええ、リンクテキストの通常の青い色は十分ではありません。 そして、色覚異常の受信者のためだけではありません。 スマートフォンの画面に容赦なく太陽が当たっているときに、通りでメールを読んだことがありますか? そうすれば、私が何を意味するのかがわかります—色を区別するのはまったく難しいです。 したがって、リンクを太字にし、下線を付けないでください。 なんで? 下線は失読症の人の気を散らす可能性があるためです。 失読症については後で詳しく説明します。

Bold-Links in email

このメールでは、メニュー項目も太字になっています。 このシンプルなアイデアは、ニュースレター内の顧客のナビゲーションを最適化します—彼らはアパートの希望のカテゴリーを簡単に見つけることができます。

矢印の付いた「詳細の表示」リンクに注目してください。 クリックすると詳細が表示される可能性があると書かれています。

キャンペーンでインタラクティブ要素を追加したり、テストを実行したりする場合は、緑/濃い赤/水色を選択して、正解を強調します。 そして、それぞれ間違っている場合は、それぞれ赤/黒/灰色。 はい/いいえの回答をテキストで複製してください。

電子メールが色覚異常に苦しむ人々の要件に適合しているかどうかを確認することは非常に重要です。 便宜上、この表を投稿に追加したいと思います。 一致する色を見つけて混乱を避けるために保存します。

Types of color blindness graph

また、色覚異常の受信者が写真を認識する方法を写真に表示する無料の色覚異常シミュレータツールもあります。

ご覧のとおり、カラーテストはそれほど複雑ではありません。無視しないでください。 すべての加入者にあなたの注意を示してください。 良い。

2.失明および重度の視覚障害

次の章では、目の不自由な人や弱視の人のためのアクセシビリティ基準について説明します。 これらのルールはすべて視覚障害に関するものですが、ここでの原則と解決策はまったく異なります。 この場合、配色やコントラストの組み合わせは役に立ちません。 アクセシビリティ科学のこの側面は、画面読み上げソフトウェアの使用に基づいています。

したがって、私たちの使命は、これらのツールに合わせてメールを調整することです。 言い換えれば、これらのツールでメールを読みやすくする必要があります。

ここで特に注意すべきことは何ですか?

メールの件名

通常、スクリーンリーダーは、その件名からの電子メールを読み始めます。

したがって、一般的に受け入れられているルールはシンプルでありながら効果的です。件名を簡潔でわかりやすいものにします。 良い主題は、メッセージの核心を説明する必要があります。

言語設定

電子メールのコピーで言語設定を構成することは非常に重要です。 このタスクにはある程度の努力が必要であり、電子メールのコピーを処理しますが、それだけの価値はあります。 問題は、これらの設定を無視すると、スクリーンリーダーによって発声された電子メールテキストが恐ろしく聞こえる可能性があるということです。 ロードオブザリングのオークの会話のようなもの

これを回避するには、電子メールコードでそれぞれの言語を指定します(可能な場合)。

論理的な順序

スクリーンリーダーには、電子メールの発声方法について厳密な順序があります。 コンテナとブロックを左から右に読み取り、次の行に進みます。

アクセシビリティを提供するには、HTMLコードで<h1><h2><p>などのヘッダータグを指定します。 これらのタグは通常のテキストよりも優先されるため、これらの要素が最初に発声されます。

Headline-in-Email

また、タグを指定する場合、フォントサイズは関係ありません。 上記の例では、見出し2のフォントサイズは24ピクセルで、通常のコピーフォントは27ピクセルと大きくなっています。 ただし、スクリーンリーダーは、最初に見出し2を読み上げます。

代替テキスト

今日、AI技術は着実に発展しています。 しかし、スクリーンリーダーツールは、電子メールの写真を「見て」説明するほど賢くはありません。 おそらく近い将来…現在のところ、これらのユーティリティは、画像に追加する代替テキスト、別名代替テキストのみを読み取ることができます。

代替テキストをアクセシビリティ基準に合わせる方法は? あなたは正しいと思いました、それはかなり明白です:このテキストを簡潔で、説明的で、そして有益なものにしてください。 役立つ注意事項:このテキストの「画像」という言葉は避けてください。 imageタグはすでにそれを指定しているので、複製された「imageimage…」を聞くのはちょっと奇妙でしょう。

リンク、CTAアイテム、ソーシャルアイコン

リンクは、できるだけ簡潔で有益なものにする必要があります。 それらにクリアテキストを追加し、スクリーンリーダーがこのテキストを音声に変換することを忘れないでください! クリックして、あなたが何を提供し、どこに行くのかを受信者に知らせます。

これらのリンクを見てください:

Long vs short link example

最初のリンク…ええと…真剣に、私はそれがどれほど不気味に聞こえるか想像するのを恐れています。 2つ目は、Webサイト、公開日、および投稿タイトルを明確に指定します。

同じことがCTAボタンとソーシャルメディアアイコンにも当てはまります。 実際、これらのアイテムもハイパーリンクであり、見た目にも魅力的な視覚的な形に包まれています。 すべての熟練した電子メールマーケティング担当者は、それらに細心の注意を払い、デザインと効果に取り組み、クリックを生成するための完璧なカラーソリューションを選択します…

ただし、スクリーンリーダーと視覚障害者のアクセシビリティに関しては、ここで重要なのはテキストだけです。 ミッションを完了するのに十分なキャッチーなものにします—サブスクライバーにボタンをクリックするように強制します。

メールにCTAボタンが表示されるのは次のとおりです。

CTA Button

しかし、画面読み上げツールは、デザイナーのトリックやすばらしいホバー効果のすべてについて飛んでいるアヒルを提供するわけではありません。 ソフトウェアが認識するのは、ベアテキストだけです。 他には何もありません。 したがって、テキストがそれ自体で機能することを確認してください。

ソーシャルメディアアイコンに関して、受信トレイの電子メールを「聞く」一部のサブスクライバーは、これらのアイコンに適用される略語を理解していない場合があります。 したがって、これらのアイテムの説明的な代替テキストを記述します。

それはすべて失明についてです。 もう1つ重要な注意点:スクリーンリーダーは、重度の視覚障害を持つ人々だけでなく、今日広く使用されています。 何百万もの受信者が、忙しいとき、通り、車の中でなど、受信トレイの電子メールを聞いています。したがって、アクセシビリティのこの側面は、想像以上に重要です。

3.失読症

失読症に苦しむ人々は、通常のIQレベルにもかかわらず、テキスト内の文字の順序を混乱させる傾向があります。

Stripo-Email-Accessibility-Dyslectic-Readers-New-Screen

によって公開された投稿に基づいた失読症の受信者のためのアクセシビリティの実践は次のとおりです the 英国失読症協会。

  • リンクに下線を引くことは避けてください。 すでに少し上で述べたように、リンクに下線を引くのではなく、太字にします。
  • 行の終わりで新しい文を開始しないでください。 新しい文はそれぞれ新しい行である必要があります。
  • 特定のアイデアを強調表示/強調する必要がある場合は、Caps Lockを使用しないでください。代わりに、大きいフォントを使用してください。
  • 中央揃えを忘れてください—画面の左側だけです。
  • 白い背景は失読症のレシピエントの気を散らす可能性があり、クリーム色は柔らかく、問題を引き起こしません。
  • すべての文をピリオド(。)で終了します。電子メールのコピーに箇条書きがある場合は、セミコロンも使用する必要があります。

4.難聴と部分的な聴力

聴覚障害のある人のために、単一の基準があります。 メールに埋め込まれているすべての動画には、字幕またはテキストによる説明が含まれている必要があります。

Adding Subtitles_Captions to Emails

Youtubeや他のビデオホスティングによって提供される自動字幕に依存しないでください。 彼らはしばしば、ええと…それを穏やかに言えば、理想からはほど遠いです。 そして、時には統合失調症の危機に瀕していることさえあります。

メールアクセシビリティのヒント

最後に、今日のアクセシビリティのベストプラクティスを確認します。 ご覧のとおり、メールマーケターの仕事のこの側面は本当に重要です。 したがって、「送信」ボタンをクリックする前に、アクセシビリティテストをスキップしないでください。 前述の色覚異常シミュレーターを使用してキャンペーンを確認し、使用可能なすべてのデバイスにテストメールを送信して、さまざまなスクリーンリーダーでそれらを聞きます。

それでは、この投稿の要点を簡単に要約しましょう。 アクセシビリティを提供する方法は?

  • 混乱を防ぐために、さまざまな色を選択してコントラストスキームを作成します。
  • 明確で説明的な件名を書いてください。
  • 代替テキストを忘れないでください。すべての画像に追加してください。
  • GIFアニメーションに教育的な役割がある場合は、読者に詳細な説明を提供してください。
  • スクリーンリーダーは一度に1つの言語しか操作できないため、1つのメールで異なる言語を使用しないでください。
  • リンクの意味を確認してください。
  • テキストを左側に揃えます。
  • 真の愛を込めてニュースレターやトリガーされたメールを作成します。 すべてのサブスクライバーに注意してください。

皆様のご健勝を心よりお祈り申し上げます。 ケアと優しさをあちこちに広げましょう!