Skip to main content
SweepHound

Platform Guide

Shopify Accessibility Guide

Shopify stores account for a significant portion of ADA lawsuits targeting e-commerce. With over four million live stores, the platform is a frequent target for accessibility demand letters — and most store owners have no idea their theme ships with violations baked in. The good news: Shopify's templating system gives you enough control to fix the majority of issues without leaving the platform.

Dawn Theme Common Issues

Dawn is Shopify's default theme and the foundation for many custom themes. While Shopify has improved Dawn's accessibility over time, several recurring issues persist across versions:

  • Missing alt text on product images — Dawn renders product images using the image_tag filter, but the alt attribute only populates if the merchant explicitly sets it in the Shopify admin. Most merchants skip this for variant images, gallery images, and lifestyle photos. Read our alt text guide for writing effective descriptions.
  • Color contrast in badges and prices — Sale badges, “Sold Out” labels, and compare-at prices frequently fail WCAG contrast ratios. Dawn's default red-on-white sale badge sits at roughly 3.8:1 — below the 4.5:1 minimum for normal text.
  • Keyboard-inaccessible mega menus — Multi-level navigation menus often rely on hover states alone. Keyboard users cannot open submenus, and focus order can skip between top-level items without revealing nested links.
  • Missing skip link — Some Dawn versions include a skip-to-content link, but custom themes built on Dawn frequently remove or break it.
  • Decorative icons without hidden labels — Cart icons, search icons, and social media icons often lack aria-label attributes, leaving screen reader users guessing what the button does.

Liquid Template Fixes

Shopify's Liquid templating language gives you direct access to the HTML output. Here are the most impactful fixes you can make in your theme code:

Alt Text for Product Images

Ensure every product image has a meaningful alt attribute. In your product template, use the image's alt field with a fallback to the product title:

{{ product.featured_image | image_url: width: 600
   | image_tag: alt: product.featured_image.alt
   | default: product.title }}

For collection pages, apply the same pattern inside your product card snippet. Decorative images (backgrounds, lifestyle banners) should use alt="" and role="presentation" to hide them from assistive technology.

Accessible Pagination

Wrap pagination controls in a <nav aria-label="Pagination"> landmark. Each page link should include an aria-label like “Page 3” and the current page should use aria-current="page". Dawn's default pagination often outputs bare links without these attributes.

Proper Heading Hierarchy

Shopify themes frequently misuse heading levels for visual styling. Product pages might jump from h1 (product title) to h4 (section labels), skipping h2 and h3 entirely. Audit your templates and ensure headings descend sequentially. Use CSS classes for visual sizing instead of heading level changes.

Third-Party App Conflicts

Shopify apps inject their own HTML, CSS, and JavaScript into your store. This is where many accessibility regressions originate:

  • Popup overlays without focus trapping — Email signup popups, exit-intent modals, and cookie banners frequently fail to trap focus. Keyboard users tab behind the overlay into invisible content, and there is often no way to close the popup without a mouse.
  • Review widgets with inaccessible star ratings — Star rating displays using only color or images without text alternatives leave screen reader users without access to review scores.
  • Carousel and slider apps — Auto-advancing carousels without pause controls violate WCAG 2.2.2 (Pause, Stop, Hide). Many lack keyboard controls entirely.
  • Chat widgets — Third-party live chat widgets often create their own focus management that conflicts with your theme's tab order and may not announce new messages to screen readers.

Before installing any app, test your store's accessibility before and after. If an app introduces violations, contact the developer — or replace it.

Checkout Accessibility

Shopify controls the checkout experience for most stores (Shopify Plus merchants get more customization). The standard checkout is generally accessible — Shopify maintains it in compliance with WCAG 2.1 AA. Form fields have proper labels, error messages are descriptive, and keyboard navigation works throughout the flow. The main risk area is Shopify Plus stores that add custom checkout scripts, which can introduce new violations outside Shopify's control.

SweepHound's Shopify Platform Tips

When SweepHound scans a Shopify store, it recognizes the platform and provides Shopify-specific fix guidance. Instead of generic “add an alt attribute” advice, you get Liquid code snippets you can paste directly into your theme editor. Remediation suggestions reference the correct Shopify template files and use Liquid syntax your developers already know.

SweepHound also flags when an issue likely originates from a third-party app rather than your theme, helping you prioritize what to fix in-house versus what to escalate to an app vendor.

Ready to audit your Shopify store? Start a free SweepHound scan and get Shopify-specific remediation guidance in minutes. For background on the standards, see our ADA compliance guide.