Our campaign editor offers many ways to be compatible with the latest WCAG standards. Let’s guide you through the settings and share our recommendations!
Widget component Accessibility settings
Below is a short explanation of the properties that can be set on the components and canvas in the widget editor. You can find the settings for each property in the right menu.
Canvas > Accessibility
Other component(ex button, …) > Accessibility
Role
The role attribute defines the purpose or type of an element. It helps users understand and interact with web content by specifying roles like buttons, alerts, or navigation.
Examples: button, link, alert, dialog
Aria label
Aria label provides a custom, accessible name for an element without a visible label. It helps screen readers explain the meaning of buttons, icons, and other interactive elements. Aria label is entered with free text.
Examples: "Close", "Next step", "Open menu", "Submit form".
Labeled by
Labeledby points to an element that already has visible text. When there is already visible text in the campaign that explains the purpose of an element, labelledby is a better choice than aria-label.
Examples: Title text ("dialog-title"), Button text ("close-button"), Navigation label ("main-nav-label").
Described by
Describedby points an element with one or more descriptions, providing additional context for screen readers. Unlike labelledby, which provides a short and clear label describing what an element is, describedby is used for longer explanations. It’s useful for:
Form controls that need extra guidance.
Groups of elements that require context.
Headings that introduce larger sections.
Definitions or other supporting details.
Examples: Help text ( "password-requirements"), Form instructions ("email-guidance"), Additional details ("product-details")
Campaign appearance recommendations (WCAG AA Level)
Besides using our component accessibility settings, there are a few things to keep in mind when creating your campaign to follow the new standards.
To make it easier for you, we have a list of recommendations!
Popup Background
Background should not be too bright or patterned
Ensure there are no transparency issues affecting readability
Popup Sizing & Layout
Ensure popup is responsive on all screen sizes
Popup should not cover or block critical page content or navigation
Popup can be easily dismissed
Minimum touch target size: 44x44px for close buttons or actions
Contrast and readability
Contrast ratio for background and normal text (paragraphs): ≥ 4.5:1
Contrast ratio for background and large text (headlines): ≥ 3:1
Test your contrasts here.
Typography and sizing
Headlines: ≥ 24px
Paragraphs/body text: ≥ 16px
Line height: ≥ 1.5 * font size
Spacing: Paragraph spacing at least 1.5 * line height
Button accessibility
Button text contrast: ≥ 4.5:1 (normal) or 3:1 (large)
Minimum clickable area:
24x24px (WCAG AAA, not required at AA, but recommended)
44x44px (Best practice from Apple/Google)
Visible hover state
Should show a clear visual change
Button has an accessible name (aria-label)
Campaign example:
