Wisepops campaigns are built to work for every visitor, including people who use a keyboard or a screen reader. We design and test them against the Web Content Accessibility Guidelines (WCAG) 2.2, Level AA. That's the standard behind accessibility requirements such as the Americans with Disabilities Act (ADA) and Section 508.
This article covers what your visitors see: popups, bars, embeds and the notification feed. It doesn't cover the Wisepops dashboard.
Accessibility is shared work. Wisepops controls how campaigns are built, and you control what goes in them. Both parts are described below.
Accessibility Conformance Report (VPAT)
We document our conformance criterion by criterion in an Accessibility Conformance Report based on VPAT 2.5. It's available on request for Enterprise accounts.
What Wisepops handles for you
Keyboard:
Everything in a campaign can be reached and used with the keyboard, with a clearly visible focus indicator. Popups keep focus while open and close with Escape.
Screen readers:
Campaigns use standard HTML and ARIA semantics, so screen readers can identify each campaign, read it in order, and announce changes as visitors interact with it.
Forms:
Fields are labeled, errors are described in text, and browsers can autofill common fields.
Zoom and mobile:
Campaigns stay readable and usable at 200% zoom and on small screens.
Motion and sound:
Nothing flashes, and videos never play sound on their own.
What you need to do
Check these points for every campaign:
Images:
Fill in the Alt text field for every image that carries information, and leave it empty for decorative ones. When an image is a link, its alt text should describe where the link goes. Don't put text inside images.
Colors:
Text needs a 4.5:1 contrast ratio against its background (3:1 for large text). Buttons and field borders need 3:1. You can check with the WebAIM Contrast Checker.
Forms:
Give every field a visible label, and don't rely on placeholder text. Mark required fields in the label, for example "Email (required)".
Copy:
Write link and button text that says what it does ("Get my 10% code", not "Click here").
Don't refer to color or position ("click the green button").
Run each campaign in the same language as the page it appears on, and make sure your site declares its language (`<html lang>`).
Videos:
Use videos that have captions.
Countdowns:
If a countdown closes the campaign when it ends, leave visitors enough time to read and act. You can also turn off the auto-close option.
Custom HTML and iframe blocks:
Wisepops can't check this content, so its accessibility is your responsibility.
Custom notification bell:
If you place your own bell instead of the floating one, keep it outside headings and in a logical place in the tab order.
Known limitations
The text editor has no heading styles, so avoid styling text to look like a heading.
Campaigns use your page's language. A campaign written in a different language may be mispronounced by screen readers.
Placeholder text is lighter than 4.5:1, as it is by default in most browsers. Visible labels solve this.