概要
デジタルアクセシビリティとは、障がいのある人がキャンペーンを効果的に知覚、理解、操作し、やり取りできるように設計することです。Web Content Accessibility Guidelines (WCAG) では、障がいは多くの場合、個人の能力と製品の設計との不一致から生じるものと捉えています。つまり、アクセシブルでないデジタルコンテンツは、さまざまな障がい (視覚、聴覚、運動、認知) を持つユーザーにとって障壁となり得ます。2025 年 6 月に欧州アクセシビリティ法 (EAA) が施行されたことにより、アクセシビリティを優先することは、法令遵守、インクルーシブなエンゲージメント、そしてオーディエンス全員へのリーチにとって不可欠です。 デジタルアクセシビリティにより、支援技術を使用する人を含め、誰もがマーケティングキャンペーンを利用できるようになります。そのためには、すべての潜在顧客がキャンペーンを知覚、理解、操作し、やり取りできるように設計する必要があります。 デジタルアクセシビリティにおける主な考慮事項には、以下との互換性が含まれます。- スクリーンリーダー: Android の TalkBack や iOS の VoiceOver など、視覚障がいのあるユーザーのために画面上のコンテンツを音声で読み上げるソフトウェアです。
- キーボード: マウスを使わずにキーボードだけでコンテンツを操作し、やり取りできるようにします。
- 拡大鏡: ロービジョンのユーザーが、コンテンツや機能を損なうことなくテキストや画像を拡大できるようにします。
MoEngage におけるアクセシビリティ
MoEngage は、すべてのユーザーにとってインクルーシブでアクセシブルな体験を作成できるよう支援することに取り組んでいます。Push、In-app Messaging、Email、On-Site Messaging (OSM)、Cards のすべてのチャネルでベストプラクティスを容易に実装できるツールと機能を提供しています。このガイドでは、これらの機能とその使用方法について説明します。キャンペーンでアクセシビリティを優先すべき理由
アクセシブルなキャンペーンを構築すると、次のような主なメリットがあります。- 法令遵守: 欧州アクセシビリティ法 (EAA) などの法的要件を遵守でき、潜在的な罰則を回避し、市場へのアクセスを確保できます。
- リーチの拡大: 多様な能力を持つ何百万人もの人々を含む、より幅広いオーディエンスがキャンペーンを理解し、利用できるようになります。
- ユーザー体験の向上: アクセシビリティの改善は、多くの場合すべてのユーザーにとってより良い体験につながります。わかりやすいテキスト、論理的なナビゲーション、代替コンテンツ形式は、すべての人に役立ちます。
- ブランドの評判向上: インクルーシブであることへの取り組みを示すことで、ブランドイメージを大きく向上させ、顧客ロイヤルティを育むことができます。
- キャンペーンパフォーマンスの向上: より多くのユーザーに効果的にリーチすることで、アクセシブルなキャンペーンはエンゲージメント率と ROI の向上につながります。
アクセシブルなキャンペーンの基本原則
キャンペーンを設計する際は、以下の基本原則に留意してください。- 十分な色のコントラスト: テキストとその背景の間に十分なコントラストを確保します。これにより、ロービジョンや色覚異常のある人がコンテンツを読みやすくなります。通常のテキストに対して最低 4.5:1 のコントラスト比を求める Web Content Accessibility Guidelines (WCAG) 2.1 レベル AA 基準を目指してください。MoEngage のデフォルトテンプレートは、これらの基準を満たすことを目指しています。
- 論理的なコンテンツ構造: メールや特定のアプリ内メッセージなどのコンテンツでは、明確で論理的な構造により、スクリーンリーダーやその他の支援技術が情報を効果的に提示できます。
- 完全なキーボードアクセシビリティ: ユーザーがキーボードだけで、すべてのインタラクティブ要素 (リンク、ボタン、フォームなど) を操作できるようにします。これは運動障がいのあるユーザーにとって不可欠です。
- 明確で行動を促すラベル: ボタンやリンクには、その目的や遷移先が明確にわかる説明的なテキストを付けます。たとえば、「Click Here」のようなあいまいな表現ではなく、「Shop Now」を使用します。
キャンペーン要素をアクセシブルにする
MoEngage キャンペーン内の一般的な要素について、アクセシビリティに対応する方法を見ていきましょう。要素は次のカテゴリに分かれています。テキストとタイポグラフィ
明確で適応性のあるテキストは、アクセシブルなコミュニケーションの基盤です。- 読みやすいフォントと十分なサイズを使用する: すべてのコンテンツに、明確で読みやすいフォントを選択してください。MoEngage はさまざまなツールを提供していますが、カスタムデザインでも読みやすさを優先するようにしてください。MoEngage で Push Notifications、In-app Messaging、Emails、On-Site Messages、Cards のコンテンツを作成する際は、標準の読みやすいフォントオプションを使用してください。本文テキストについては、ほとんどのユーザーが快適に読めるよう、少なくとも 16px を目安にするのがよいでしょう。フォントとサイズのセレクターは、各キャンペーンタイプのテキストエディターに直接用意されています。
- モバイルデバイスでのフォントサイズのスケーリングをサポートする: MoEngage は、ユーザーがモバイルデバイスで選択したフォントサイズ設定をキャンペーンテキストに反映するように設計されています。
In-app Messaging およびその他のモバイルキャンペーンでは、MoEngage は次のようにテキスト表示を処理します。- フォントサイズの遵守: テキストは、ユーザーのデバイスで設定されたフォントサイズに合わせて自動的にスケーリングされます。
- フルスクリーンメッセージ: フルスクリーンのアプリ内メッセージのコンテンツが利用可能なビューポートを超える場合、MoEngage は自動的にスクロールを有効にし、コンテンツが切り捨てられるのを防ぎます。
- 非侵入型フォーマット (nudges): nudges のレイアウトは、さまざまなテキストの長さに対応するよう調整されます。コンテンツがコンポーネントの境界からはみ出す場合、MoEngage は nudge 内でのスクロールを有効にしますが、画面上の位置は固定されたままです。
- 行動を促すリンクとボタンのテキストを書く: 文脈から切り離して読まれても意味が通じる説明的なテキストを常に使用してください。
- フルスクリーンのアプリ内通知では、テキストサイズの拡大によってコンテンツがはみ出す場合、MoEngage が自動的にスクロールを有効にします。これにより、すべてのテキストにアクセスできる状態が保たれます。
- 非侵入型通知 (nudges) では、レイアウトがテキストサイズの変更に適応し、必要に応じてスクロールが有効になりますが、nudge の元の位置は維持されます。
画像、ロゴ、メディア
ビジュアルコンテンツをアクセシブルにするには、テキストによる代替が必要です。- ビジュアルに代替テキスト (Alt Text) を提供する: 代替テキストとは、スクリーンリーダーを使用するユーザーなど、画像を見ることができないユーザーのための画像のテキストによる説明です。情報や文脈を伝えるうえで非常に重要です。キャンペーン全体で、情報を伝えるすべての画像、GIF、ロゴに意味のある代替テキストを追加してください。純粋に装飾的な画像は代替テキストを空にしてもかまいませんが、情報としての目的が本当にないことを確認してください。代替テキストの追加の詳細については、チャネル別のアクセシビリティに関する考慮事項を参照してください。
- 文字数制限: 簡潔で説明的な代替テキストを目指し、一般的には 150 文字以内にしてください。
- パーソナライゼーション: MoEngage の代替テキストフィールドはパーソナライゼーションをサポートしており、説明を動的にカスタマイズできます。
- アクション可能な画像の文脈を説明する: 画像がリンクやボタンとして機能する場合、代替テキストでは画像の内容とアクションの両方を説明する必要があります (例: 「夏物ドレスの特別オファー。タップしてコレクションを表示します。」)。
- 代替テキストが異なる方法で処理される場合: 小さなアプリアイコンや「画像読み込み中」のプレースホルダーなど、一部の標準的な画像については、システムが代替テキストを自動的に処理する場合があります。
- 静的な UI 要素にはデフォルトの代替テキストを活用する: MoEngage は、閉じるボタン (‘X’) やナビゲーション矢印などの一般的なインターフェイス要素に対して、ローカライズされたデフォルトの代替テキストを提供しています。
- 音声と動画にトランスクリプトを含める: キャンペーン内の事前録画された音声または動画コンテンツには、同期されたトランスクリプトやキャプションを必ず提供してください。これは、マルチメディアを含むアプリ内メッセージやメールで特に重要です。トランスクリプトにより、ろう者、難聴者、騒がしい環境にいる人を含む、より多くのユーザーが音声/動画コンテンツにアクセスできるようになります。
インタラクティブ要素と動的コンテンツ
インタラクティブなコンポーネントを誰もが使用できるようにします。- 動的コンテンツをわかりやすくする: カウントダウンタイマーなど変化する要素について、MoEngage は支援技術が理解できるよう支援します。
- Push inbox の構造*:* Push inbox での通知の構造は、スクリーンリーダーユーザーのナビゲーションを改善するように設計されています。
- 完全なキーボードナビゲーションを有効にする: MoEngage は、インタラクティブ要素にキーボードだけで到達し、操作できるようにしています。
- Web (On-Site Messages、Web Push): ユーザーは Escape (ESC) キーを使用してこれらの通知やポップアップウィンドウを閉じることができ、Tab キーを使用してすべてのリンク、ボタン、フォームフィールド間を移動できます。
- モバイル (In-Apps、Mobile Push): 閉じるボタン (多くの場合「X」アイコン) に、スクリーンリーダーで読み上げられるアクセシブルなテキストラベル (例: 「Close」、「Close Popup」、「Dismiss」) があることを確認してください。
- Cards: キーボードユーザーは、矢印キー、Tab、Home、End キーを使用して、Cards モジュール内のカテゴリタブ (例: 「All」、「Promotional」) を移動できます。
- ユーザーのフォーカスを効果的に管理する: 適切なフォーカス管理は、特にキーボードやスクリーンリーダーを使用するユーザーを導きます。
ポップアップウィンドウとモーダル (Web: On-Site Messages、Cards、モバイル: In-Apps) におけるフォーカスのガイドライン:- ポップアップ、モーダル、またはオンサイトメッセージが表示されると、キーボードフォーカスは自動的にその中の最初のインタラクティブ要素に移動します。
- フルスクリーンまたは侵入型のポップアップウィンドウでは、フォーカスは内部に「トラップ」されます。つまり、キーボードナビゲーションはポップアップ内にとどまります。これは非侵入型のバナーや nudges には適用されません。
- ポップアップ/モーダルが閉じられると、フォーカスはそれを最初にトリガーした要素に戻ります。
- アプリ内メッセージが表示されると、スクリーンリーダーはその存在を確実に読み上げ、フォーカスをそこに移動します。
- モバイルで適切なタッチターゲットサイズを確保する: 特にタッチスクリーンで、すべてのインタラクティブ要素 (ボタン、リンク、アイコン) を簡単かつ正確にタップできる大きさにしてください。インタラクティブ要素 (ボタン、リンク、アイコン) が小さすぎたり、密集しすぎたりしないようにしてください。iOS では最小 44x44 ピクセル、Android では 48pt が適切なガイドラインです。ボタンやクリック可能な領域が小さすぎたり、密集しすぎたりしないようにしてください。ピンアイコンやカルーセルのドットなど、タップすることを意図していない視覚要素は、これらのタッチターゲットサイズの考慮事項を満たす必要はありません。
- すべてのインタラクティブ要素に明確なラベルを付ける: 画像の代替テキストに加えて、すべてのコントロール (ボタン、フォームフィールドなど) に明確で簡潔なラベルを付けてください。
カスタム HTML
MoEngage では、In-app Messaging や On-site messaging など、特定のキャンペーンタイプでカスタム HTML を使用できます。これにより柔軟性が得られる一方で、カスタムコードのアクセシビリティを確保する責任も大きくなります。- セマンティック HTML: カスタム HTML を記述する際は、常に HTML 要素を本来の目的に沿って使用してください (セマンティック HTML)。たとえば、ボタンには
<button>、リンクには<a>を使用し、見出しタグ (<h1>から<h6>) でコンテンツを論理的に構造化します。適切な Accessible Rich Internet Applications (ARIA) ロールとキーボード機能を追加せずに、<div>や<span>などの汎用要素をボタンやリンクのようにスタイル設定して使用することは避けてください。 - キーボードナビゲーション: カスタムのインタラクティブ要素を作成する場合は、キーボードで操作でき、キーボードの「フォーカス」が論理的に移動することを確認する必要があります。
- カスタムコンポーネントの ARIA: ネイティブ HTML に相当するものがないカスタムのインタラクティブコンポーネントを作成する場合、支援技術向けにロール、状態、プロパティを定義するために ARIA 属性を使用する必要がある場合があります。ARIA の詳細については、アクセシビリティ向上のための Accessible Rich Internet Applications (ARIA) を参照してください。
- テスト: 公開前に、キーボードナビゲーションと実際のスクリーンリーダー (TalkBack、VoiceOver、NVDA、JAWS など) を使用してカスタム HTML キャンペーンを徹底的にテストし、アクセシビリティの問題を見つけて修正してください。
アクセシビリティ向上のための Accessible Rich Internet Applications (ARIA)
ARIA は、特に標準の HTML では要素のロールや状態を説明するのに十分でない場合に、Web コンテンツや Web アプリケーションを障がいのある人にとってよりアクセシブルにする方法を提供します。スクリーンリーダーなどの支援技術に追加情報を提供するものと考えてください。ARIA の役割
要素のロール (例: リンクのリストを「ナビゲーションメニュー」として識別する)、状態 (例: セクションが「展開」されているか「折りたたまれている」かを示す)、プロパティ (例: カスタムボタンにラベルを付ける) を定義できます。MoEngage での ARIA の使用方法
多くの標準コンポーネントや動的コンテンツ (カウントダウンタイマーや更新される情報など) について、MoEngage はアクセシビリティを向上させるために ARIA 属性を内部的に組み込んでいます。たとえば、スクリーンリーダーがタイマーの更新を控えめに読み上げるようにしています。 アプリ内メッセージやオンサイトメッセージでカスタム HTML を扱う場合や、より複雑なインタラクティブ体験について開発者と協力する場合には、ARIA を理解しておくと役立ちます。そのような場合、ARIA を正しく使用することがアクセシビリティにとって重要になります。 詳細については、ARIA を参照してください。アクセシブルなキャンペーンをテストする方法
テストは、キャンペーンが本当にアクセシブルであることを確認するための鍵です。キャンペーンに直接関係するアクセシビリティを確認する簡単な方法をいくつか紹介します。キーボードナビゲーションテスト
-
- Web (On-site Messaging):
- Tab キーを使用してキャンペーンコンテンツ内を前方に、Shift+Tab を使用して後方に移動します。
- すべてのインタラクティブ要素 (リンク、ボタン、フォームフィールドなど) がフォーカスを受け取ることを確認します。
- フォーカスされた要素を Enter キーまたは Space キーで有効化できることを確認します。
- ポップアップやモーダルウィンドウを Escape キーで閉じられることを確認します。
- モバイル (In-app Messaging):
- 閉じるボタン (X) がはっきりと表示され、簡単に操作できる十分なタップ領域があることを確認します。
- Web (On-site Messaging):
スクリーンリーダーテスト
-
- モバイルデバイス:
- デバイスのネイティブスクリーンリーダーを有効にします。通常、システムのアクセシビリティ設定にあります (Android の場合は TalkBack、iOS の場合は VoiceOver)。
- モバイルキャンペーン (例: In-app Messaging) を起動します。
- スクリーンリーダーがコンテンツを論理的な順序で読み上げ、画像の代替テキストを正しく読み上げ、すべてのボタンとリンクを操作できることを確認します。
- デスクトップ:
- Windows 用の NVDA などのスクリーンリーダーアプリケーションを使用して、Web ベースのキャンペーン (On-site Messaging) をテストします。
- モバイルデバイス:
色のコントラストチェック
テキストの色のコントラストを確認するには:-
- オンラインの色コントラスト分析ツールを使用して、テキストと背景のコントラスト比が WCAG AA の最低基準である 4.5:1 を満たしていることを確認します。
フォントサイズのスケーリングテスト
フォントサイズのスケーリングが正しく実装されていることを確認するには、次の手順を実行します。- モバイルデバイスの設定で、システム全体のフォントサイズを大きくします。
- モバイルキャンペーン (例: In-app Messaging) を開きます。
- テキストが切れることなく正しくスケーリングされ、コンテンツがコンポーネントの境界を超える場合にスクロールが有効になることを確認します。
アクセシブルなキャンペーンの主な推奨事項と禁止事項
チャネル別のアクセシビリティに関する考慮事項
上記の原則は幅広く適用されますが、以下の表は MoEngage の特定のチャネルにおけるアクセシビリティの主なポイントをまとめたものです。より詳細なガイダンスは、各チャネルの専用ドキュメントを参照してください。これは Early Access 機能です。アカウントで有効にするには、MoEngage のカスタマーサクセスマネージャー (CSM) またはサポートチームにお問い合わせください。
アクセシビリティラベルは現在、Engage キャンペーンでのみ利用できます。Flows、Inform、API で作成されたキャンペーンでは利用できません。