Accessible Campaigns in MoEngage

Overview

Digital accessibility ensures your campaigns are designed so people with disabilities can effectively perceive, understand, navigate, and interact with them. The Web Content Accessibility Guidelines (WCAG) view disability as often arising from a mismatch between an individual's abilities and a product's design. This means inaccessible digital content can create barriers for users with various impairments (visual, auditory, motor, cognitive). With the European Accessibility Act (EAA) effective June 2025, prioritizing accessibility is vital for compliance, inclusive engagement, and reaching everyone in your audience.

Digital accessibility ensures that marketing campaigns are usable by everyone, including individuals who use assistive technologies. This involves designing campaigns so they can be perceived, understood, navigated, and interacted with by all potential customers.

Key considerations for digital accessibility include compatibility with:

Screen Readers: Software such as TalkBack for Android and VoiceOver for iOS, which vocalize on-screen content for users with visual impairments.
Keyboards: Allowing users to navigate and interact with content using only a keyboard, without a mouse.
Magnifiers: Enabling users with low vision to enlarge text and images without loss of content or functionality.

Accessibility at MoEngage

MoEngage is committed to empowering you to create inclusive and accessible experiences for all your users. We provide tools and features that make it easier for you to implement best practices across all your channels: Push, In-App, Email, On-Site Messaging (OSM), and Cards. This guide outlines these features and how you can use them.

Why Prioritize Accessibility in Your Campaigns?

Building accessible campaigns offers you several key benefits:

Legal compliance: You can adhere to legal mandates like the European Accessibility Act (EAA), which helps avoid potential penalties and ensures market access.
Expanded reach: Your campaigns become understandable and usable by a wider audience, including millions of people with diverse abilities.
Enhanced user experience: Accessibility improvements often lead to a better experience for all users. Clearer text, logical navigation, and alternative content formats benefit everyone.
Improved brand reputation: You demonstrate a commitment to inclusivity, which can significantly enhance your brand image and foster customer loyalty.
Better campaign performance: By reaching more users effectively, your accessible campaigns can lead to improved engagement rates and ROI.

Core Principles for Accessible Campaigns

As you design your campaigns, keep these fundamental principles in mind:

Sufficient color contrast: Ensure there's enough contrast between text and its background. This helps people with low vision or color blindness read your content. Aim for the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA standard, which requires a minimum contrast ratio of 4.5:1 for normal text. MoEngage default templates will aim to meet these standards.
Logical content structure: For content like emails or certain in-app messages, a clear and logical structure helps screen readers and other assistive technologies present your information effectively.
Full keyboard accessibility: Make sure users can navigate and operate all interactive elements (like links, buttons, and forms) using only a keyboard. This is essential for users with motor impairments.
Clear and actionable labels: Provide descriptive text for buttons and links that clearly indicates their purpose or destination. For example, use "Shop Now" instead of a vague phrase like "Click Here."

Making Campaign Elements Accessible

Let's explore how you can address accessibility for common elements within your MoEngage campaigns. The elements are divided into the following categories:

Text and Typography

Clear and adaptable text is foundational to accessible communication.

Use readable fonts and sufficient size: Choose clear, legible fonts for all your content. While MoEngage provides various tools, ensure your custom designs also prioritize readability. When you're crafting content in the MoEngage for Push Notifications, In-app Messaging, Emails, On-Site Messages, or Cards, stick to our standard, legible font options. For body text, a good rule of thumb is to aim for at least 16px to ensure comfortable readability for most users. You'll find font and size selectors directly in the text editor for each campaign type.
Support font size scaling on mobile devices: MoEngage is designed so that your campaign text respects the font size settings users choose on their mobile devices.
For In-app Messaging and other mobile campaigns, MoEngage handles text display as follows:
- Font size adherence: Text automatically scales to match the font size settings configured on the user's device.
- Full-screen messages: When content in a full-screen In-app message exceeds the available viewport, scrolling is automatically enabled to prevent content truncation.
- Non-intrusive formats (nudges): The layout for nudges adapts to accommodate varying text lengths. If the content overflows the component's boundaries, scrolling is enabled within the nudge, while its position on the screen remains fixed.
Write actionable link and button text: Always use descriptive text that makes sense even when read out of context.

Important considerations for scaled text:

For full-screen in-app notifications, scrolling will be automatically enabled if increased text size causes content to overflow. This ensures all text remains accessible.
For non-intrusive notifications (nudges), the layout will adapt to text size changes, with scrolling enabled if needed, while maintaining the nudge's original position.

Images, Logos, and Media

Visual content needs textual alternatives to be accessible.

Provide alternative text (Alt Text) for visuals: Alt text is a textual description of an image for users who cannot see it, such as those using screen readers. It's crucial for conveying information and context. You should add meaningful alt text for all images, GIFs, and logos that convey information across your campaigns. Purely decorative images might have empty alt text, but ensure they genuinely serve no informational purpose. For more information on adding alt text, refer to Channel-Specific Accessibility Considerations.
Character limit: Aim for concise and descriptive alt text, generally up to 150 characters.
Personalization: Alt text fields in MoEngage support personalization, allowing you to tailor descriptions dynamically.
Describe context for actionable images: If an image functions as a link or button, the alt text should describe both the image content and the action (for example, "Special offer on summer dresses. Tap to view collection.").
When alt text might be handled differently: For some standard images, like small app icons or "image loading" placeholders, the system may handle alt text automatically.
Utilize default alt text for static UI elements: MoEngage provides default, localized alt text for common interface elements like close buttons ('X') or navigation arrows.
Include transcripts for audio and video: For any pre-recorded audio or video content in your campaigns, you must provide a synchronized transcript and/or captions. This is particularly important for in-app messages and emails containing multimedia. Transcripts make your audio/video content accessible to more users, including those who are deaf, hard of hearing, or in noisy environments.

Interactive Elements and Dynamic Content

Ensure your interactive components are usable by everyone.

Make dynamic content understandable: For elements that change, like countdown timers, MoEngage helps make them understandable to assistive technologies.
- Push inbox structure: The way notifications are structured in the Push inbox is designed to improve navigation for screen reader users.
Enable full keyboard navigation: MoEngage ensures interactive elements are reachable and operable using only a keyboard.
- Web (On-Site Messages, Web Push): Users can close these notifications or pop-up windows using the Escape (ESC) key, move between all links, buttons, and form fields using the Tab key.
- Mobile (In-Apps, Mobile Push): Ensure the close button (often an "X" icon) has an accessible text label (for example, "Close," "Close Popup," or "Dismiss") that is announced by screen readers.
- Cards: Keyboard users can navigate category tabs (for example, "All," "Promotional") within the Cards module using the arrow keys, Tab, Home, and End keys.
Manage user focus effectively: Proper focus management guides users, especially those using keyboards or screen readers.
Guidelines for focus on Pop-up windows and Modals (Web: On-Site Messages, Cards; Mobile: In-Apps):
- When a pop-up, modal, or on-site Message appears, keyboard focus automatically moves to the first interactive element within it.
- For full-screen or intrusive pop-up windows, focus will be "trapped" inside, meaning keyboard navigation stays within the pop-up. This does not apply to non-intrusive banners or nudges.
- When the pop-up/modal is closed, focus will return to the element that originally triggered it.
- When an In-app message appears, screen readers reliably announce its presence and shift focus to it.
Ensure adequate touch target size on mobile: Make all interactive elements (buttons, links, icons) large enough to be easily and accurately tapped, especially on touch screens. Ensure your interactive elements (buttons, links, icons) are not too small or crowded. A minimum size of 44x44 pixels is a good guideline for iOS and 48pt for Android. Ensure your buttons and clickable areas are not too small or crowded. Visual elements like pin icons or carousel dots that aren't meant to be tapped don't need to meet these touch target size considerations.
Provide clear labels for all interactive elements: Beyond alt text for images, make sure all controls (buttons, form fields, and so on) have clear, concise labels.

Custom HTML

MoEngage allows you to use custom HTML for certain campaign types, such as In-app Messaging or On-site messaging. While this offers flexibility, it also means you take on more responsibility for ensuring the accessibility of your custom code.

Semantic HTML: When writing custom HTML, always use HTML elements for their intended purpose (semantic HTML). For example, use <button> for buttons, <a> for links, and heading tags (<h1> to <h6>) to structure your content logically. Avoid using generic elements like <div> or <span> styled to look like buttons or links without adding appropriate Accessible Rich Internet Applications (ARIA) roles and keyboard functionality.
Keyboard navigation: If you build custom interactive elements, you'll need to ensure they can be navigated with a keyboard and that the keyboard's "focus" moves logically.
ARIA for custom components: If you create custom interactive components without native HTML equivalents, you may need to use ARIA attributes to define their roles, states, and properties for assistive technologies. For more information on ARIA, refer to Accessible Rich Internet Applications (ARIA) for Enhanced Accessibility.
Testing: Thoroughly test your custom HTML campaigns with keyboard navigation and actual screen readers (like TalkBack, VoiceOver, NVDA, JAWS) to find and fix any accessibility issues before you launch.

Accessible Rich Internet Applications (ARIA) for Enhanced Accessibility

ARIA provides a way to make web content and web applications more accessible to people with disabilities, especially when standard HTML isn't enough to describe the role or state of an element. Think of it as providing extra information to assistive technologies like screen readers.

What ARIA Does

It can define roles for elements (for example, identify a list of links as a "navigation menu"), states (for example, indicate if a section is "expanded" or "collapsed"), and properties (for example, label a custom button).

How MoEngage Uses It

For many standard components and dynamic content (like countdown timers or updating information), MoEngage incorporates ARIA attributes behind the scenes to improve their accessibility. For example, it ensures that screen readers politely announce updates to a timer.

Being aware of ARIA is helpful if you are working with custom HTML for in-app or on-site messages, or collaborating with developers on more complex interactive experiences. In such cases, correct ARIA usage can be crucial for accessibility.

For more information, refer to ARIA.

How to Test Your Accessible Campaigns

Testing is the key to ensuring your campaigns are really accessible. Here are some simple ways to check accessibility directly relevant to your campaigns:

Keyboard Navigation Test

- Web (On-site Messaging):
  - Use the Tab key to navigate forward and Shift+Tab to navigate backward through the campaign content.
  - Verify that all interactive elements (for example, links, buttons, form fields) receive focus.
  - Confirm that focused elements can be activated using the Enter or Spacebar keys.
  - Ensure that pop-ups or modal windows can be closed using the Escape key.
- Mobile (In-app Messaging):
  - Confirm that the close button (X) is clearly visible and has a sufficient tap area for easy interaction.

Screen Reader Test

- Mobile Devices:
  1. Enable the device's native screen reader. This is usually located in the system Accessibility settings (TalkBack for Android or VoiceOver for iOS).
  2. Launch the mobile campaign (for example, an In-app Messaging).
  3. Verify that the screen reader vocalizes content in a logical order, correctly announces image alt text, and allows interaction with all buttons and links.
- Desktop:
  - Use a screen reader application, such as NVDA for Windows, to test web-based campaigns (On-site Messaging).

Color Contrast Check

To check the color contrast for your text:

- Utilize an online color contrast analysis tool to confirm that the contrast ratio between text and its background meets the minimum WCAG AA standard of 4.5:1.

Font Size Scaling Test

To check that font size scaling is correctly implemented, perform the following steps:

1. 1. On your mobile device, increase the system-wide font size in the device's settings.
  2. Open the mobile campaign (for example, an In-app Messaging).
  3. Verify that the text scales correctly without being cut off and that scrolling is enabled if the content exceeds the component's boundaries.

Key Do's and Don'ts for Accessible Campaigns

Element	Do's	Don'ts
Text and Typography	Use sufficient color contrast between text and background (WCAG AA 4.5:1 minimum).	Don't rely on color alone to convey information or meaning.
Images	Provide descriptive alt text for all informative images and logos.	Don't use vague or generic alt text, or skip it for meaningful images.
Text and Typography	Write clear, actionable text for links and buttons (for example, "View Product Details" instead of "Click Here").	Don't use ambiguous phrases like "Learn More" without context.
Interactive Elements and Dynamic Content	Ensure all interactive elements (links, buttons, forms) are fully navigable and operable using only a keyboard.	Don't create keyboard traps where users cannot navigate away from an element.
Custom HTML	Use semantic HTML elements for their intended purpose (for example, `<button>` for buttons, `<nav>` for navigation).	Don't use `<div>` or `<span>` styled as interactive elements without proper ARIA roles and keyboard support.
All elements	Test your campaigns with actual screen readers (for example, VoiceOver, TalkBack, NVDA) and keyboard-only navigation.	Don't assume accessibility without testing on real assistive technologies.
Media	Provide transcripts for pre-recorded audio and synchronized captions for video content.	Don't embed multimedia content without providing text alternatives.
Text and Typography	Choose clear, legible fonts and ensure body text is at least 16px for comfortable readability.	Don't use overly decorative or hard-to-read fonts, or very small text sizes.
Interactive elements and Dynamic Content	Ensure touch targets on mobile devices are large enough (for example, minimum 44x44 pixels for iOS, 48x48dp for Android).	Don't make buttons or links too small or too close together on touchscreens.
Text and Typography	Structure content logically using headings (H1-H6) to create a clear hierarchy.	Don't skip heading levels or use them purely for styling.

Channel-Specific Accessibility Considerations

While the principles above apply broadly, the table below summarizes key accessibility points for specific MoEngage channels. You will find more detailed guidance in dedicated documents for each channel.

Early Access

This is an Early Access feature. To enable it for your account, contact your CSM or raise a support ticket.

info	Information Accessibility labels are currently available only in Engage campaigns. They're not available in campaigns created through Flows, Inform, and APIs.

Channel	Key Accessibility Considerations (Summary)
Mobile Push	Check for color contrasts, add an accessibility label and hint, and add a valid content description. For more information on creating accessible campaigns, refer here. Note: If TalkBack/VoiceOver settings are enabled on the user's device: Carousel notifications will not be visible. Instead, the backup notification will be displayed. Sticky push notifications will not be visible for Android 11 and below. Instead, the backup notification will be displayed.
Web Push	Ensure alt text for media, keyboard dismissal (Escape key), and proper focus on opt-in prompts. For more information on creating accessible campaigns, refer here.
In-App Messaging	Use alt text, provide video transcripts, configure video playback controls, label timers clearly, and manage focus/font scaling. For more information on creating accessible campaigns, refer here. Note: The rating pop-up template is not compatible for building accessible campaigns.
On-Site Messaging (OSM)	Add appropriate ARIA labels to images, enable keyboard dismissal, and ensure dynamic content is announced. For more information on creating accessible campaigns, refer here.
Emails	Use alt text, provide video transcripts, label timers clearly, and ensure good structure. For more information on creating accessible campaigns, refer here.
Cards	Provide alt text for all images, ensure proper keyboard navigation for tabs, and manage focus. For more information on creating accessible campaigns, refer here.

Conclusion

Building accessible campaigns is an ongoing commitment that benefits everyone. By understanding and implementing these guidelines, you can ensure your messages are inclusive, compliant with emerging regulations like the EAA, and provide a better experience for all your users. Start incorporating these practices today to make your MoEngage campaigns accessible to the widest possible audience.