For an online retailer, an inaccessible product page can prevent a customer from choosing a color, confirming a size, adding an item to the cart, or completing a purchase. These barriers can be difficult to see during ordinary visual testing. In 2026, Shopify merchants should evaluate the entire shopping interaction, not just run an automated accessibility scan.
There is a timely business reason to pay attention. EcomBack’s January–June 2026 review reported 952 ADA website accessibility lawsuits involving Shopify-based sites, representing 46.55% of the 2,045 cases in its dataset. These figures describe that researcher's tracked filings, not a finding that Shopify itself is inherently inaccessible or that every merchant has the same legal exposure. Review the report and methodology.
Why Shopify product page accessibility matters
Shopify supports accessible theme development, and its official guidance recommends keyboard-operable controls, descriptive product image alternatives, visible focus, and announcements when selecting a variant changes price or availability. But the actual customer experience depends on a store's theme, customizations, installed applications, third-party widgets, and content. Shopify expressly notes that following its theme best practices alone does not guarantee complete accessibility. Read Shopify’s accessibility guidance.
1. Color swatches must have names and understandable selection states
Consider a customer reviewing a jacket with Black, Navy, and Sand color options. A visual swatch might convey its color through its appearance alone. For a blind shopper using NVDA, JAWS, or VoiceOver, each option needs a meaningful accessible name. The interface also needs to communicate which color is selected.
Developers should use a robust, consistent control pattern, such as a properly labeled native radio group, or correctly implemented buttons with programmatically exposed pressed states where that interaction pattern is appropriate. Avoid relying on a color-only indicator, unlabeled icon, or class name that is invisible to assistive technology. Verify that selecting a swatch updates the selected variant and that the screen reader announces the relevant state.
For radio groups, arrow-key navigation is commonly expected. For button groups, each button should follow the keyboard interaction pattern of a button. Test actual controls rather than assuming that the visual appearance establishes the correct role. Related WCAG criteria may include 4.1.2 Name, Role, Value, 1.3.1 Info and Relationships, 1.4.1 Use of Color, and 2.1.1 Keyboard, depending on the particular implementation and failure.
2. Size selectors need labels, available options, and feedback
A product may offer Small, Medium, Large, and Extra Large, but not every size is in stock. A shopper must be able to determine which sizes are available, navigate to an option, select it, and confirm the result. Simply adding an aria-label to an otherwise inoperable custom widget is not enough.
Use native select or radio controls where they fit the design. If you build a custom selector, verify focus behavior, names, states, and keyboard operation. Communicate sold-out or unavailable options in a way users can perceive. Do not create a visually disabled control that remains misleadingly actionable for screen reader users.
3. Announce price and inventory changes after a variant is selected
Changing from one color or size to another may update the price, promotional discount, shipping information, or availability without reloading the page. Those changes are essential purchasing information. Shopify’s accessibility documentation specifically recommends communicating dynamic price and availability changes to screen readers, including through appropriate live-region behavior.
Test whether the announcement is brief, relevant, and reliable. A live region that repeatedly announces an entire product card can be as disruptive as no announcement. Place emphasis on meaningful results such as “Navy, Medium selected. $79. In stock.” The exact phrasing and technique depend on the interface, and announcements must be tested in supported browser and assistive-technology combinations.
4. An Add to Cart action needs perceivable confirmation
A shopper presses Add to Cart. The cart count changes from zero to one, but nothing is announced. The user cannot confidently tell whether the item was added, whether it failed, or whether further action is required. This is a common dynamic-interface testing scenario.
Ensure that meaningful success and error feedback can be presented by assistive technology without requiring the user to discover it visually. WCAG 4.1.3 Status Messages can be relevant to an unannounced add-to-cart confirmation. The appropriate criterion depends on the actual implementation and user impact. Do not use disruptive focus changes merely to compensate for missing status feedback.
5. Test the mini-cart and cart drawer as complete interactions
Many Shopify themes and shopping apps open a drawer immediately after an item is added. The drawer can become a serious barrier when focus remains behind it, background controls are still reachable, the close button has no usable name, or Escape cannot close an implemented modal dialog.
If a drawer functions as a modal, use appropriate dialog semantics and manage keyboard focus accordingly. When it opens, focus should move to a sensible location within it; users should not inadvertently Tab through background content. When the drawer closes, focus should ordinarily return to the triggering element if it still exists. If the drawer is nonmodal, follow the semantics and focus behavior of a genuinely nonmodal interface instead. WCAG 2.4.3 Focus Order, 2.1.1 Keyboard, and 4.1.2 Name, Role, Value may be relevant.
6. Do not stop testing when the checkout button becomes reachable
Example of an online shopping interface. Photo: Ivan S / Pexels.Accessibility is not demonstrated merely because one tester eventually reaches checkout. The journey must remain understandable and operable throughout. Test required-field errors, delivery options, discount-code feedback, payment-method controls, review steps, and confirmation messages wherever these are part of the store's actual purchase flow.
Some checkout behavior is managed through the platform, while store-specific extensions and applications can introduce separate interface risks. Evaluate what the merchant can configure or develop, and record issues in third-party components so they can be addressed by the responsible vendor.
7. Use both automated checks and manual screen reader testing
Automated tools can help find missing labels, invalid attributes, and certain detectable issues at scale. They cannot consistently establish whether a screen reader user understands variant selection, perceives confirmation feedback, or completes the purchase successfully. Manual testing should cover the product page and interactive states, not just the initial DOM.
We recommend testing keyboard-only operation and representative screen reader/browser combinations: NVDA with Chrome on Windows, JAWS with Chrome on Windows, VoiceOver with Safari on macOS, VoiceOver with Safari on iOS, and TalkBack with Chrome on Android as applicable to the project scope. Record browser and assistive-technology versions so findings can be reproduced.
Practical Shopify product page accessibility test checklist
- Can users reach each interactive control using the expected keyboard commands?
- Are color and size controls announced with meaningful labels, roles, and selection states?
- Do sold-out variants communicate their availability clearly?
- Are price, stock, and other important variant updates perceivable?
- Does Add to Cart produce a reliable success or failure announcement?
- If a mini-cart opens, are its semantics, focus movement, dismissal, and background interaction appropriate?
- Can a user complete the intended purchase flow without unexplained focus loss or inaccessible form feedback?
- Have fixes been retested with assistive technology, not only re-scanned?
How a technical audit helps Shopify merchants
An effective Shopify accessibility audit documents the exact problem, affected URL and state, reproduction steps, assistive-technology behavior, applicable WCAG success criteria, and developer-ready remediation recommendations. It also prioritizes components used repeatedly across products, such as swatches, variant pickers, cart drawers, and checkout extensions.
ADA Access Group performs manual keyboard and screen reader testing alongside automated analysis. Our reports distinguish observed barriers from suspected issues and can support a structured remediation and retesting process. For retailers responding to a demand letter or litigation, technical findings may also help counsel understand the site's current condition and the changes made; legal conclusions remain with qualified counsel.
Need to understand whether your Shopify product pages work for screen reader users? Contact ADA Access Group for a website accessibility assessment.