Our campaign editor offers many ways to meet the latest WCAG standards. Let’s guide you through the settings and share our recommendations!
We currently support:
role
aria-label
aria-labelledby
aria-describedby
tabindex
aria-live="polite"
aria-atomic
aria-modal
We also support:
Moving focus into widgets/popups
Focus trap inside popups
Escape to close popups
Blocking background interaction for popups
Close button with accessible name
Widget component Accessibility settings
Below is an explanation of the properties that can be set on components and the canvas in the widget editor. You can find the settings for each property in the right menu.
General > 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, labeledby 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)
There are a few things to keep in mind when creating your campaign to meet accessibility standards. Here’s a simplified checklist.
Popup Background
Avoid overly bright or distracting backgrounds
Ensure background does not reduce text readability
Avoid transparency issues that affect contrast
Popup Sizing & Layout
Popup must be responsive across screen sizes
Content must work at 200% zoom without loss of functionality
Contrast and readability
Normal text contrast: ≥ 4.5:1
Large text (headlines): ≥ 3:1
Buttons and UI elements: ≥ 3:1
Test your contrasts here.
Typography and sizing
Body text: ~16px or larger
Headlines: clearly larger than body text
Line height: ~1.5× font sizeUse adequate spacing between paragraphs
Button accessibility
Minimum target size: 24×24 px (WCAG 2.2 AA)
Buttons must have an accessible name:
visible text, or
aria-labelfor icon-only buttons
Hover and focus states must be clearly visible
Campaign example:
Questions?
Are you missing something WCAG-related? Please contact us and let us know: