ADA Compliance for E-Commerce Product Pages: A Practical Guide
Your product pages are where the money is made. They're also where a surprising number of ADA accessibility failures live.
It's easy to focus on checkout flow when thinking about e-commerce accessibility — and the checkout matters, a lot — but the path to purchase starts with your product pages. If a user with a visual impairment can't understand your product images, or a user with a motor disability can't add an item to their cart, you've lost them before they even reach checkout.
This guide covers the specific accessibility requirements that apply to e-commerce product pages, the most common violations, and what you can actually do to fix them.
Why Product Pages Are a High-Risk Area
In 2025, 5,114 federal ADA website accessibility lawsuits targeted online businesses — a 37% increase year-over-year. E-commerce is disproportionately represented in those numbers. Product pages are commonly cited in complaints because:
1. They're complex: images, pricing, variants, reviews, and add-to-cart buttons all packed into one page
2. They're often dynamically generated from databases, making systematic accessibility fixes harder
3. Product images are almost universally under-described in alt text
4. Interactive elements (color swatches, size selectors, quantity inputs) frequently fail keyboard navigation tests
A user with a screen reader visiting an inaccessible product page doesn't just have a bad experience — they literally cannot determine what they're looking at, whether it comes in their size, or whether it's in stock.
Product Images: The Alt Text Problem
Product images are the most commonly violated accessibility element in e-commerce.
What the law requires
Under WCAG 2.1 Success Criterion 1.1.1, every meaningful image must have a text alternative that conveys the same information a sighted user would get from the image. For e-commerce, this means alt text that actually describes the product.
What stores typically do wrong
Too vague:
\\\html
\\\
Too keyword-stuffed (also wrong — this isn't for SEO):
\\\html
\\\
What good alt text looks like:
\\\html
\\\
Decorative images don't need alt text — but most product images aren't decorative
If an image conveys product information (color, material, construction, fit), it's functional, not decorative. Only use \alt=""\ for images that are purely visual decoration (backgrounds, dividers).
Image zoom and gallery navigation
Many product pages include image zoom functionality and multi-image galleries. These must be:
- Keyboard operable: Users should be able to navigate gallery images using arrow keys or Tab
- Screen reader announced: When a new image loads, screen readers should be informed ("Image 2 of 5: side view")
- Zoom content described: If zoomed content shows additional detail not visible in the main image, that detail should be available in alt text or nearby text
Pricing and Availability: Screen Reader Compatibility
Pricing is critical information. It needs to be unambiguous to assistive technology.
Common pricing problems
Sale prices without context:
\\\html
$49.99
$34.99
Original price: $49.99
Sale price: $34.99
\\\
Stock status that only uses color:
If "In Stock" appears in green and "Out of Stock" in red with no text difference, color-blind users and screen reader users won't get the right information. Stock status must be communicated in text.
Dynamic price updates without announcement:
When a user selects a variant (e.g., choosing a size bundle that changes the price), the price update must be announced to screen readers using ARIA live regions:
\\\html
$34.99
\\\
Product Variants: Size, Color, and Option Selectors
Variant selection is where e-commerce accessibility frequently breaks down entirely.
The color swatch problem
Colored circles or squares for color selection are visually obvious but typically have no accessible label. A screen reader encountering a row of colored swatches with no labels will often read something like "button, button, button, button" — completely useless.
Fix:
\\\html
\\\
For currently selected variants, add \aria-pressed="true"\ or use \aria-selected\ in a listbox pattern so screen reader users know which option is active.
Size selectors
Native \ dropdowns are the most accessible approach for size selection — they work with keyboard navigation out of the box. If you're using custom-styled dropdowns (which are common for visual design reasons), they must replicate the keyboard behavior of native selects: arrow key navigation, Enter to select, Escape to close.
Out-of-stock variants
Unavailable size or color options should be marked with \aria-disabled="true"\ and ideally explained ("Size XL — Currently unavailable"). Don't just hide them or remove them from the DOM without notice.
Quantity Inputs and Add-to-Cart
The add-to-cart interaction is a frequent source of accessibility failures.
Quantity input requirements
- The quantity input must have a visible, associated text label (not just a placeholder)
- Increment/decrement buttons (+/-) must have accessible names: \
aria-label="Increase quantity"\and \aria-label="Decrease quantity"\ - The current quantity must be readable to screen readers
Add-to-cart button
This seems simple, but common failures include:
- Buttons that use \\ or \
\instead of \— not keyboard focusable by default- Buttons labeled only with icons (no text alternative)
- No feedback after the button is clicked — screen readers need to know whether the item was added
After a successful add-to-cart, use an ARIA live region to announce the update:
\
\\htmlBlue Wrap Dress, Size M has been added to your cart.
\\
\
Product Reviews and Ratings
User-generated reviews present their own accessibility challenges.
Star ratings: A visual 4-out-of-5 stars display must have a text equivalent. The image (or SVG) should include \
aria-label="4 out of 5 stars"\or adjacent text.Review text: Reviews are usually fine if they're plain text. Watch for user-submitted images in reviews — these need alt text too, but they're user-generated, which makes this harder to enforce. Consider providing guidance to reviewers on adding image descriptions.
Review filtering and sorting: Sort and filter controls for reviews must be keyboard navigable and labeled. Avoid using \
onChange\JavaScript triggers on select elements without also supporting explicit "Apply" button activation.
Quick Reference Checklist for Product Pages
Use this when auditing your product pages:
Images
- Every product image has descriptive alt text (not generic)
- Image gallery navigation works by keyboard
- Zoom functionality is keyboard accessible
Pricing & Availability
- Sale prices clearly identify original vs. sale amount in text
- Stock status is communicated in text, not color alone
- Dynamic price updates are announced to screen readers
Variants
- Color swatches have accessible labels (color names)
- Size selectors work with keyboard navigation
- Selected variants are marked accessible (aria-pressed/aria-selected)
- Out-of-stock variants are identified in text
Add to Cart
- Quantity input has a proper text label
- +/- buttons have accessible names
- Add-to-cart button is a real \
element - Confirmation message is announced to screen readers
Reviews
- Star ratings have text equivalents
- Review sorting/filtering is keyboard accessible
How to Find Issues on Your Product Pages
Automated scan first: Use CheckMyADA's free scanner to run an automated audit of your product pages. It will surface obvious violations — missing alt text, unlabeled form fields, color contrast issues — within minutes.
Keyboard test: Open a product page, put your mouse away, and try to select a size, choose a color, enter a quantity, and add to cart using only your keyboard (Tab, Enter, Space, arrow keys). If you get stuck anywhere, users with motor disabilities will too.
Screen reader test: Enable VoiceOver (Mac/iOS) or NVDA (Windows, free download) and navigate your product page. Can you understand what the product is from the image descriptions alone? Can you tell which size is selected?
Automated tools catch about 30-40% of WCAG violations. The keyboard and screen reader tests above will surface most of the rest.
What Platform Are You On?
Your platform affects how much you control:
Shopify: Themes vary significantly in accessibility. Dawn (Shopify's official theme) has reasonably good accessibility. Custom themes or heavily modified themes often have accessibility regressions. Shopify's built-in product variant system is generally accessible; issues usually come from theme customizations.
WooCommerce: Storefront (the official theme) is accessible. Third-party themes and page builders (Elementor, Divi) frequently introduce accessibility problems, especially for custom product variant displays.
BigCommerce: Cornerstone theme has solid accessibility. Review any third-party apps that modify the product page — app-added widgets often introduce violations.
Custom builds: You have full control and full responsibility. Prioritize semantic HTML and test with actual screen readers during development.
FAQ
Do all product images need alt text, even if there are dozens per product?
Every meaningful product image needs descriptive alt text. For secondary angle images or detail shots, the alt text can be briefer — but it must still convey what the image shows. Decorative images (backgrounds, textures used purely for visual interest) can use \
alt=""\.Our store has thousands of products. How do we scale alt text?
Start with your highest-traffic products. Many e-commerce platforms allow bulk editing of alt text through their admin interface or via CSV export/import. Also check whether your product descriptions already contain the key information — sometimes alt text can be systematically generated from product titles and key attributes.
We use a third-party product reviews app. Are we responsible for its accessibility?
Yes. When a third-party widget appears on your website, you're responsible for its accessibility to your users, even if you didn't build it. Contact your review app vendor to ask for their VPAT (Voluntary Product Accessibility Template) and raise accessibility issues with their support team.
Does adding alt text help our SEO too?
Yes, as a secondary benefit — but don't write alt text for SEO purposes. Write it to accurately describe what's in the image. Keyword-stuffed alt text both undermines accessibility and risks a Google spam penalty.
Our add-to-cart button is an image. Is that a problem?
It can be. Image buttons need \
alt\attributes that describe their function: \\. Better practice is to use a standard \element with text, optionally combined with an icon.
Take Action Today
Product page accessibility is fixable — and fixing it serves everyone, not just users with disabilities. Screen reader-friendly product pages are also clearer for users on slow connections, users with cognitive differences, and search engine crawlers.
Start by running a free scan to understand your current situation, then work through the checklist above starting with your highest-traffic product pages.
Scan your store's product pages for free →
Related reading: ADA Compliance for E-Commerce: A Complete Guide | 10 Most Common Website Accessibility Violations | WCAG 2.1 Requirements Explained
Check Your Website for Free
Get an honest accessibility report in 30 seconds. No overlay. No false promises.
Run Free Scan