This post is for information only. You are responsible for reviewing and using this information appropriately. This content doesn’t contain and isn’t meant to provide legal, tax, or business advice. Requirements are updated frequently and you should make sure to do your own research and reach out to professional legal, tax, and business advisers, as needed. To sell products using the Shopify platform, you must comply with the laws of the jurisdiction of your business and your customers, the Shopify Terms of Service, the Shopify Acceptable Use Policy, and any other applicable policies.
An ADA-compliant website gives people with disabilities equal access to its content and services under the Americans with Disabilities Act (ADA). For an online store, that includes browsing products and completing purchases with assistive technology.
More than one in four US adults has a disability, according to the Centers for Disease Control and Prevention (CDC). An unlabeled checkout field can stop a shopper using a screen reader from placing an order.
This guide explains how the ADA applies to websites, how accessibility guidelines differ from legal requirements, and how to make your online store more accessible using a practical checklist and Shopify-specific guidance.
What is ADA compliance?
ADA compliance means meeting the requirements of the Americans with Disabilities Act, a federal law passed in 1990 that prohibits disability discrimination. Three titles of the ADA are relevant to digital accessibility:
- Title I: Covers employment for employers with 15 or more employees.
- Title II: Covers state and local government programs, services, and activities.
- Title III: Covers public accommodations, such as retail stores.
The Department of Justice (DOJ) says Title III accessibility obligations extend to online goods and services. Courts differ on how Title III applies to websites, particularly those operated by online-only businesses.
California’s Unruh Civil Rights Act prohibits disability discrimination by business establishments. An ADA violation by a business establishment also violates the Unruh Act.
For businesses selling to EU consumers, the European Accessibility Act sets accessibility requirements for covered ecommerce services. The rules took effect on June 28, 2025, with transition provisions and exemptions, including for microenterprises providing services.
What are the web content accessibility guidelines?
The Web Content Accessibility Guidelines (WCAG) are technical standards for making web content accessible to people with disabilities. The World Wide Web Consortium (W3C) publishes the guidelines. WCAG 2.2 is the latest finalized version.
WCAG 2.2 has three conformance levels:
- Level A: Basic accessibility criteria, including keyboard navigation and alternative text for images.
- Level AA: All Level A criteria plus additional requirements, such as a minimum contrast ratio of 4.5:1 for most text.
- Level AAA: All Level A and AA criteria plus stricter requirements, such as a minimum contrast ratio of 7:1 for most text.
Aim for WCAG 2.2 Level AA when planning accessibility improvements for your online store. Audit the site against those criteria and fix the barriers they identify. For example, a customer navigating by keyboard needs to select a product size, add the item to their cart, and complete checkout.
For businesses covered by Title III, the ADA requires equal access to goods and services. The DOJ identifies WCAG as technical guidance for meeting that obligation. However, WCAG 2.2 Level AA isn’t a universally mandated legal standard for private businesses under Title III.
Shopify also uses WCAG 2.2 Level AA to guide accessibility testing of its content and features and provides accessibility guidance for developers.
Why website accessibility matters
Accessible design helps customers read product details, navigate your store, and complete checkout. Sara Mote, creative director of digital design agency Studio Mote, recommends discussing your legal obligations with counsel. She also treats accessibility as part of good design.
“Certain designs are best practices not just for accessibility, but for the overall user experience—because there’s a lot of crossover,” she says.
“Accessibility is something that comes back to cognitive ease,” Sara says. “It’s really advantageous to consider this within design and make choices that allow a user to seamlessly flow through the site.”
A few additional reasons to make your website accessible:
- Ethics. Accessible websites give people with disabilities more independence when shopping and accessing services.
- Revenue potential. Removing barriers from product selection and checkout gives more customers a usable path to purchase.
- Liability. Inaccessible websites can expose businesses to legal claims. Plaintiffs filed 3,117 website accessibility lawsuits in federal court in 2025, a 27% increase from 2024, according to Seyfarth’s analysis.
Website ADA compliance checklist
The following checks address common accessibility barriers across product pages, forms, and checkout. They aren’t an exhaustive compliance test, but they can help you identify issues to address yourself or with a developer. Each list item references relevant WCAG 2.2 success criteria:
- Provide captions and audio descriptions for every video
- Use the right contrast ratio
- Let users resize text and adjust spacing
- Add ARIA labels to buttons, icons, and form fields
- Include a “skip to main content” link at the top of each web page
- Keep flashing elements below seizure-safe thresholds
- Keep focus inside pop-ups and offer a keyboard-friendly close button
- Show form errors in text and programmatically link them to the right fields
- Write descriptive CTAs
- Pair automated scans with manual checks
1. Provide captions and audio descriptions for every video
Caption speech and meaningful sounds in prerecorded videos so visitors who are deaf or hard of hearing can follow the content. Under Criterion 1.2.2, Captions, this requirement is at Level A. If you rely on automated captions, give them a human review to catch transcription errors and sync issues.
For visual-heavy media, like a product demo where steps are shown but never spoken aloud, add an audio description track. WCAG Criterion 1.2.5 (Audio Description, Level AA) sets this standard.
If your video’s voice-over already explains every key action shown on screen, you don’t need an extra audio track. For silent video, providing a text transcript can help meet Criterion 1.2.1.
2. Use the right contrast ratio
Standard body copy needs a contrast ratio of at least 4.5:1 against its background. For large text (at least 18 point regular or 14 point bold), the threshold relaxes slightly to 3:1 under Criterion 1.4.3 (Contrast Minimum, Level AA). This can apply to an input border or a checkbox’s selected state.
Check your color combinations with WebAIM’s Contrast Checker and watch out for Add to Cart buttons. Test the contrast of the button’s label against its background fill, and test the button’s border against the page background.
3. Let users resize text and adjust spacing
Your layout should give visitors room to customize their reading experience:
- Text Zoom (Criterion 1.4.4, Level AA). Users must be able to zoom text up to 200% without overlapping paragraphs, clipping product prices, or breaking layout containers.
- Text Spacing (Criterion 1.4.12, Level AA). Your design must accommodate user-applied increases in line height, paragraph spacing, letter spacing, and word spacing without hiding content behind fixed-height divs.
Test a product page at 200% zoom and with increased text spacing. Check that prices stay visible, descriptions fit their containers, and button labels stay readable.
4. Add ARIA labels to buttons, icons, and form fields
Give interactive elements meaningful accessible names—the labels assistive technology announces. Prefer native HTML controls, such as <button>, and associate each form field with a visible <label>.
Add ARIA where the markup needs additional information. For example, Taylor Stitch’s search icon has the accessible name “Open Search,” which identifies the function of the magnifying-glass icon.
Criterion 4.1.2, Name, Role, Value, at Level A requires controls to expose their names, roles, and relevant states to assistive technology. No ARIA is better than broken ARIA. Misconfigured attributes can easily silence working native labels or confuse assistive devices.
5. Include a “Skip to main content” link at the top of each web page
Place a hidden “Skip to content” link at the very top of your page’s HTML. It stays tucked away until a user presses the Tab key, at which point it becomes visible.
Activating it with Enter should move keyboard focus straight to your <main> tag. This addresses Criterion 2.4.1 (Bypass Blocks, Level A).
Taylor Stitch has a “Skip to content” link on its website. Test your own link by loading a page, pressing Tab, and activating the link with Enter. Check that the next Tab press continues through the main content.
6. Keep flashing elements below seizure-safe thresholds
Flashing content can trigger photosensitive seizures. Under Criterion 2.3.1 (Three Flashes or Below Threshold, Level A), nothing on your site should flash more than three times within any one-second window, and flashing must stay below strict general- and red-flash thresholds. When in doubt, avoid rapid strobe effects entirely.
Sliding banners, scrolling text, and other motion need separate checks. Criterion 2.2.2, Pause, Stop, Hide, generally requires a way to pause, stop, or hide automatically moving content that lasts more than five seconds and appears with other content.
7. Keep focus inside pop-ups and offer a keyboard-friendly close button
Pop-ups and flyout drawers temporarily block the rest of the site, so users need to be able to navigate them with a keyboard:
- On open. Shift focus to an element inside the dialog (such as the first form field or modal heading).
- While open. Keep Tab and Shift+Tab strictly within the modal. Users shouldn’t accidentally tab into the dimmed page behind it.
- On close. Provide a visible close button, support the Escape key, and return keyboard focus to the exact button that opened the modal.
These patterns satisfy Criterion 2.1.1 (Keyboard), 2.1.2 (No Keyboard Trap), and 2.4.3 (Focus Order) at Level A, and Criterion 2.4.7 (Focus Visible, Level AA) ensures the user’s focus ring remains visible at every step.
8. Show form errors in text and programmatically link them to the right fields
When a customer makes an error filling out shipping details, turning the input border red isn’t enough.
- State the problem. Provide a clear, written explanation adjacent to the field (e.g., “Enter an email address formatted like [email protected]”).
- Connect the code. Link the error text to the input using aria-describedby and set aria-invalid="true". This ensures screen readers announce the exact error when a user focuses on the field.
These practices satisfy Criterion 3.3.1 (Error Identification, Level A) and Criterion 3.3.3 (Error Suggestion, Level AA).
Check sign-in and account verification, too. Support password-manager autofill and allow visitors to paste passwords and verification codes. These mechanisms help users meet the requirements of Criterion 3.3.8, Accessible Authentication (Minimum), at Level AA.
9. Write descriptive CTAs
Write button labels and link text that explain the action or destination. Brooklinen’s “Find Your Store” link directs visitors to its store locator and communicates that purpose before they activate it.
Criterion 2.4.4, Link Purpose (In Context), at Level A requires visitors to be able to determine a link’s purpose from its text or associated context.
If a control has an ARIA label, include its visible wording in the accessible name. This supports speech input under Criterion 2.5.3, Label in Name, at Level A.
10. Pair automated scans with manual checks
Automated accessibility tools such as axe and Lighthouse can flag issues such as missing accessible names and some contrast failures.
Web accessibility apps vary in scope, and automated scans cover only part of the WCAG requirements. Fixes may require changes to your theme, content, or third-party components.
In April 2025, the FTC approved a final order requiring accessiBe to pay $1 million. The settlement addressed allegations that the company misrepresented its automated tool’s ability to make any website WCAG-compliant. The order bars such claims unless evidence supports them.
Make accessibility testing part of your regular store maintenance:
- Run self-checks. Navigate the purchase process with a keyboard, check pages at 200% zoom, and review video captions. Test product selection, cart controls, forms, and checkout.
- Run automated scans. Check representative page templates and interactive states, including open dialogs and displayed form errors. Review the findings and retest after fixes.
- Arrange manual evaluation. Have an accessibility specialist assess keyboard behavior and screen reader output, and complete purchasing tasks. Involve people with disabilities in usability testing.
Repeat these checks after changes to your theme, apps, or content.
How to make your Shopify store ADA compliant
The checklist above provides a starting point for evaluating your store’s accessibility. Here’s how to apply those recommendations using Shopify’s themes, tools, and resources.
Shopify tests and improves the accessibility of its own products, including checkout. You’re responsible for the website accessibility of your storefront content, installed apps, and theme customizations.
You can report issues in Shopify’s platform features to Shopify, and work with theme or app developers on problems in their code.
Evaluate a theme before purchase
Preview a paid theme with your own products before buying it. Follow Shopify’s theme accessibility guidelines as you assess the preview.
Using only a keyboard, check that you can select a product variant and add it to the cart. Make sure the focus indicator is visible. Enlarge the page to 200% and check for clipped text or overlapping controls.
Ask the theme developer for recent accessibility test results and details of unresolved issues.
Publish accessible content with Shopify’s tools
Add alt text to product images in Shopify admin and to section images in the theme editor. Describe the image’s relevant details, such as the fastenings on a jacket.
Apply heading styles in the rich text editor in a logical sequence. Adjust colors and typography in your theme settings, then check text contrast against WCAG requirements. Preview your edits and verify how headings and image descriptions are announced by a screen reader.
Choose apps and professional help for specific needs
Consider a third-party accessibility app for recurring scans or help managing a large image catalog. Review which tasks it performs and which findings require manual fixes. Test any storefront features the app adds.
Hire an accessibility specialist when custom code or app interactions create problems your team can’t evaluate. Request manual keyboard and screen reader testing, prioritized fixes, and retesting after repairs. Include the complete checkout process in the audit.
ADA compliant website FAQ
What are ADA compliant websites?
ADA-compliant websites meet the accessibility obligations of the Americans with Disabilities Act. They allow people with disabilities to access online information and services. For example, a shopper who uses a screen reader can understand product details and complete checkout.
How do you get your website to become ADA compliant?
Arrange an accessibility audit, with WCAG 2.2 Level AA as a technical benchmark. Fix identified barriers and retest with a keyboard and screen reader. Confirm the legal requirements that apply to your business, and repeat accessibility checks after changes to your content, design, or software.
How much does it cost to achieve ADA compliance?
Costs depend on your site’s complexity and the repairs needed. For example, WebAIM says most initial evaluations cost $2,000 to $8,000 and cover a representative page sample and some consultation. Budget separately for implementing fixes and follow-up testing.
Can you be sued if your website is not ADA compliant?
Businesses covered by the ADA can face lawsuits when website barriers deny people with disabilities equal access to goods or services. If you receive a complaint or demand letter, consult an attorney and arrange an accessibility evaluation.
How do I check to see if a website is ADA compliant?
Run an automated scan, then test key tasks with a keyboard and screen reader. Check the full shopping process, including forms and checkout. A professional audit can evaluate WCAG conformance and identify barriers that automated tools miss. A legal review can assess the obligations that apply to your business.
