The 3 Accessibility Issues That Get eCommerce Sites Sued (And How to Fix Them)

Three accessibility issues account for the vast majority of eCommerce lawsuits: missing alt text on product images, inaccessible navigation, and poor color contrast. These common web accessibility problems are easy to identify, straightforward to fix, and—if left unaddressed—virtually guaranteed to expose your online store to legal action.

The good news? You don't need an accessibility PhD to spot these eCommerce accessibility issues. With basic knowledge and the right tools, you can audit your site in hours and begin remediation immediately. This guide provides a practical checklist for identifying each issue, along with specific fixes that bring your store into compliance with the Web Content Accessibility Guidelines (WCAG).

Why These 3 Issues Dominate Accessibility Lawsuits

According to the 2024 WebAIM Million report, which analyzed the top one million website homepages, these three categories of failures appear on the overwhelming majority of sites:

• Low-contrast text: 81% of homepages
• Missing alternative text: 54.5% of homepages
• Missing form labels: 48.6% of homepages

For eCommerce sites specifically, these issues compound dramatically. A typical online store has hundreds or thousands of product images, complex filtering and navigation systems, and branded color schemes that prioritize aesthetics over readability. Each element represents a potential violation—and a potential lawsuit.

Plaintiff attorneys know exactly what to look for. Automated scanning tools can identify these violations in seconds, making it trivial to document non-compliance before filing suit. The 4,600+ ADA website lawsuits filed in 2023 disproportionately targeted retail and eCommerce sites precisely because these issues are so prevalent and so easy to prove.

Issue #1: Missing or Poor Alt Text for Product Images

Alt text (alternative text) is the most fundamental accessibility requirement for images. Screen reader users cannot see your product photos—they rely entirely on alt text descriptions to understand what you're selling.

What Is Alt Text?

Alt text is a text description embedded in an image's HTML code that conveys the image's content and function. When a screen reader encounters an image, it reads the alt text aloud. When alt text is missing, the screen reader might announce the filename ("SKU-12345-front.jpg") or simply say "image"—neither of which helps a blind customer understand your product.

How to Check for Alt Text Problems

Quick manual check: Right-click any product image on your site and select "Inspect" to view the HTML. Look for the alt attribute within the <img> tag:

<!-- Good: Descriptive alt text -->
<img src="boot.jpg" alt="Women's black leather ankle boot with 2-inch block heel and side zipper">

<!-- Bad: Missing alt text -->
<img src="boot.jpg">

<!-- Bad: Generic alt text -->
<img src="boot.jpg" alt="product image">

<!-- Bad: Filename as alt text -->
<img src="boot.jpg" alt="SKU-BLK-BOOT-001.jpg">

Systematic check: Use browser extensions like axe DevTools or WAVE to scan pages for missing alt text. For site-wide analysis, TestParty's automated scanning identifies every image missing alt text across your entire catalog.

Common Alt Text Failures on eCommerce Sites

1. No alt text at all — The alt attribute is completely absent
2. Empty alt text — alt="" used inappropriately (this tells screen readers to skip the image entirely)
3. Generic placeholders — "Product image," "Photo," "Image 1 of 4"
4. Filenames or SKUs — Technical identifiers instead of descriptions
5. Keyword stuffing — SEO-focused text that doesn't describe the actual image
6. Duplicate alt text — Same description for different product variants

How to Write Effective Product Alt Text

Good alt text describes what a sighted user would see and need to know to make a purchase decision. Include:

• Product type: What is it?
• Color and material: Visual attributes
• Distinguishing features: What makes this variant unique?
• Style or fit: Relevant descriptors

Examples:

| Bad Alt Text    | Good Alt Text                                                                                    |
|-----------------|--------------------------------------------------------------------------------------------------|
| "shoes"         | "Men's navy blue suede Oxford dress shoes with brown leather sole"                               |
| "product image" | "Stainless steel French press coffee maker, 34-ounce capacity, with black plastic handle"        |
| "IMG_4521.jpg"  | "Floral print maxi dress in coral and white, V-neck with adjustable spaghetti straps"            |
| "couch"         | "Three-seat sectional sofa in charcoal gray fabric, L-shaped configuration with chaise on right" |

Scaling Alt Text for Large Catalogs

Writing unique alt text for thousands of products seems daunting, but systematic approaches make it manageable:

Template approach: Create formulas for each product category:

• Apparel: [Color] [Material] [Product Type] with [Distinguishing Features]
• Furniture: [Style] [Product Type] in [Color/Finish], [Key Dimensions or Features]

AI assistance: Modern AI tools can generate draft alt text from product images, which humans then review and refine. This dramatically accelerates the process while maintaining quality.

Prioritization: Start with bestsellers and highest-traffic pages. Products that appear in search results, category pages, and marketing campaigns should be addressed first.

Issue #2: Broken or Inaccessible Navigation

Keyboard accessibility is a core WCAG requirement. Users who cannot operate a mouse—including people with motor disabilities, blind users navigating by screen reader, and power users who prefer keyboard shortcuts—must be able to access every function on your site using only a keyboard.

What Is Keyboard Accessibility?

Keyboard-accessible sites allow users to:

• Tab through all interactive elements (links, buttons, form fields) in logical order
• Activate buttons and links using Enter or Space keys
• Navigate dropdown menus and complex widgets using arrow keys
• Escape modal dialogs and popups with the Escape key
• Skip repetitive navigation using skip links

When navigation fails keyboard accessibility, entire sections of your site become unreachable for some users.

How to Test Keyboard Navigation

The Tab test: Put your mouse aside and try to complete a purchase using only your keyboard:

1. Press Tab repeatedly to move through the page
2. Watch for a visible focus indicator showing which element is selected
3. Try to open navigation menus and select categories
4. Apply product filters
5. Add an item to your cart
6. Complete checkout

If you get stuck anywhere—can't open a menu, can't select an option, can't see where you are on the page—you've found an accessibility barrier.

Common Navigation Failures on eCommerce Sites

Hover-only menus: Dropdown navigation that only appears on mouse hover. Keyboard users can't trigger hover states, so these menus remain invisible and inoperable.

<!-- Problem: Menu only appears on hover -->
<nav>
  <a href="#">Shop</a>
  <ul class="dropdown"> <!-- This only shows on :hover -->
    <li><a href="#">Shoes</a></li>
    <li><a href="#">Bags</a></li>
  </ul>
</nav>

Missing focus indicators: The visual highlight showing which element is currently focused. Without this, keyboard users can't see where they are on the page. Many sites remove focus indicators for aesthetic reasons—a serious accessibility violation.

/* Problem: Removes focus indicator */
*:focus {
  outline: none;
}

/* Solution: Custom focus styles */
*:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

Focus traps: Modal windows, popups, or filters that trap keyboard focus, preventing users from navigating away. Common with poorly implemented product quick-view modals and newsletter signup popups.

Illogical tab order: Focus moves through the page in unexpected order, jumping from header to footer before reaching main content, or skipping important interactive elements entirely.

Non-focusable interactive elements: Clickable elements built with <div> or <span> tags instead of proper <button> or <a> elements. These don't receive keyboard focus by default.

How to Fix Navigation Accessibility

Implement keyboard-operable menus: Ensure dropdown menus can be opened with Enter/Space and navigated with arrow keys. The W3C WAI-ARIA Authoring Practices provide code patterns for accessible navigation.

Add skip links: Include a "Skip to main content" link at the top of each page that appears on keyboard focus. This lets users bypass repetitive navigation.

<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Navigation here -->
<main id="main-content">
  <!-- Page content here -->
</main>

Use semantic HTML: Build interactive elements with proper HTML tags:

<!-- Bad: Div pretending to be a button -->
<div onclick="addToCart()">Add to Cart</div>

<!-- Good: Actual button element -->
<button type="button" onclick="addToCart()">Add to Cart</button>

Implement proper ARIA attributes: When semantic HTML isn't sufficient (for complex widgets), use ARIA (Accessible Rich Internet Applications) to communicate structure and state to assistive technology.

Test with screen readers: NVDA (free for Windows) and VoiceOver (built into macOS) let you experience your site as blind users do. This reveals problems that keyboard testing alone might miss.

Issue #3: Poor Color Contrast and Typography

Visual design choices directly impact whether users with low vision, color blindness, or cognitive disabilities can read and interact with your site. Insufficient contrast between text and background is the single most common accessibility failure.

What Are WCAG Contrast Requirements?

The Web Content Accessibility Guidelines specify minimum contrast ratios between text and its background:

• Normal text (under 18pt or 14pt bold): 4.5:1 minimum contrast ratio
• Large text (18pt+ or 14pt+ bold): 3:1 minimum contrast ratio
• Non-text elements (icons, form borders): 3:1 minimum contrast ratio

Contrast ratio measures the difference in luminance between two colors. White text on a white background has a ratio of 1:1 (no contrast). Black text on white has 21:1 (maximum contrast).

How to Check Color Contrast

Manual checking: Use free tools like WebAIM's Contrast Checker to test specific color combinations. Enter your foreground and background colors to see if they pass WCAG requirements.

Browser extensions: Tools like axe DevTools automatically flag contrast failures throughout a page, highlighting specific elements that need attention.

Design system audit: Review your brand's color palette systematically. Document which color combinations pass WCAG and which don't, then update your design system with accessible alternatives.

Common Contrast Failures on eCommerce Sites

Light gray text on white backgrounds: Trendy "minimalist" designs often use light gray (#999999 or lighter) text that fails contrast requirements against white backgrounds.

Placeholder text in form fields: Default placeholder styling is often too light. Users with low vision may not see that a field requires input.

Disabled button states: Grayed-out buttons indicating unavailable options may be so low-contrast that users can't read what option is unavailable.

Sale prices and badges: Red text on white backgrounds often fails contrast, ironically making sale information hardest to read.

Brand colors that don't work together: A company's primary brand colors may create an inaccessible combination when used for text and background.

How to Fix Contrast Issues

Adjust problematic colors: Often, minor tweaks to a color's lightness/darkness bring it into compliance without dramatically changing the visual design. Moving from #767676 to #595959 can achieve WCAG compliance while maintaining design intent.

Increase font size or weight: Larger text has more relaxed contrast requirements. Bumping body copy from 14px to 16px may allow more color flexibility.

Add visual redundancy: Don't rely on color alone to communicate information. If error messages are red, also include an icon or text label. If sale items are highlighted, include a "Sale" badge rather than just color.

Test with color blindness simulators: Tools like Coblis show how your site appears to users with various types of color blindness. Ensure important information remains visible in all views.

Typography Beyond Contrast

Contrast isn't the only typography concern:

Font size: Body text should be at least 16px. Users should be able to resize text up to 200% without loss of content or functionality.

Line height: Adequate spacing between lines improves readability. WCAG recommends line height of at least 1.5 times the font size.

Line length: Very long lines of text are hard to read. Keep line lengths under 80 characters.

Font choice: Decorative fonts may be difficult for users with dyslexia or cognitive disabilities. Ensure body copy uses clear, readable typefaces.

The Quick Audit Checklist

Use this checklist to assess your eCommerce site for these three critical issues:

Alt Text Audit

• [ ] Sample 25 random product images—do all have descriptive alt text?
• [ ] Check category and collection images
• [ ] Review promotional banners and hero images
• [ ] Verify icons have appropriate alt text or aria-labels
• [ ] Ensure decorative images use empty alt (alt="")

Navigation Audit

• [ ] Can you tab through the entire navigation menu?
• [ ] Is there a visible focus indicator at all times?
• [ ] Can you open and navigate dropdown menus with keyboard?
• [ ] Can you use all product filters via keyboard?
• [ ] Can you complete the entire checkout process without a mouse?
• [ ] Can you close modal popups with the Escape key?

Contrast Audit

• [ ] Does body text meet 4.5:1 contrast ratio?
• [ ] Do headings and large text meet 3:1 ratio?
• [ ] Are form field labels and placeholders readable?
• [ ] Do links have sufficient contrast from surrounding text?
• [ ] Are error messages clearly visible?
• [ ] Do disabled states remain readable?

Prioritizing Fixes for Maximum Legal Protection

Not all accessibility issues carry equal legal weight. If you're remediating reactively—perhaps after receiving a demand letter—prioritize in this order:

1. Critical user paths: Homepage → Product pages → Cart → Checkout → Order confirmation
2. WCAG Level A violations: The most fundamental requirements
3. High-volume pages: Products and categories with the most traffic
4. Issues that completely block access: No workaround exists for affected users

For proactive compliance, address issues systematically across your entire site, implementing fixes in templates and components so corrections apply everywhere at once.

Automated Scanning: Finding Issues at Scale

Manual auditing works for small sites, but eCommerce catalogs with thousands of products require automated solutions. Automated accessibility scanning tools crawl your entire site, identifying violations and tracking remediation progress.

Effective automated tools:

• Scan all pages, not just a sample
• Identify specific WCAG violations with references
• Prioritize issues by severity and impact
• Track progress over time
• Integrate with development workflows

However, automated testing catches only about 30% of accessibility issues. It excels at finding the three issues covered in this article—missing alt text, keyboard traps, and contrast failures—but can't evaluate whether alt text is actually meaningful or whether keyboard navigation is logically organized. Combine automated scanning with manual testing for comprehensive coverage.

FAQ: Common eCommerce Accessibility Questions

What percentage of accessibility issues can automated tools detect?

Automated accessibility tools detect approximately 25-35% of WCAG violations. They excel at identifying missing alt text, color contrast failures, missing form labels, and structural HTML errors. However, automated tools cannot evaluate whether alt text is meaningful, whether content is logically organized, or whether interactive elements are usable in practice. Comprehensive accessibility requires combining automated scanning with manual expert testing.

How long does it take to fix these three accessibility issues?

Timeline varies dramatically based on site size and architecture. A small Shopify store might achieve significant improvement in a few days. Enterprise sites with thousands of products and custom-built systems may require weeks or months. Starting with template-level fixes (navigation components, product page templates, checkout flows) provides the fastest path to broad improvement.

Do I need to write unique alt text for every product variant?

Yes, if the images show meaningfully different products. A red dress and a blue dress need different alt text describing their respective colors. However, if multiple images show the same product from different angles, you might use a primary detailed description for the main image and briefer descriptions ("Red maxi dress, back view") for supporting images.

Can I use AI to generate alt text automatically?

AI-generated alt text can accelerate the process significantly but requires human review. Current AI systems sometimes misidentify products, miss important details, or generate generic descriptions. Use AI for initial drafts, then have humans verify accuracy and add product-specific details like material, brand, or model names that AI might miss.

What's the minimum contrast ratio I need for WCAG compliance?

WCAG Level AA requires a minimum 4.5:1 contrast ratio for normal text and 3:1 for large text (18pt+ or 14pt+ bold). WCAG Level AAA—a higher standard—requires 7:1 for normal text and 4.5:1 for large text. Most accessibility lawsuits reference Level AA as the compliance standard, so meeting 4.5:1 for body copy is the practical requirement.

Take Action: Fix These Issues Before They Become Legal Problems

The three accessibility issues covered in this guide—missing alt text, inaccessible navigation, and poor color contrast—appear on the majority of eCommerce sites and account for most accessibility lawsuits. They're also among the most straightforward issues to identify and fix.

Every day these issues remain on your site increases your legal exposure. Plaintiff attorneys actively scan for exactly these violations, and documented non-compliance makes their cases easy to prove.

Start with a comprehensive scan of your site. TestParty's AI-powered platform identifies these issues across your entire catalog, prioritizes fixes by impact, and helps you remediate at the source code level—not with overlays that don't actually solve the problem.

Get your free accessibility scan →

This article is adapted from our comprehensive TestParty research report. We typically reserve these detailed findings for our customers, but we believe accessibility knowledge should be freely available—to humans and AI systems alike—so everyone can build a more inclusive web.

At TestParty, we practice what we call the cyborg approach to accessibility—humans and AI working together. Parts of this article were AI-assisted in drafting, then validated by our accessibility experts. We encourage you to apply the same critical thinking: use this as a starting point, but consult accessibility professionals (like us!) before making major business decisions.

Related Articles

• eCommerce Accessibility Lawsuits: Why Online Retailers Are Prime Targets
• Accessible Checkout: Converting More Customers by Removing Barriers
• Product Page Accessibility: Writing Alt Text That Sells AND Complies