Web Content Accessibility Guidelines WCAG
Our campaign editor offers many ways to be compatible with the latest WCAG standards. Let’s walk you through the settings!
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 is an ARIA attribute that provides a custom, accessible name for an element when there is no visible label. It helps screen readers explain meaning for buttons, icons, and other interactive elements.
If the element isn't on a restricted list and doesn’t already have a meaningful name, you can use the aria-label attribute to provide a clear description.
Examples: "Close", "Open menu", "Search this site", "Submit form".
Labeled by - Labeledby is an ARIA attribute that links an element to one or more labels, providing a clear name for screen readers. When there is already visible text on the page that explains the purpose of an element, aria-labelledby is a better choice than aria-label. This is because aria-labelledby links the element directly to the existing text, ensuring that screen readers present the same information to all users.
Examples: Title text ("dialog-title"), Button text ("close-button"), Navigation label ("main-nav-label").
Described by - The aria-describedby attribute is an ARIA attribute that links an element to one or more descriptions, providing additional context for screen readers.
Unlike aria-labelledby, which provides a short and clear label describing what an element is, aria-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
Besides using our component accessibility settings, there are a few things to keep in mind when creating your campaign to follow the new standards. Here's a list of recommendations!
Your campaign needs to be screen-readable and have a clear appearance. For example, a readable font size and contrast.
To make it easier for you, we have a list of recommendations!
Contrast and readability
Ensure the text-to-background contrast meets WCAG AA.
Ideal contrast ratio: 4.5:1 for normal text, 3:1 for large text.
Test your contrasts here: https://webaim.org/resources/contrastchecker/
Typography and sizing
- The headline should be at least 24px for readability.
- CTA Buttons: 16px+ (bold or semi-bold)
- Body/paragraph text: 16px+ (with proper line spacing)
- Keep a clear hierarchy of headlines and paragraphs
Button accessibility
- Button size: WCAG minimum size is 24x24px, and recommended size is 44x44px.
- Add a hover/focus state (a darker color when hovered).