How to Make Your Campaign Accessible

At Qualifio, we are committed to providing accessible features that make it easier for you to create campaigns that can be enjoyed by everyone, including people with disabilities.

This FAQ is organized into logical sections to help you cover every accessibility aspect step by step.

Accessibility by Design

We have developed features that enhance accessibility by default, requiring minimal effort from you.

However, some aspects depend on the content and settings you choose. Follow our recommandations in the sections below to make your campaign inclusive.

Content Accessibility

Text Content and Structure

Avoid unexplained acronyms
Use simple, concise language
Use the correct text hierarchy:
- Title: Main heading of your campaign
- Subtitle: Subsections or thematic titles
- Paragraph: Regular text

A clear structure helps screen readers navigate logically through the content.

Media Content (video & audio)

If you embed or link to media files in your campaign:

Provide player controls (play, pause, volume)
Avoid autoplay, or offer a clear way to stop it
Add captions or subtitles for videos
Provide transcripts for audio content

ALT Text for images

Add relevant alternative text to meaningful images (e.g., image answers, informative banners, ...)
Leave alternative text empty for decorative or irrelevant images

For example:

Visual Accessibility

Color Contrast

Ensure sufficient contrast for readability.

Text Type	Minimum Contrast Ratio
Normal text	4.5
Large text (headings, titles, ...)	3

These ratios mean the contrast between the text color and the background should meet these minimum levels to be read comfortably by users with visual impairments.

We recommend testing the ratios with Colour contrast checker, a free online tool.

Relative Units (rem, %, vw, vh)

Use relative units to make sure your design adapt across all screen sizes.

For text, use rem to ensure scalability when users adjust browser font settings
For containers, prefer %, vw, and vh instead of fixed px (pixels) values

For more best practices on responsive design, see our dedicated FAQ page on Styling your campaigns.

The font size update directly with the user's browser preferences to ensure they can read comfortably.

Outline Color

Provide a visible outline color for buttons and interactive elements through the configurable field in the Look&Feel. It is important that you ensure a sufficient color contrast between the background and the outline color to ensure it is perceived properly by all targeted user.

This allows users navigating with a keyboard to see where they are on the page

Avoid Color-only Indicators

Qualifio's default components are already designed to meet accessibility standards. Avoid overriding these native styles.

If you add custom code or modify visual elements, make sure to follow these guidelines:

Do not rely solely on color to convey meaning
Combine color with text and/or icon for clarity

There is no way to distinguish the good and bad answer if you don't perceive all the colors

Technical Settings for Accessibility

Public Name

Qualifio now provides a Public name field in the first step of campaign setup. This is an easy way to set up campaign titles for accessibility and integrations. If you don't define this public name, it will fallback on your internal campaign title.

Learn more: What is the "Public name" field?

What it does:

Defines the public title of your campaign (not displayed to participants if you don't configure it in the Look&Feel)
Automatically sets:
- The Virality > General Content > Title field
- The minisite's meta title
- The title attribute of embedded campaigns (iframe, AMP, Javascript, campaigns feeds, ...)

Why setting up this title is important?

It ensures screen readers announce a clear and descriptive title for your campaigns so all users get context and information about it. It will also enhance SEO through the meta title for minisites, for a better search visibility.

This reduces the manual effort of setting up correctly the title in every place and ensures consistency across all channels.

Meta Information in Minisites

By filling the Public name, the minisite's meta title is now automatically populated. You no longer need to manually define it in Look&Feel unless you want to override it.

Integration Methods (iframe, JavaScript, AMP, ...)

When you embed campaigns:

The Public name automatically sets the iframe's title attribute for screen readers
If no Public name is defined, your internal title will be used as fallback

Ensure your title is descriptive and consistent as it will describe your campaign context to the user dependant on screen readers to attract them to participate to your campaign.

Accessibility Toggle

For formats that supports accessibility mode, enabling the Accessibility Toggle optimizes the experience for users with assistive technologies. Read our dedicated FAQ to learn how to enable it and be more compliant with accessibility requirements.

Testing your Campaign's Accessibility

Before going live, we recommend you test the followings:

Keyboard navigation

Ensure all elements are reachable via Tab, Arrow keys, and Enter
Ensure a visible focus state appears on the currently selected element
Avoid keyboard traps where user cannot exit modals or overlays (there must be an action always available, either by filling something or a close button, ...)

Screen reader compatibility

Use a screen reader to confirm proper reading of your campaign, including reading order and alt texts:

Mac/iPhone: VoiceOver
Windows: JAWS (mostly used) or NVDA
Android: TalkBack

Color accessibility

Use color blindness simulators to check that your content remains understandable without relying solely on color.

To simulate color blindess on your device:

Windows:
- Go to Settings > Accessibility > Color filters and toggle it on
- Choose a filter that matches a type of color deficiency
- Optionally: enable the keyboard shortcut Win + Ctrl + C to quickly turn on and off the filter
Mac:
- Go to System Settings > Accessibility > Display > Color filters and toggle it on
- Choose a filter that matches a type of color deficiency

✅ Do's	❌ Don'ts
✅ Provide useful description of relevant images	❌ Provide meaningless description of images
✅ Leave decorative image description empty	❌ Describe decorative images