Alt Text, Contrast, and ARIA: The Three Fixes That Prevent Most Shopify Accessibility Lawsuits

Most Lawsuits Cite the Same Violations

When you read through ADA digital accessibility complaints, the same WCAG failures appear over and over. Missing alt text. Insufficient color contrast. Unlabeled interactive controls. These three categories account for the vast majority of allegations in e-commerce accessibility lawsuits.

This is good news for Shopify store owners. It means that fixing a small number of well-defined issues eliminates most of your legal exposure. You don’t need to become a WCAG expert. You need to get three things right.

1. Alt Text: Every Product Image Needs a Purpose

The rule: WCAG 1.1.1 requires that all non-text content has a text alternative that serves the equivalent purpose.

Why it matters: Screen readers announce images by reading their alt attribute. If an image has no alt text, the screen reader either skips it entirely or reads the filename (“IMG_4829.jpg”), which is useless. For e-commerce, this means a blind shopper cannot understand what your products look like.

Where Shopify merchants fall short: Shopify gives you an alt text field for every product image and collection image. You’ll find it in the Shopify admin under Products → [Product] → Media — click any image and look for the “Alt text” field. The problem is that this field is optional, and most merchants never fill it in. Across thousands of Shopify stores, the majority of product images ship with no alt text at all.

The same applies to collection images (found under Products → Collections → [Collection] → Collection image), blog post featured images, and any images added through the rich text editor in product descriptions or pages.

What good alt text looks like:

• Product image: “Walnut leather sneaker, side view”
• Lifestyle image: “Woman wearing the Sierra jacket while hiking”
• Decorative image: alt="" (empty alt attribute, which tells screen readers to skip it)
• Icon button: The image gets alt="", and the button gets an aria-label instead

The common failures:

• Product images with no alt attribute at all (the Shopify admin field was left blank)
• Images with generic alt text (“image”, “photo”, “product”)
• Decorative images that aren’t marked as decorative (missing the empty alt)
• CMS-uploaded images where the editor never filled in the alt field
• App-injected images (review photos, Instagram feeds, upsell carousels) that have no alt text because the app developer didn’t implement it

The scale of the problem: The WebAIM Million study (2025) found that missing alternative text is the second most common WCAG failure on the web, appearing on 54.5% of homepages tested.

SiteRemora uses AI to analyze your product images and generate descriptive alt text that matches what a sighted shopper would see. When you add new products or change images, we re-check the alt text automatically. No more manually filling in hundreds of alt text fields in the Shopify admin.

2. Color Contrast: Your Shopify Theme Editor Won’t Warn You

The rule: WCAG 1.4.3 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18px+ or 14px+ bold).

Why it matters: Insufficient contrast makes text difficult or impossible to read for people with low vision, color blindness, or anyone using a screen in bright sunlight. It’s also one of the easiest violations to detect automatically, which makes it a favorite of plaintiff’s attorneys.

The Shopify-specific problem: Shopify’s theme editor lets you customize colors throughout your store — headings, body text, buttons, backgrounds, links, sale badges, announcement bars. The editor gives you a color picker and a text preview, but it does not warn you when your color combination fails WCAG contrast ratios. You can set light gray text on a white background and Shopify will save it without complaint.

This means every Shopify merchant who has customized their theme colors is at risk of introducing contrast violations without knowing it. And almost every merchant customizes their colors.

Where Shopify stores fail:

• Light gray text on white backgrounds (placeholder text, disclaimers, fine print)
• Sale pricing that uses color alone to distinguish from regular pricing
• Button text that doesn’t contrast sufficiently with the button background
• Navigation links styled in muted tones that look elegant but fail the ratio
• Announcement bar text on branded background colors
• Footer links and copyright text
• Badge text on product cards (“Sale,” “New,” “Sold out”)

The scale of the problem: Low contrast text is the number one WCAG failure on the web, found on 81% of homepages in the WebAIM Million study. It is also one of the most commonly cited violations in ADA lawsuits.

The fix: Adjust your CSS color values until the contrast ratio meets the threshold. In most cases, the adjustment is subtle — a few shades darker or lighter. Your brand colors don’t need to change dramatically.

SiteRemora identifies every contrast failure across your Shopify theme and adjusts the values to the nearest passing color, preserving your design intent while meeting the legal threshold. We work with your theme’s CSS and Liquid-generated styles, not a runtime overlay.

3. ARIA Labels: Tell Assistive Tech What Your Store’s Buttons Do

The rule: WCAG 4.1.2 requires that all user interface components have an accessible name and role that can be programmatically determined.

Why it matters: When a button has no text and no aria-label, a screen reader announces it as “button” with no context. The user has no idea what it does. When a link wraps only an image with no alt text, the screen reader might announce the URL or nothing at all.

Where Shopify stores fail: Shopify themes are full of icon-only buttons and image-wrapped links. These are standard patterns in e-commerce design, but they’re accessibility failures when they lack labels:

• Cart icon buttons with no label (“button” instead of “View cart, 3 items”)
• Search icons that open a modal but have no accessible name
• Close buttons in modals and cart drawers (the × character is not a meaningful label)
• Social media icon links with no text alternative
• Color swatch buttons that only convey information visually
• Quick-view and add-to-cart buttons that rely on surrounding context
• Hamburger menu buttons labeled only with an SVG icon
• Wishlist and compare icon buttons injected by Shopify apps

Even Shopify’s Dawn theme, which is more accessible than most, has these patterns in its header, cart drawer, and product pages. And any Shopify app that adds icon buttons to your storefront — wishlist apps, review widgets, chat tools — typically doesn’t include ARIA labels.

The fix: Add aria-label attributes to elements that have no visible text, or use visually-hidden text. The label should describe what the element does, not what it looks like.

• “Search products” not “magnifying glass icon”
• “Add Walnut Sneaker to cart” not “add to cart”
• “Close dialog” not “X”
• “Open navigation menu” not “hamburger icon”

SiteRemora detects unlabeled interactive elements in your Shopify theme’s Liquid templates, analyzes the surrounding UI context, and generates appropriate labels automatically. When apps inject unlabeled buttons, we catch those too.

Why These Three Are Enough to Start

Together, alt text, contrast, and ARIA labels cover:

• WCAG 1.1.1 (Non-text Content)
• WCAG 1.4.3 (Contrast Minimum)
• WCAG 4.1.2 (Name, Role, Value)

These three success criteria appear in the majority of ADA e-commerce complaints. They are also the most automatable — which means you can fix them across your entire Shopify store without manually editing every Liquid template or product listing.

There are other important WCAG criteria (keyboard accessibility, heading structure, form labels, focus management), and you should address those too. But if you can only start in one place, start here. Fix your product image alt text in the Shopify admin, fix your theme’s color contrast ratios, and label your interactive controls. You’ll eliminate the most common attack vectors and make your store genuinely more usable for the people who need it most.