WCAG 2.1 AA Compliance Checklist for Shopify Store Owners

WCAG 2.1 Level AA is the accessibility standard referenced by the ADA, the European Accessibility Act, and virtually every other digital accessibility regulation worldwide. This checklist is organized by category and tailored specifically for Shopify stores. For each item, we note whether AccessComply can auto-fix it or whether manual intervention is required.

Images & Non-Text Content

WCAG Success Criterion 1.1.1 requires that all non-text content has a text alternative that serves an equivalent purpose.

• Product images have descriptive alt text. Alt text should describe the product, not just repeat the product name. AccessComply auto-fix: Yes (AI-generated descriptions).
• Decorative images use empty alt attributes. Background graphics, spacer images, and decorative icons should have alt="" so screen readers skip them. AccessComply auto-fix: Yes.
• Icon buttons have accessible names. Cart icons, search icons, and hamburger menus need ARIA labels. AccessComply auto-fix: Yes (AI-generated labels).
• Complex images have long descriptions. Charts, infographics, and sizing guides need detailed text alternatives. AccessComply auto-fix: Partial (flagged for manual review).

Color & Contrast

WCAG Success Criteria 1.4.3 and 1.4.11 set minimum contrast ratios for text and UI components.

• Body text meets 4.5:1 contrast ratio. Measured against the background color. AccessComply auto-fix: Yes.
• Large text (18px+ or 14px+ bold) meets 3:1 ratio. Headings and large UI text have a lower threshold. AccessComply auto-fix: Yes.
• UI components meet 3:1 ratio. Form borders, button outlines, and interactive element boundaries. AccessComply auto-fix: Yes.
• Color is not the only means of conveying information. Error states, required fields, and status indicators need text or icon supplements. AccessComply auto-fix: Manual review required.

Forms & Inputs

Form accessibility is critical for checkout flows, account creation, and newsletter signups.

• Every input has a programmatic label. Using <label for="..."> or aria-label. AccessComply auto-fix: Yes.
• Error messages are descriptive and associated with fields. Using aria-describedby to link error text to the input. AccessComply auto-fix: Partial.
• Required fields are indicated programmatically. Not just with a red asterisk. AccessComply auto-fix: Manual review required.
• Form instructions are provided before the form. Users should know the format expectations before they start filling in fields. AccessComply auto-fix: Manual review required.

Navigation & Keyboard

All functionality must be operable through a keyboard interface (WCAG 2.1.1).

• Skip navigation link is present. The first focusable element should be a "Skip to main content" link. AccessComply auto-fix: Yes.
• All interactive elements are keyboard-accessible. Buttons, links, dropdowns, and modals can be operated with Tab, Enter, Escape, and arrow keys. AccessComply auto-fix: Partial.
• Visible focus indicators on all focusable elements. The browser default outline or a custom focus style. AccessComply auto-fix: Yes.
• No keyboard traps. Users must be able to navigate away from every component using the keyboard. AccessComply auto-fix: Detected & flagged.
• Focus order is logical. Tab order follows the visual reading order. AccessComply auto-fix: Detected & flagged.

Headings & Structure

• Each page has exactly one h1. Typically the page title or product name. AccessComply auto-fix: Yes.
• Headings follow a logical hierarchy. No skipping levels (e.g., h2 to h4 without an h3). AccessComply auto-fix: Yes.
• No empty heading elements. Headings used purely for spacing should be replaced with CSS. AccessComply auto-fix: Yes.

ARIA & Landmarks

• Page uses landmark regions. <header>, <nav>, <main>, <footer> are used correctly. AccessComply auto-fix: Detected & flagged.
• ARIA roles are used correctly. No redundant roles on semantic elements (e.g., role="button" on a <button>). AccessComply auto-fix: Yes.
• Interactive widgets have appropriate ARIA states. Accordions use aria-expanded, tabs use aria-selected. AccessComply auto-fix: Partial.

Mobile & Touch

• Touch targets are at least 44x44 pixels. Buttons, links, and form controls must be large enough to tap reliably (WCAG 2.5.5). AccessComply auto-fix: Yes (CSS).
• Content is zoomable to 200% without horizontal scrolling. No maximum-scale=1 in the viewport meta tag. AccessComply auto-fix: Detected & flagged.
• Orientation is not locked. Content works in both portrait and landscape. AccessComply auto-fix: Manual review required.

Language & Internationalization

• HTML element has a lang attribute. The lang attribute is required for screen readers to use correct pronunciation. AccessComply auto-fix: Yes.
• Language changes within the page are marked. If your store uses multiple languages (e.g., a French phrase in an English page), use lang on the element. AccessComply auto-fix: Manual review required.

Video & Multimedia

• Videos have captions. All prerecorded audio content must have synchronized captions. AccessComply auto-fix: No (requires content creation).
• Audio descriptions are available for video. Purely visual information in video needs audio description. AccessComply auto-fix: No (requires content creation).
• Auto-playing media has a pause control. Any content that auto-plays for more than 3 seconds needs a pause mechanism. AccessComply auto-fix: Detected & flagged.

Using This Checklist

This checklist covers the most common WCAG 2.1 AA criteria for Shopify stores. The fastest way to check all automated criteria is to run an AccessComply scan, which evaluates 50+ axe-core rules and maps each violation to the relevant WCAG criterion.

For the manual items (video captions, form flow testing, cognitive accessibility), plan a quarterly review with your development team or an external accessibility specialist.

Further Reading

• How to Fix Common Accessibility Issues on Shopify: A Technical Guide
• WCAG 2.2 for Shopify Merchants: What's New and What You Need to Fix
• How to Fix Shopify Accessibility Issues Without Hiring a Developer
• What Is the European Accessibility Act (EAA) and How It Affects Shopify Stores