Accessibility
Accessible Popups: Designing a Spin-to-Win Wheel Everyone Can Use
Build a popup that works for everyone. Learn the accessible design practices behind Profiter's wheel, from keyboard focus traps to a 14 KB payload that respects every user's connection.
A keyboard-only shopper lands on your store, and a wheel pops up over the page. If the dialog doesn’t trap focus properly, the tab key takes them somewhere behind the modal — a link, a menu item, anywhere but the wheel — and they can’t reach the spin button or the close icon. They’re not blocked by disinterest. They’re blocked by code.
That shopper has two options: give up and leave, or fight the tab key until something works. Either way, the popup you installed to add a sale just cost you one instead.
A popup only helps your store if the person seeing it can act on it. An inaccessible control is a broken control, and a broken control costs you the sale whatever the compliance picture looks like. The four principles behind accessible design make a useful frame for walking through what that takes: perceivable, operable, understandable, and robust.
Perceivable: Can everyone see and hear it?
Information can’t be invisible to a shopper’s senses. If the experience relies only on sight or only on sound, it will fail for someone.
Screen readers hear what sighted shoppers see
The wheel spins, slows, and lands on a slice — all visual. A shopper using a screen reader can’t watch that happen, so Profiter marks the popup up with proper ARIA dialog semantics and announces the result through a live region the moment the spin ends.
Practically, that means the screen reader reads out the prize — “10% off,” “Free shipping,” whatever the slice says — without the shopper needing to hunt for it on screen. The result reaches them the same moment it reaches everyone else, through the channel they’re actually using.
Colors have enough contrast to be read
Low-contrast text is hard to read in direct sunlight, on a low-quality screen, or for a person with low vision. Profiter’s color combinations are checked for a minimum AA contrast ratio before they ship as a theme, so text stays readable against its background regardless of which of the six themes or custom color set a merchant picks.
Operable: Can everyone use it?
An interface a shopper can perceive but not operate is a dead end. Every interactive element must work with a mouse, a keyboard, a screen reader, and a finger.
Keyboard focus stays where the dialog is
Profiter’s wheel traps keyboard focus inside the dialog while it’s open, with visible focus rings so a keyboard user can always see where they are. Tab moves between the spin button, the form fields, and the close control — never out to the page underneath, and never into a dead end with no way back out.
That second part matters as much as the first. A focus trap that locks someone in with no visible way to leave is worse than no trap at all. The close control stays reachable and keyboard-operable at every step, so dismissing the wheel takes the same one keystroke it would for a mouse user clicking the X.
Big targets are easy to hit
Small buttons are a mobile problem before they’re an accessibility problem — a thumb misses a 30px tap target far more often than a 48px one. Profiter’s interactive elements meet a minimum touch target size of at least 48x48 pixels, giving every user a forgiving target for their click or tap.
Motion is brief and user-initiated
Spinning wheels are built to feel kinetic — that’s the point of the format. Profiter keeps that motion inside deliberate bounds instead of scattering it everywhere: the wheel only spins after the shopper explicitly taps the spin button, the animation runs once for about four seconds and stops, and nothing loops or auto-plays in the background while the popup is open.
One trade-off, made openly: the spin plays even when the prefers-reduced-motion setting is on. Many phones ship with Reduce Motion enabled for battery or preference reasons, and a wheel that doesn’t visibly spin reads as broken — shoppers assume the popup failed and leave. Because the animation is short, singular, and only ever a direct response to the shopper’s own tap, we choose the version that everyone can actually use. The prize is decided server-side before the wheel starts moving, so the motion is presentation only — the odds never depend on it.
Understandable: Is the experience clear?
An accessible interface is a predictable one. The process for using the wheel is simple by design: spin, see the prize, and get a code. There are no complex steps or confusing terms. The goal is to add a moment of fun, not a puzzle to solve.
Robust: Does it work everywhere?
A popup has to load before it can be used. On a slow mobile connection or throttled public Wi-Fi, a heavy script is just as much of a barrier as a missing ARIA tag. We build Profiter to be lightweight by design, gating every new feature against a strict performance budget.
The entire storefront experience loads in two files totaling just over 13 KB.
| Asset | Raw | gzip | brotli |
|---|---|---|---|
wheel.js | 21,293 B | 8,681 B | 7,759 B |
wheel.css | 23,847 B | 6,731 B | 5,742 B |
| Total | 45,140 B | 15,412 B | 13,501 B |
Data measured 28 July 2026 from the built extension assets.
This small footprint ensures the popup doesn’t block the rest of your page from loading and remains usable even on slow networks. For context, the most-reviewed competing wheel app on Shopify loads 11 files totaling 94,236 B (gzipped) before a shopper does anything.
Can popups be ADA compliant?
The Americans with Disabilities Act (ADA) doesn’t provide a technical checklist for websites. Instead, it’s a civil rights law that requires businesses to provide equal access to their services. Whether a specific popup is “compliant” depends on whether it creates a barrier for a person with a disability in a specific context.
Rather than claiming a legal status like “ADA compliant” or a specific WCAG conformance level, we focus on the verifiable implementation details that support the goal of equal access. The practices described here are not a badge on a landing page; they are implementation details you can go check in the theme extension code.
Accessible isn’t an add-on mode you switch on for some shoppers and off for others. It’s the same wheel, the same focus trap, the same announcement — running by default for everyone who sees it.