What ADA and WCAG mean
The ADA (Americans with Disabilities Act) is a U.S. civil rights law that prohibits discrimination against people with disabilities. U.S. courts have increasingly applied it to websites, especially e-commerce stores.
WCAG (Web Content Accessibility Guidelines) is the technical standard used to measure whether a website is accessible. The ADA itself doesn't list technical rules for websites, so WCAG 2.1 Level AA is the benchmark.
In practice, an accessible site works for people who:
Are blind or have low vision and use a screen reader or screen magnifier
Are color blind or need high contrast to read text
Can't use a mouse and navigate with a keyboard, switch device, or voice control
Have cognitive or learning disabilities and benefit from clear, predictable layouts
Are sensitive to motion or flashing content
Does the ADA apply to my business?
If you sell to U.S. customers online, it's safest to assume yes. The ADA commonly applies to:
Businesses open to the public, including retail stores and restaurants, and their websites
E-commerce stores selling products or services to U.S. shoppers, even if the business is based elsewhere
Employers with 15 or more employees (under the ADA's employment provisions)
Organizations that receive government funding or contract with government agencies
Other regions have similar rules, such as the Accessibility for Ontarians with Disabilities Act (AODA) in Canada and the European Accessibility Act (EAA) in the EU. Most of them also reference WCAG. Even where it isn't legally required, accessibility reduces legal risk and makes your store easier for every shopper to use.
đĄNote: This isn't legal advice. Every business is different, so we recommend speaking with your legal counsel about how accessibility laws apply to you.
Accessibility features in Alia popups
Alia popups include these features by default, so there's nothing to turn on.
Feature | What it does | Who it helps |
Keyboard access | Every button, input, and option can be reached and used with a keyboard alone | People who can't use a mouse, including switch and voice control users |
Focus management | When a popup opens, keyboard focus moves into it and stays there until the popup closes, so shoppers don't tab into the page behind it | Keyboard and screen reader users |
Screen reader labeling | Headings, form fields, and buttons are structured so screen readers can announce them with meaningful names | Blind and low-vision shoppers |
Readable default design | Default templates use legible font sizes and strong text-to-background contrast | Low-vision and color-blind shoppers |
Consistent behavior | Popups behave predictably across screen sizes, devices, and input methods | Everyone, especially assistive technology users |
Keyboard controls
Shoppers can complete an Alia popup using only these keys:
Key | Action |
Tab | Move to the next button, field, or option |
Shift + Tab | Move to the previous element |
Enter or Space | Press a button or select an option |
Arrow keys | Move between choices in a group, such as quiz answers |
Esc | Close the popup |
When the popup closes, focus should return to where the shopper was on the page, so they can keep browsing without starting over.
What a screen reader user experiences
Here's an example of what a shopper using VoiceOver might hear on a typical email signup popup. Exact wording varies by screen reader, browser, and your popup's content.
The popup opens and focus moves into it. The screen reader announces the popup and its headline, for example: "Dialog. Get 10% off your first order, heading level 2."
The shopper presses Tab to reach the email field: "Email address, edit text, required."
They type their email and press Tab: "Get my discount, button."
If the email is invalid, the error is announced: "Please enter a valid email address."
After submitting, the success message is announced, such as "Your code is WELCOME10."
They press Esc or Tab to close the popup and press Enter. Focus returns to the page.
For quiz and multi-step popups, each question is announced as it appears, and answer choices are read as buttons or options the shopper can select with the keyboard.
Test your popup with a screen reader
The best way to check your popup is to try it yourself. Most devices include a free screen reader.
Screen reader | Platform | How to turn it on |
VoiceOver | Mac | Press Command + F5 |
VoiceOver | iPhone, iPad | Settings > Accessibility > VoiceOver |
TalkBack | Android | Settings > Accessibility > TalkBack |
Narrator | Windows | Press Windows + Ctrl + Enter |
NVDA | Windows (free download) | Download from nvaccess.org, then press Ctrl + Alt + N |
JAWS | Windows (paid) | Launch JAWS from the Start menu |
A quick 2-minute test:
Open a page where your popup appears and turn on the screen reader
Confirm the headline is read aloud when the popup opens
Tab through every element and check each one is announced with a clear name
Submit the form using only the keyboard
Close the popup and confirm you land back on the page
How to keep your popups accessible
Alia provides the accessible foundation, and the content, colors, images, and wording you add make each popup your own. These tips help your design choices work for every shopper.
Area | Do this | Avoid this |
Color contrast | Keep body text at a 4.5:1 contrast ratio or higher against its background (3:1 for large text and buttons). Check with a free tool like WebAIM's Contrast Checker. | Light gray text on white, or brand colors that look similar side by side |
Text in images | Put your offer and headline in real text fields | Baking "10% OFF" into a background image, which screen readers can't read |
Images | Add short alt text to meaningful images, such as "Model wearing the Linen Shirt in sage" | Leaving alt text blank on product images, or writing "image" |
Button labels | Use clear action words, such as "Get my 10% off" or "No thanks" | Vague labels like "Click here" or "Submit" |
Form fields | Keep a visible label on every field | Relying on placeholder text alone, which disappears as shoppers type |
Color alone | Pair color with text or icons, such as "Required" next to a field | Using only red to show an error |
Font size | Keep body text at 16px or larger | Small fine print for key terms |
Motion | Keep animations short and subtle | Flashing, spinning, or auto-playing effects |
Timing | Give shoppers time to read and act | Countdown timers that close the popup automatically |
Close option | Keep a visible close button on every popup | Hiding or shrinking the close button |
đĄNote: Your content matters. Colors, images, custom CSS, and custom code you add can affect contrast and how screen readers read the popup. Following the checklist above keeps your popups in line with our defaults.
FAQ
Which accessibility features do Alia popups include?
Keyboard access, focus management, screen reader labeling, readable default designs, and consistent behavior across devices. See the feature table above for details.
Does Alia cover accessibility for my whole website?
Alia covers the popups it powers. Your theme, product pages, and checkout are worth reviewing separately. See Shopifyâs Ada Compliant Website: 10-Point Checklist.
Do I need to set anything up?
No. Accessibility features are built into every popup. Follow the checklist above to keep your content accessible.
Does Alia work alongside accessibility overlay apps?
Alia popups don't depend on overlay tools. If you use one, test your popup with a screen reader to make sure the two don't conflict.
I found an accessibility issue. What should I do?
Contact us through chat in Alia. Include the popup name, the page URL, your browser, and the assistive technology you used. We prioritize accessibility fixes.