1. ユーザーガイド
  2. キャンペーンとチャネル
  3. はじめる
  4. キャンペーンコンテンツ

MoEngageのアクセシブルキャンペーン

Overview

デジタルアクセシビリティは、障害のある人々がキャンペーンを効果的に認識し、理解し、ナビゲートし、相互作用できるように設計されていることを保証します。ウェブコンテンツアクセシビリティガイドライン（WCAG）は、障害はしばしば個人の能力と製品のデザインとの不一致から生じると見なしています。これは、アクセスできないデジタルコンテンツが、さまざまな障害（視覚、聴覚、運動、認知）を持つユーザーに障壁を作る可能性があることを意味します。2025年6月に発効する欧州アクセシビリティ法（EAA）により、アクセシビリティを優先することは、コンプライアンス、包括的な関与、そしてあなたの聴衆全体に届くために重要です。

デジタルアクセシビリティは、支援技術を使用する個人を含む、すべての人がマーケティングキャンペーンを利用できるようにします。これは、すべての潜在的な顧客が認識し、理解し、ナビゲートし、対話できるようにキャンペーンを設計することを含みます。

デジタルアクセシビリティにおける重要な考慮事項には、次のものとの互換性が含まれます：

  • スクリーンリーダー: TalkBack（Android用）やVoiceOver（iOS用）などのソフトウェアは、視覚障害のあるユーザーのために画面上のコンテンツを音声化します。
  • キーボード: ユーザーがマウスを使わずにキーボードだけでコンテンツをナビゲートし、対話できるようにします。
  • 拡大鏡: 視力が低下しているユーザーが、コンテンツや機能を損なうことなくテキストや画像を拡大できるようにします。

MoEngageのアクセシビリティ

MoEngageは、すべてのユーザーに対して包括的でアクセス可能な体験を創造するための力を与えることにコミットしています。私たちは、プッシュ、アプリ内、メール、オンサイトメッセージング（OSM）、およびカードなど、すべてのチャネルでベストプラクティスを実装するのを容易にするツールと機能を提供します。このガイドでは、これらの機能とそれらの使用方法について説明します。

なぜキャンペーンでアクセシビリティを優先するのか？

アクセシブルなキャンペーンを構築することは、いくつかの重要な利点を提供します：

  • 法的コンプライアンス: 欧州アクセシビリティ法（EAA）などの法的義務を遵守することで、潜在的な罰則を回避し、市場アクセスを確保できます。
  • 拡張されたリーチ: あなたのキャンペーンは、さまざまな能力を持つ何百万もの人々を含む、より広いオーディエンスに理解可能で使いやすくなります。
  • 向上したユーザーエクスペリエンス: アクセシビリティの改善は、すべてのユーザーにとってより良い体験につながることがよくあります。より明確なテキスト、論理的なナビゲーション、代替コンテンツ形式は、すべての人に利益をもたらします。
  • ブランドの評判の向上: あなたは包括性へのコミットメントを示しており、これがブランドイメージを大幅に向上させ、顧客の忠誠心を育むことができます。
  • より良いキャンペーンパフォーマンス: より多くのユーザーに効果的にリーチすることで、アクセス可能なキャンペーンはエンゲージメント率とROIの向上につながる可能性があります。

アクセシブルなキャンペーンのための基本原則

キャンペーンを設計する際は、これらの基本的な原則を念頭に置いてください：

  • 十分な色のコントラスト: テキストとその背景の間に十分なコントラストがあることを確認してください。これにより、視力が低下している人や色盲の人がコンテンツを読みやすくなります。通常のテキストには、4.5:1の最小コントラスト比が必要なWebコンテンツアクセシビリティガイドライン（WCAG）2.1レベルAA標準を目指してください。MoEngageのデフォルトテンプレートは、これらの基準を満たすことを目指します。
  • 論理的なコンテンツ構造: メールや特定のアプリ内メッセージのようなコンテンツでは、明確で論理的な構造が、スクリーンリーダーやその他の支援技術が情報を効果的に提示するのに役立ちます。
  • フルキーボードアクセシビリティ: ユーザーがキーボードのみを使用して、すべてのインタラクティブ要素（リンク、ボタン、フォームなど）をナビゲートおよび操作できることを確認してください。これは、運動障害のあるユーザーにとって不可欠です。
  • 明確で実行可能なラベル： ボタンやリンクの目的や行き先を明確に示す説明文を提供してください。たとえば、「今すぐ購入」のように、「ここをクリック」といった曖昧なフレーズの代わりに使用してください。

キャンペーン要素をアクセシブルにする

あなたのMoEngageキャンペーン内の一般的な要素に対してアクセシビリティをどのように対応できるかを探ってみましょう。要素は以下のカテゴリに分けられます：

テキストとタイポグラフィ

明確で適応可能なテキストは、アクセス可能なコミュニケーションの基盤です。

  • 読みやすいフォントと十分なサイズを使用してください: すべてのコンテンツに対して明確で読みやすいフォントを選択してください。MoEngageはさまざまなツールを提供していますが、カスタムデザインでも読みやすさを優先するようにしてください。Push Notifications、In-app Messaging、Emails、On-Site Messages、またはCardsのためにMoEngageでコンテンツを作成する際は、標準の読みやすいフォントオプションに従ってください。本文のテキストについては、ほとんどのユーザーが快適に読めるように、少なくとも16pxを目指すのが良いルールです。各キャンペーンタイプのテキストエディタには、フォントとサイズのセレクターがあります。
  • モバイルデバイスでのフォントサイズスケーリングをサポート: MoEngageは、ユーザーがモバイルデバイスで選択したフォントサイズ設定を尊重するように設計されています。
    アプリ内メッセージングやその他のモバイルキャンペーンにおいて、MoEngageはテキスト表示を以下のように処理します:
    • フォントサイズの遵守: テキストは自動的にユーザーのデバイスに設定されたフォントサイズに合わせてスケールします。
    • 全画面メッセージ: アプリ内メッセージの全画面コンテンツが利用可能なビューポートを超える場合、コンテンツの切り捨てを防ぐために自動的にスクロールが有効になります。
    • 非侵入型フォーマット（ナッジ）: ナッジのレイアウトは、異なるテキストの長さに合わせて適応します。コンテンツがコンポーネントの境界を超える場合、ナッジ内でスクロールが有効になり、その画面上の位置は固定されたままになります。
  • アクション可能なリンクとボタンのテキストを書く: 文脈から外れて読まれても意味が通じるように、常に説明的なテキストを使用してください。

重要なテキストのスケーリングに関する考慮事項:

  • フルスクリーンのアプリ内通知 では、テキストサイズの増加によりコンテンツがオーバーフローする場合、自動的にスクロールが有効になります。これにより、すべてのテキストがアクセス可能なままになります。
  • 非侵入的通知（ナッジ） については、レイアウトがテキストサイズの変更に適応し、必要に応じてスクロールが有効になりますが、ナッジの元の位置は維持されます。

画像、ロゴ、メディア

視覚的コンテンツには、アクセシブルにするためのテキストの代替が必要です。

  • 視覚情報の代替テキスト (Alt Text) を提供してください： Altテキストは、画面リーダーを使用しているような、画像を見ることができないユーザーのための画像のテキスト説明です。情報とコンテキストを伝えるために重要です。キャンペーン全体で情報を伝えるすべての画像、GIF、およびロゴに対して意味のある代替テキストを追加する必要があります。純粋に装飾的な画像は空の alt テキストを持つことがありますが、実際に情報的な目的を持たないことを確認してください。代替テキストの追加に関する詳細情報は、 チャネル固有のアクセシビリティに関する考慮事項 を参照してください。
  • 文字数制限: 簡潔で説明的な代替テキストを目指し、一般的に150文字以内に収めてください。
  • パーソナライズ: MoEngage の alt テキストフィールドは、パーソナライズをサポートしており、説明を動的に調整できます。
  • アクション可能な画像のコンテキストを説明してください: 画像がリンクまたはボタンとして機能する場合、altテキストは画像の内容とアクションの両方を説明する必要があります（例えば、「夏のドレスの特別オファー。コレクションを見るにはタップしてください。」）。
  • 代替テキストが異なる方法で処理される場合: 小さなアプリアイコンや「画像読み込み」プレースホルダーのような標準画像の場合、システムは代替テキストを自動的に処理することがあります。
  • 静的UI要素のデフォルトの代替テキストを利用する: MoEngageは、閉じるボタン（'X'）やナビゲーション矢印などの一般的なインターフェース要素に対して、デフォルトのローカライズされた代替テキストを提供します。
  • 音声およびビデオのトランスクリプトを含める: キャンペーン内の事前録音された音声またはビデオコンテンツについては、同期されたトランスクリプトおよび/またはキャプションを提供する必要があります。 これは、マルチメディアを含むアプリ内メッセージやメールにとって特に重要です。 トランスクリプトは、聴覚障害者や耳の不自由な方、または騒がしい環境にいる方を含む、より多くのユーザーに音声/ビデオコンテンツを利用可能にします。

インタラクティブ要素とダイナミックコンテンツ

すべての人が利用できるように、インタラクティブなコンポーネントを使いやすくしてください。

  • 動的コンテンツを理解しやすくする: カウントダウンタイマーのように変化する要素について、MoEngageは支援技術に理解しやすくするのを助けます。
    • プッシュ受信トレイの構造 : プッシュ受信トレイにおける通知の構造は、スクリーンリーダーユーザーのナビゲーションを改善するように設計されています。
  • フルキーボードナビゲーションを有効にする: MoEngageは、インタラクティブな要素がキーボードのみで到達可能で操作可能であることを保証します。
    • ウェブ（オンサイトメッセージ、ウェブプッシュ）: ユーザーは、Escape（ESC）キーを使用してこれらの通知やポップアップウィンドウを閉じることができ、Tabキーを使用してすべてのリンク、ボタン、およびフォームフィールド間を移動できます。
    • モバイル（アプリ内、モバイルプッシュ）: 閉じるボタン（通常は「X」アイコン）が、スクリーンリーダーによってアナウンスされるアクセシブルなテキストラベル（例えば、「閉じる」、「ポップアップを閉じる」、または「キャンセル」）を持っていることを確認してください。
    • カード : キーボードユーザーは、カードモジュール内のカテゴリタブ（例えば、「すべて」、「プロモーション」）を矢印キー、Tab、Home、およびEndキーを使用してナビゲートできます。
  • ユーザーの集中を効果的に管理する: 適切なフォーカス管理は、特にキーボードやスクリーンリーダーを使用しているユーザーをガイドします。
    ポップアップウィンドウとモーダルのフォーカスに関するガイドライン（ウェブ：オンサイトメッセージ、カード；モバイル：アプリ内）：
    • ポップアップ、モーダル、またはサイト内メッセージが表示されると、キーボードフォーカスは自動的にその中の最初のインタラクティブ要素に移動します。
    • フルスクリーンまたは侵入的なポップアップウィンドウ では、フォーカスが内部に「閉じ込められ」、キーボードナビゲーションはポップアップ内に留まります。これは、非侵襲的なバナーやナッジには適用されません。
    • ポップアップ/モーダルが閉じられると、元々それをトリガーした要素にフォーカスが戻ります。
    • アプリ内メッセージが表示されると、スクリーンリーダーはその存在を確実に通知し、フォーカスをそのメッセージに移動します。
  • モバイルでのタッチターゲットサイズを適切に確保してください: すべてのインタラクティブ要素（ボタン、リンク、アイコン）を、特にタッチスクリーンで簡単かつ正確にタップできるように十分大きくしてください。インタラクティブ要素（ボタン、リンク、アイコン）が小さすぎたり、混み合ったりしないようにしてください。iOSでは最小サイズ44x44ピクセル、Androidでは48ptが良いガイドラインです。ボタンやクリック可能な領域が小さすぎたり、混み合ったりしないようにしてください。タップすることを意図していない視覚要素（ピンアイコンやカルーセルのドットなど）は、これらのタッチターゲットサイズの考慮を満たす必要はありません。
  • すべてのインタラクティブ要素に明確なラベルを提供してください: 画像の代替テキストに加えて、すべてのコントロール（ボタン、フォームフィールドなど）に明確で簡潔なラベルが付いていることを確認してください。

カスタムHTML

MoEngageは、アプリ内メッセージングやサイト内メッセージングなど、特定のキャンペーンタイプにカスタムHTMLを使用することを許可します。これにより柔軟性が得られますが、同時にカスタムコードのアクセシビリティを確保するための責任も増します。

アクセシブルリッチインターネットアプリケーション（ARIA）によるアクセシビリティの向上

ARIAは、標準のHTMLだけでは要素の役割や状態を説明するには不十分な場合に、障害のある人々にウェブコンテンツやウェブアプリケーションをよりアクセス可能にする方法を提供します。支援技術、例えばスクリーンリーダーを支援するための追加情報を提供することを考えてください。

ARIAが何をするか

要素の役割を定義できます（例えば、リンクのリストを「ナビゲーションメニュー」として識別する）、状態（例えば、セクションが「展開」または「折りたたまれている」かを示す）、およびプロパティ（例えば、カスタムボタンにラベルを付ける）を定義できます。

MoEngageがそれをどのように使用するか

多くの標準コンポーネントや動的コンテンツ（カウントダウンタイマーや更新情報など）に対して、MoEngageはアクセシビリティを向上させるために、裏でARIA属性を組み込んでいます。例えば、スクリーンリーダーがタイマーの更新を丁寧に通知することを保証します。

ARIAについて知っておくことは、アプリ内またはサイト内メッセージのカスタムHTMLを扱ったり、開発者と協力してより複雑なインタラクティブ体験を作成したりする際に役立ちます。そのような場合、正しいARIAの使用はアクセシビリティにとって重要です。

詳細については、 ARIA を参照してください。

アクセシブルなキャンペーンをテストする方法

テストは、キャンペーンが本当にアクセス可能であることを確認するための鍵です。キャンペーンに直接関連するアクセシビリティをチェックするためのいくつかの簡単な方法は次のとおりです：

キーボードナビゲーションテスト

    • ウェブ (オンサイトメッセージング) :
      • タブキーを使用してキャンペーンコンテンツを前にナビゲートし、Shift+Tabを使用して後ろにナビゲートします。
      • すべてのインタラクティブ要素（例えば、リンク、ボタン、フォームフィールド）がフォーカスを受け取ることを確認します。
      • フォーカスされた要素がEnterキーまたはスペースバーキーを使用してアクティブにできることを確認します。
      • ポップアップやモーダルウィンドウはEscapeキーを使用して閉じることができることを確認します。
    • モバイル (アプリ内メッセージング) :
      • 閉じるボタン (X) が明確に表示されており、簡単に操作できる十分なタップエリアがあることを確認してください。

スクリーンリーダーテスト

    • モバイルデバイス :
      1. デバイスのネイティブスクリーンリーダーを有効にします。これは通常、システムのアクセシビリティ設定にあります（Androidの場合はTalkBack、iOSの場合はVoiceOver）。
      2. モバイルキャンペーンを開始します（例えば、アプリ内メッセージングなど）。
      3. スクリーンリーダーがコンテンツを論理的な順序で音声化し、画像の代替テキストを正しく発表し、すべてのボタンやリンクと対話できることを確認します。
    • デスクトップ :
      • NVDAなどのスクリーンリーダーアプリケーションを使用して、ウェブベースのキャンペーン（オンサイトメッセージング）をテストします。

カラーコントラストチェック

テキストのカラーコントラストを確認するには:

    • オンラインのカラーコントラスト分析ツールを利用して、テキストと背景の間のコントラスト比が最低限のWCAG AA基準である4.5:1を満たしていることを確認してください。

フォントサイズスケーリングテスト

フォントサイズのスケーリングが正しく実装されているか確認するには、以下の手順を実行してください：

      1. モバイルデバイスの設定で、システム全体のフォントサイズを大きくしてください。
      2. モバイルキャンペーンを開く（例えば、アプリ内メッセージング）。
      3. テキストが切り取られずに正しくスケールすることを確認し、コンテンツがコンポーネントの境界を超える場合はスクロールが有効になっていることを確認してください。

アクセシブルなキャンペーンのための重要な行うべきことと避けるべきこと

要素 Do's やってはいけないこと
テキストとタイポグラフィ テキストと背景の間に十分な色のコントラストを使用してください（WCAG AA 4.5:1 の最小値）。 情報や意味を伝えるために色だけに頼らないでください。
画像 すべての情報画像とロゴに対して説明的な代替テキストを提供してください。 意味のある画像のために、あいまいまたは一般的な代替テキストを使用したり、スキップしたりしないでください。
テキストとタイポグラフィ 製品詳細を見る 文脈なしで「詳細を学ぶ」のような曖昧なフレーズを使用しないでください。
インタラクティブ要素とダイナミックコンテンツ すべてのインタラクティブ要素（リンク、ボタン、フォーム）が、キーボードのみを使用して完全にナビゲートおよび操作できることを確認してください。 ユーザーが要素から移動できなくなるキーボードトラップを作成しないでください。
カスタムHTML 意図された目的のために意味的なHTML要素を使用してください（例えば、 <button> はボタン用、 <nav> はナビゲーション用です）。 適切なARIAロールとキーボードサポートなしに、 <div> や <span> をインタラクティブ要素としてスタイル設定しないでください。
すべての要素 実際のスクリーンリーダー（たとえば、VoiceOver、TalkBack、NVDA）やキーボードのみのナビゲーションを使用して、キャンペーンをテストしてください。 実際の支援技術でテストせずにアクセシビリティを仮定しないでください。
メディア 事前に録音された音声のトランスクリプトと、動画コンテンツの同期キャプションを提供します。 マルチメディアコンテンツを埋め込む際は、テキストの代替手段を提供しないでください。
テキストとタイポグラフィ 明確で読みやすいフォントを選び、本文のテキストサイズは快適な読みやすさのために少なくとも16pxにしてください。 あまり装飾的で読みにくいフォントや、非常に小さな文字サイズは使用しないでください。
インタラクティブ要素とダイナミックコンテンツ モバイルデバイスのタッチターゲットが十分な大きさであることを確認してください（例えば、iOSでは最低44x44ピクセル、Androidでは48x48dp）。 タッチスクリーン上でボタンやリンクを小さすぎたり、近すぎたりしないようにしてください。
テキストとタイポグラフィ コンテンツを論理的に構造化し、見出し (H1-H6) を使用して明確な階層を作成します。 見出しのレベルをスキップしたり、スタイリングのためだけに使用したりしないでください。

チャネル特有のアクセシビリティの考慮事項

上記の原則は広く適用されますが、以下の表は特定のMoEngageチャネルに関する重要なアクセシビリティポイントを要約しています。各チャネルに関する詳しいガイダンスは、専用の文書に記載されています。

アーリーアクセス

これは早期アクセス機能です。アカウントで有効にするには、CSMに連絡するか、 サポートチケットを提出してください 。

info

情報

アクセシビリティラベルは現在、Engageキャンペーンでのみ利用可能です。フロー、インフォーム、およびAPIを通じて作成されたキャンペーンには利用できません。

チャンネル 主なアクセシビリティの考慮事項（概要）
モバイルプッシュ

色のコントラストを確認し、アクセシビリティラベルとヒントを追加し、有効なコンテンツ説明を追加します。アクセシブルなキャンペーンの作成に関する詳細情報については、 こちら を参照してください。


注意 : ユーザーのデバイスで TalkBack/VoiceOver 設定が有効になっている場合:

  • カルーセル通知は表示されません。その代わりに、バックアップ通知が表示されます。
  • Android 11 およびそれ以下では、スティッキープッシュ通知は表示されません。その代わりに、バックアップ通知が表示されます。
Web Push メディアのための代替テキスト、キーボードによる閉じる機能（Escキー）、およびオプトインプロンプトへの適切なフォーカスを確保してください。アクセシブルなキャンペーンを作成するための詳細については、 こちら を参照してください。
アプリ内メッセージング

代替テキストを使用し、ビデオのトランスクリプトを提供し、ビデオ再生コントロールを設定し、タイマーを明確にラベル付けし、フォーカス/フォントのスケーリングを管理します。アクセシブルなキャンペーンの作成に関する詳細については、 こちら を参照してください。


注意 : レーティングポップアップテンプレートは、アクセシブルなキャンペーンを構築するためには互換性がありません。

オンサイトメッセージング (OSM) 画像に適切なARIAラベルを追加し、キーボードでの閉じる機能を有効にし、動的コンテンツがアナウンスされるようにします。アクセシブルなキャンペーンの作成に関する詳細情報は、 こちら を参照してください。
Emails 代替テキストを使用し、ビデオのトランスクリプトを提供し、タイマーを明確にラベル付けし、良好な構造を確保してください。アクセシブルなキャンペーンの作成についての詳細は、 こちら を参照してください。
カード すべての画像に代替テキストを提供し、タブのキーボードナビゲーションを適切にし、フォーカスを管理します。アクセシブルなキャンペーンの作成に関する詳細情報は、 こちら を参照してください。

結論

アクセシブルなキャンペーンを構築することは、すべての人に利益をもたらす継続的なコミットメントです。これらのガイドラインを理解し実施することで、あなたのメッセージが包括的であり、EAAのような新たな規制に準拠し、すべてのユーザーにとってより良い体験を提供できるようになります。今日からこれらのプラクティスを取り入れ、あなたのMoEngageキャンペーンをできるだけ多くのオーディエンスにアクセス可能にしましょう。

この記事は役に立ちましたか？
0人中0人がこの記事が役に立ったと言っています

How can we improve this article?