MetricLabs
Coming soon

WCAG Popups

Every popup, perfectly accessible

WCAG Popups automatically audits and remediates your Shopify storefront's overlays - focus trapping, ARIA roles, keyboard handlers, and contrast checks - so every visitor can use your popups, not just sighted mouse users.

See features
shop.example.com
No role="dialog"
Focus not trapped
No aria-labelledby
Escape key ignored

10% off your first order

Sign up to unlock your discount

The problem

Your popups are excluding 1 in 4 customers

Screen reader users, keyboard-only navigators, and those with low vision can't dismiss your cookie banner, interact with your email capture modal, or trigger your exit-intent offer. That's not just a legal liability - it's lost revenue and eroded trust from the 26% of people who have a disability affecting how they use the web.

The solution

Automatic WCAG 2.2 compliance for every overlay

WCAG Popups hooks into your Shopify theme at the script level, scans every popup on load, and injects the missing accessibility layer: correct ARIA roles, keyboard focus trapping, Escape key handling, and live contrast validation. Your design is untouched. Your conversion rates improve. Your audit comes back clean.

Everything you need

Purpose-built for Shopify stores that take performance seriously.

  • Auto Focus Trapping

    Keyboard focus is locked inside modals when open and restored to the trigger on close - exactly as WCAG 2.1 SC 2.1.2 requires.

  • ARIA Role Injection

    Missing dialog and alertdialog roles, aria-labelledby, and aria-describedby attributes are added automatically at runtime.

  • Escape Key Handler

    Every overlay gains a proper Escape key listener that fires the close action without disrupting other keyboard shortcuts.

  • Contrast Auditor

    Real-time contrast analysis flags text that fails WCAG AA (4.5:1) or AAA (7:1) thresholds before your customers see it.

  • Screen Reader Preview

    Simulate how VoiceOver and NVDA will announce your modals, so you can hear problems before shipping.

  • Compliance Report

    Generate a branded, shareable WCAG 2.2 compliance report for your legal team or enterprise clients in one click.

How it works

Under the hood, so you don't have to be.

Fix broken focus trapping in one line

Most popup libraries forget to implement focus trapping, leaving keyboard users stranded outside your modal. WCAG Popups detects this in milliseconds and wraps the modal with a focus guard that cycles through all interactive elements - Tab, Shift+Tab, and all - without any changes to your theme code.

ARIA roles your screen reader actually understands

A div with a close button is not a dialog. WCAG Popups upgrades your popup markup with the correct role='dialog' or role='alertdialog', wires in aria-labelledby pointing to your modal headline, and adds aria-describedby for your body copy. VoiceOver and NVDA will now announce 'Newsletter sign-up, dialog' - not silence.

Live contrast validation before it ships

The Contrast Auditor runs in your browser as you edit popup styles in the Shopify theme editor. A real-time badge shows pass/fail for WCAG AA and AAA. Export a full colour-contrast report for your design review or legal compliance audit.

Frequently asked questions

We support WCAG 2.1 and WCAG 2.2 at both AA and AAA levels. The auto-remediation engine targets AA compliance (the legal standard in most jurisdictions) while the Contrast Auditor surfaces AAA issues as advisory warnings.
No. WCAG Popups injects accessibility attributes and event handlers only - it never modifies your CSS or HTML structure. Your popup looks exactly the same; it just works for everyone.
Yes. WCAG Popups operates at the DOM level and is compatible with any popup library that renders to the page. It has been tested with Klaviyo forms, Privy overlays, Justuno campaigns, OptinMonster, and custom Shopify theme sections.
On Pro and Agency plans, generate a compliance report from your MetricLabs dashboard at any time. The report is a timestamped PDF listing every popup, the issues found, the fixes applied, and the resulting WCAG 2.2 level achieved.
WCAG Popups automates the overlay-specific subset of WCAG 2.2. We recommend pairing it with a full site audit for complete coverage. We partner with certified accessibility consultancies and can refer you if needed.

More from MetricLabs