Overview

Globally, an estimated 15% of the population has some form of disability (WHO). Designing accessible messaging is a legal requirement and an opportunity to foster greater engagement and inclusivity. Ensuring digital accessibility helps create more inclusive CleverTap campaigns, empowering all users, including those with disabilities, to perceive, understand, navigate, and interact with your content effectively.

By adhering to the Web Content Accessibility Guidelines (WCAG), you can remove barriers for users facing visual, auditory, motor, or cognitive challenges. This is increasingly important with the upcoming European Accessibility Act (EAA), enforceable from June 2025, which mandates accessibility for digital products and services across the EU market (European Commission).

Why Accessibility Matters in CleverTap Campaigns

Legal Compliance

Implementing accessibility best practices ensures compliance with evolving regulations such as the EAA, reducing legal and reputational risks.

Enhanced User Experience

Accessibility improvements often result in clearer, more intuitive interactions that benefit all users, not just those with disabilities.

Positive Brand Image

Brands that prioritize accessibility signal a commitment to inclusivity and social responsibility, which enhances customer trust and loyalty.

Improved Campaign Performance

Accessible campaigns are proven to drive higher engagement rates and better return on investment across marketing channels.

Industry Insights

• Organizations that embed accessibility into their culture experience greater innovation and better business outcomes.
• Over 97% of homepages still exhibit WCAG accessibility issues (WebAIM Million Project), highlighting a significant opportunity for brands to differentiate through inclusive design.

Fundamental Accessibility Principles

Color Contrast

• Maintain a minimum contrast ratio of 4.5:1 between text and background colors, per WCAG AA standards.
• You can verify contrast using tools such as the WebAIM Contrast Checker.
• CleverTap In-App Custom HTML templates are designed to support these contrast levels to ensure readability.

Content Structure

• Organize message content with a logical hierarchy to support assistive technologies such as screen readers.
• Use consistent, meaningful headings (H1–H6) to improve navigation and comprehension.
• For example, use <h1> for the main title, followed by <h2> and <h3> for sub-sections that ensure proper nesting and flow. Use <button> for actionable buttons and <a> for links. Avoid using generic containers such as <div> to simulate structure unless they are accompanied by appropriate ARIA roles and keyboard interactions.

Keyboard Navigation

• Ensure all interactive components are fully operable using keyboard-only navigation.
• Avoid situations where users may become trapped within interactive elements such as modals or carousels.

Clear, Actionable Labels

• Provide descriptive and actionable labels for all interactive elements (buttons, links, and so on). For example, use Register Today instead of Click Here, helping all users, including those using screen readers, understand the action’s purpose.

Elements of Accessible Messaging

Text & Typography

• Use highly legible fonts, with a minimum size of 16px to boost readability.
• CleverTap auto-respects user device settings for text scaling.
• For full-screen messages or long-form content, ensure scrolling is enabled so users can access the entire message.

Images & Multimedia

• Provide meaningful alt text (up to 150 characters) for all non-decorative images to convey their purpose.

Interactive & Dynamic Content

• Clearly describe the functionality of dynamic components (countdowns, progress indicators, carousels).

• Ensure smooth keyboard navigation and proper focus management.

• Maintain appropriate minimum touch target sizes for mobile:

  • iOS: 44x44 px
  • Android: 48x48 dp

Custom HTML

• Use semantic HTML elements (for example, <button>, <nav>, <section>, <article>) to provide meaningful structure.
• Apply Accessible Rich Internet Applications (ARIA) attributes when necessary to improve interaction clarity.
• Conduct accessibility testing with popular screen readers such as NVDA, JAWS, and VoiceOver.

Accessible Rich Internet Applications (ARIA) Features

CleverTap’s built-in components incorporate appropriate ARIA attributes to improve compatibility with assistive technologies. When creating custom HTML content within CleverTap campaigns, developers should apply similar best practices to maintain accessibility.

Accessibility Testing Guidelines

Accessibility Best Practices

Channel-Specific Recommendations

Push Notifications

• Push notifications should use clear, concise text and ensure sufficient color contrast for all message elements.
• Use images with descriptive labeling, and ensure that CTA labels are actionable and understandable for screen readers.

In-App Messaging

• In-app messages must include alt text for all images and provide captions or transcripts for multimedia content.
• Support text scaling and ensure that interactive elements can be fully navigated via keyboard and are appropriately labeled.

Emails

• Email as a channel is EAA compliant within the CleverTap ecosystem.
• Email content must be structured using semantic HTML with appropriate headings, paragraphs, and lists.
• All images must include alt text, and any embedded multimedia must include captions or transcripts.
• Ensure the email remains accessible across both desktop and mobile email clients.

Web Messages

• Use ARIA labels to enhance the accessibility of interactive components.
• Ensure full keyboard navigation support across all elements.
• Test dynamic components (modals, carousels, expandable sections) to confirm accessibility and usability.

WhatsApp

• Provide descriptive labels for actions.
• Ensure alt text for images and captions for multimedia.

Native Display/Web Native Display

• Implement semantic HTML and ARIA roles.
• Ensure keyboard accessibility and focus visibility.
• Provide alt text for images and captions for multimedia.

Web/App Inbox

• Structure messages with clear headings and semantic HTML.
• Ensure keyboard navigation and screen reader compatibility.
• Provide alt text for images and captions for multimedia.

Conclusion

Embedding accessibility best practices into your CleverTap campaigns is a critical step toward ensuring compliance with global regulations and delivering an inclusive experience for all users.

By embracing accessibility:

• You demonstrate your commitment to digital inclusivity.
• You reduce legal risk and strengthen brand reputation.
• You expand your market reach and improve user engagement.
• You position your brand for long-term success in an increasingly diverse digital landscape.

Investing in accessibility is both a business imperative and a moral responsibility. This aligns with CleverTap’s mission to help brands create meaningful, human-first customer experiences.