ADA/WCAG Remediation Checklist for Shopify Stores

The ADA lawsuit landscape for Shopify stores

ADA Title III web accessibility lawsuits against ecommerce sites have become a predictable cost of doing business in the United States. Thousands of federal complaints are filed each year, the majority target ecommerce storefronts, and Shopify-hosted stores are not exempt. Plaintiffs do not need to prove they intended to purchase. They only need to demonstrate that the site presented barriers a blind, low-vision, motor-impaired, or cognitively impaired user could not reasonably overcome. Most of these cases settle for low to mid five figures plus a remediation commitment. A store owner who thinks the risk is abstract usually learns otherwise when the demand letter arrives.

WCAG 2.1 Level AA is the de facto standard referenced in settlements, Department of Justice guidance, and most state-level accessibility statutes (New York, California Unruh Act, Colorado HB21-1110). WCAG 2.2 AA was finalized in late 2023 and is now what plaintiff firms cite in fresh complaints. The good news is that for a typical Shopify theme, the gap between "completely out of compliance" and "defensible AA" is perhaps two to three weeks of focused work. The bad news is that accessibility overlays sold as a shortcut actively make things worse, and installing one is not a defense. Courts have repeatedly declined to treat overlays as remediation.

This 25-item checklist is the working list we run when auditing a Shopify storefront for ADA and WCAG 2.1 AA conformance. It is organized by the categories that map cleanly to WCAG success criteria and to how plaintiff firms frame their complaints. Work through it in order, fix what is broken, document what you fixed and when, and publish an accessibility statement. That combination closes the door on most demand letters and gives you something to point at if one still shows up.

If your store is on Shopify, our compliance audit hub walks through the full audit package including ADA, GDPR, and the assorted state privacy laws. If the fixes uncover theme-level problems that are not worth patching, our Shopify development service rebuilds themes against WCAG from the start rather than bolting accessibility on after the fact.

Content accessibility

Content accessibility is about making the information on a page readable by someone who is not looking at it the way you are. Screen readers, high-contrast modes, browser zoom up to 400 percent, and text-only rendering all need to produce a usable result.

Alt text is the most-cited failure in ADA complaints because it is the easiest thing for plaintiffs and their automated scans to find. Every product image, every lifestyle image used for context, and every icon that conveys meaning needs a text alternative. The rule is that alt text describes the function the image performs on the page, not the image in isolation. A product photo on a PDP uses the product name. The same photo used as a decorative background on a landing page uses an empty alt (alt="") so screen readers skip it. Shopify theme editors often force alt text through the media library, which is a reasonable default, but collection pages and custom sections almost always need review.

Heading structure carries the semantic outline of the page. A screen reader user navigates by heading the way a sighted user scans by visual hierarchy. One H1 per page (usually the product name on a PDP, the page title on a content page), H2 for section breaks, H3 for subsections, and so on without skipping levels. Shopify themes frequently break this rule by using H2 for decorative marketing blocks or by wrapping entire hero sections in H1 tags. Audit the rendered HTML, not the theme settings.

Color contrast at 4.5:1 for body text and 3:1 for large text (18pt or 14pt bold) is non-negotiable. WebAIM's contrast checker or the built-in axe DevTools scan will flag every failure. The two places we see contrast violations most often on Shopify are sale badges (red text on a red gradient) and placeholder text in forms (#999 on white fails AA). Fix the tokens in the theme CSS, not per-component.

Color cannot be the only way information is conveyed. A red border around a form field is not enough. You need an error icon, the word "error," or an aria-invalid attribute that a screen reader can announce. Same logic applies to sale prices, out-of-stock states, and shipping badges.

Interaction accessibility

Interaction accessibility covers everything a user does with a pointer, a keyboard, a switch device, or voice control. For ecommerce the high-risk interactions are navigation, add-to-cart, cart drawer, checkout, and any popup or modal.

Keyboard navigation is the single most-tested behavior in a manual accessibility audit. Unplug your mouse and try to complete a purchase. Tab moves forward, Shift-Tab moves backward, Enter activates links and submits forms, Space activates buttons and toggles checkboxes, Escape closes modals and dialogs. If you cannot reach a button with the keyboard, or if pressing Tab skips over an interactive element, or if focus disappears into a hidden menu, it fails. Shopify theme Slideshow sections and mega menus are repeat offenders here.

Focus indicators are the visible ring or outline that shows where keyboard focus currently sits. Many themes ship with outline: none in the reset CSS because designers find the default browser ring ugly. Removing focus indicators is a WCAG 2.4.7 failure. The fix is to style the focus ring, not remove it. A 2px solid outline in your brand accent color with a 2px offset reads as intentional design and satisfies the criterion.

A skip-to-content link is a hidden anchor at the top of the page that becomes visible on focus and lets keyboard users jump past the navigation. Shopify's Dawn theme ships with one. Most third-party themes do not. Add one if yours is missing.

Modals and popups need to trap focus while open and restore it on close. A cart drawer that opens but leaves keyboard focus behind the drawer on the product grid is broken. A newsletter popup that cannot be closed with Escape is broken. Check every popup your theme or apps inject, including the ones that only fire on exit intent or after a delay.

Touch targets on mobile need to be at least 44 by 44 CSS pixels. This is WCAG 2.5.5 (Level AAA in 2.1, Level AA in 2.2). Small icon-only buttons in the header (search, account, cart) are the usual failure. Pad them until they hit the target size even if the visual icon stays small.

Form accessibility

Forms are where accessibility failures become revenue failures. A user who cannot complete checkout leaves. Forms are also the single most-scrutinized area in ADA litigation because broken forms block the transaction the ADA protects access to.

Every input needs a programmatically associated label. That means a <label for="email"> tied to <input id="email">, or an aria-label on the input, or an aria-labelledby pointing to visible text. A placeholder is not a label. Floating labels are fine if they use a real label element underneath. Shopify checkout handles this correctly out of the box. Theme-level forms (newsletter signup, contact, wholesale application) often do not.

Error messages need to reach screen readers. Inline validation that only changes the border color or adds a visual message below the field will not be announced. Wrap the error message in an element with role="alert" or aria-live="polite" so assistive tech announces it when it appears. Associate the error with the field using aria-describedby so the error text is read along with the field label on next focus.

Required fields should be marked with both a visual indicator (asterisk, the word "required") and aria-required="true" or the HTML5 required attribute. Error recovery must be possible. A user who submits an invalid form should land focus on the first invalid field with a clear message of what to fix.

For deeper technical-SEO hygiene on forms and the rest of the front-end, our Shopify technical SEO audit walkthrough covers rendering, indexing, and accessibility together because the issues overlap more than most audits admit.

Media accessibility

Video and audio content on product pages, marketing pages, and embedded tutorials all need text alternatives. Captions for video, transcripts for audio, and audio descriptions where visual content carries meaning that is not in the dialogue.

Captions must be accurate. YouTube auto-captions are not compliant because the error rate is too high and they miss speaker identification and non-speech sounds. Pay for real captions or write them yourself. Rev, 3Play Media, and Descript all produce WCAG-compliant caption files. Embed them as WebVTT on self-hosted video or upload them to YouTube as the primary caption track.

Transcripts for podcast audio or voiceover-only content go on the page as text. Not a PDF link, not a downloadable file. Text in the page where a screen reader can reach it.

Animations, parallax scroll effects, and video backgrounds need to respect the prefers-reduced-motion media query. A user who has motion sensitivity set in their OS should not see looping hero video or aggressive scroll-triggered transforms. Wrap the animation CSS in @media (prefers-reduced-motion: no-preference) so it only runs for users who have not opted out.

Autoplay carousels must have a pause control. WCAG 2.2.2 requires that any content that moves, blinks, or auto-updates for more than five seconds have a user-accessible pause mechanism. Most Shopify hero slideshows fail this by default.

Ongoing monitoring

Accessibility is not a one-time project. Theme updates, app installs, new marketing pages, and seasonal campaign landing pages all introduce regressions. The checklist above is the audit pass. The program below is what keeps you compliant between audits.

Run axe DevTools or Lighthouse on every new page before it goes live. Automated scans catch about 30 percent of WCAG violations. That is not sufficient but it is cheap and fast and catches the most common regressions. A Lighthouse accessibility score of 100 means the automated checks passed, not that the page is accessible.

Run a manual screen reader pass on the home page, collection template, product template, cart, and checkout every quarter. NVDA on Windows and VoiceOver on macOS are both free. Twenty minutes with a screen reader will teach you more about your site's accessibility than any automated tool.

Audit third-party apps and widgets the same way you audit first-party code. Reviews widgets, subscription apps, upsell popups, and chat widgets are all common sources of inaccessible content injected into your theme. If a vendor cannot produce a VPAT or ACR documenting their accessibility conformance, treat that as a red flag.

Publish an accessibility statement on a dedicated page. The statement describes the standard you conform to (WCAG 2.1 AA), the date of your last audit, known limitations, and a contact method for users who encounter barriers. A maintained statement with a real contact address is evidence of good-faith effort and carries weight in settlement negotiations.

Document your remediation work. Keep a log of what was fixed, when, and by whom. If a demand letter arrives, your lawyer will want this log.

-> If you want us to run this audit for you, the compliance audit service covers the full 25-point pass plus a screen reader review and a written remediation plan.

-> If the audit turns up structural problems that are easier to rebuild than patch, our Shopify development team rebuilds themes WCAG-first.

-> For the adjacent technical work (rendering, indexing, performance), the Shopify technical SEO audit guide is the companion piece to this one.

-> Download the checklist, work through the 25 items, publish the accessibility statement, and set a quarterly calendar reminder. That is the program. The rest is execution.