Shopify WCAG 2.1 AA Compliance Checklist: 50+ Action Items for Accessible Ecommerce

Understanding WCAG 2.1 for Shopify

The Web Content Accessibility Guidelines (WCAG) 2.1 are organized around four principles, often remembered by the acronym POUR: Perceivable, Operable, Understandable, and Robust. Each principle contains guidelines, and each guideline has testable success criteria at three levels: A (minimum), AA (target for most sites), and AAA (enhanced).

For Shopify stores, Level AA compliance is the standard you should aim for. It is the level referenced by most accessibility laws, including the Americans with Disabilities Act (ADA) as interpreted by US courts, the European Accessibility Act (EAA), and Canada's Accessible Canada Act.

This checklist covers every WCAG 2.1 AA success criterion as it applies specifically to Shopify stores, organized by the four POUR principles.

Principle 1: Perceivable (17 Items)

Content must be presentable to users in ways they can perceive, regardless of which senses they use.

1.1 Text Alternatives

1. Add alt text to all product images. Every product image must have descriptive alt text that conveys the product's appearance, color, and key features. In Shopify admin, fill in the "Alt text" field for each image.
2. Add alt text to all collection and banner images. Hero banners, collection images, and promotional graphics need alt text that describes the visual content or the promotional message.
3. Use empty alt attributes for decorative images. Images that are purely decorative (background textures, dividers, decorative icons) should have alt="" so screen readers skip them.
4. Provide text alternatives for icons. If you use icon fonts or SVG icons for navigation (cart, search, account), they need accessible labels via aria-label or visually hidden text.
5. Add alt text to app-generated images. Check that any images generated by installed apps (review photos, Instagram feeds, badges) have appropriate alt text.

1.2 Time-Based Media

6. Add captions to product videos. All pre-recorded videos with spoken content need synchronized captions. Use YouTube or Vimeo's captioning tools if you embed from those platforms.
7. Provide transcripts for audio content. Podcasts, audio descriptions, or any audio-only content needs a text transcript available on the same page or linked prominently.
8. Add audio descriptions for video-only content. If a product video demonstrates features without narration, provide an audio description track or a detailed text description.

1.3 Adaptable Content

9. Use proper heading hierarchy. Every page should have one H1, followed by H2s for major sections, H3s for subsections, and so on. Never skip heading levels (e.g., H1 to H3).
10. Use semantic HTML elements. Use <nav> for navigation, <main> for primary content, <footer> for footer, <button> for interactive controls, and <table> for tabular data.
11. Mark up lists properly. Product feature lists, navigation menus, and bullet points should use <ul>, <ol>, or <dl> elements, not styled <div> elements.
12. Label form fields correctly. Every form input needs a visible <label> element associated via the for attribute. This applies to email signup forms, contact forms, search bars, and quantity selectors.
13. Ensure content is not orientation-locked. Your store must work in both portrait and landscape orientations on mobile devices.
14. Support autocomplete on appropriate fields. Add autocomplete attributes to checkout and account form fields (name, email, address, phone) to help users with motor disabilities fill forms faster.

1.4 Distinguishable Content

15. Meet color contrast ratios. Normal text must have a contrast ratio of at least 4.5:1 against its background. Large text (18px bold or 24px regular) needs at least 3:1. Use the WebAIM contrast checker to verify.
16. Do not use color alone to convey information. If a sale price is shown in red, also include a "Sale" label or strikethrough on the original price. Size selectors should not rely solely on color to indicate availability.
17. Ensure text can be resized to 200% without loss. Users must be able to zoom text to 200% without content being clipped, truncated, or overlapping. Test by zooming your browser to 200%.

Principle 2: Operable (16 Items)

Users must be able to operate the interface using whatever input method they have available — keyboard, mouse, voice, switch, or assistive device.

2.1 Keyboard Accessible

18. All functionality available via keyboard. Every interactive element — links, buttons, menus, dropdowns, modals, carousels, accordions — must be operable using only a keyboard (Tab, Enter, Space, Arrow keys, Escape).
19. No keyboard traps. Users must be able to navigate into and out of every component using only the keyboard. Test that modal dialogs, mega-menus, and filter panels can be closed with Escape and that focus returns to the triggering element.
20. Implement visible focus indicators. Every focusable element must have a clearly visible focus outline when navigated to via keyboard. Never use outline: none without providing an alternative focus style.
21. Add a skip navigation link. Include a "Skip to main content" link as the first focusable element on every page. This lets keyboard users bypass repetitive navigation.
22. Ensure cart drawer is keyboard accessible. If your theme uses a slide-out cart drawer, focus must move into the drawer when it opens and trap within it until closed. The Escape key should close the drawer.

2.2 Enough Time

23. Allow users to extend time limits. If your store uses countdown timers for sales or cart reservations, provide a way to extend the time or warn users before expiration.
24. Provide pause controls for auto-updating content. Slideshow carousels, rotating testimonials, and auto-scrolling banners must have pause, stop, or hide controls.
25. Allow pausing of animations. Any animation that starts automatically and lasts more than 5 seconds must be pausable. This includes animated background videos and product showcase animations.

2.3 Seizures and Physical Reactions

26. Avoid flashing content. No content should flash more than three times per second. This includes animated GIFs, video content, and JavaScript-driven animations. Flashing content can trigger seizures in people with photosensitive epilepsy.
27. Provide motion reduction options. Respect the prefers-reduced-motion media query. When enabled, disable parallax scrolling, auto-playing videos, and complex CSS animations.

2.4 Navigable

28. Use descriptive page titles. Each page needs a unique, descriptive <title> that identifies the page content and the site name.
29. Use meaningful link text. Links should describe their destination. Avoid "Click here" or "Read more" — instead use "View product details" or "Read our return policy."
30. Implement breadcrumb navigation. Breadcrumbs help users understand where they are in your site hierarchy and navigate back to parent categories.
31. Ensure logical focus order. When tabbing through a page, focus should move in a logical order that follows the visual layout: header, navigation, main content, sidebar, footer.
32. Provide multiple ways to find pages. Offer at least two ways to locate content: navigation menus, search, sitemap, or related links.
33. Use descriptive headings and labels. Headings and labels should describe the topic or purpose of the content that follows them. "Our Products" is better than "Section 2."

2.5 Input Modalities

34. Support pointer cancellation. For actions triggered by mouse/touch, the action should complete on the "up" event (mouseup/touchend) so users can cancel by moving away.
35. Match accessible names with visible labels. If a button shows "Add to Cart" visually, its accessible name (aria-label or text content) must also contain "Add to Cart."
36. Do not require complex gestures. Any action that requires multi-point or path-based gestures (pinch, swipe) must also be achievable with a single pointer click or tap.

Principle 3: Understandable (9 Items)

Content and interface operation must be understandable to all users.

3.1 Readable

37. Set the page language. Add lang="en" (or appropriate language code) to the <html> element so screen readers use the correct pronunciation.
38. Mark language changes within content. If product descriptions include words or phrases in another language, wrap them in a span with the appropriate lang attribute.

3.2 Predictable

39. Consistent navigation across pages. The main navigation menu should appear in the same location and order on every page of your store.
40. Consistent identification of components. Elements that serve the same function should look the same and have the same labels across all pages. The "Add to Cart" button should not become "Buy Now" on some pages unless it genuinely serves a different function.
41. No unexpected context changes on input. Changing a form field value (like selecting a product variant) should not automatically submit the form, navigate to a new page, or open a modal without warning.

3.3 Input Assistance

42. Identify input errors clearly. When a form submission fails, identify which fields have errors and describe the error in text. Do not rely solely on red borders or color changes.
43. Provide visible labels for all inputs. Every form field must have a visible label. Placeholder text alone is not sufficient because it disappears when the user starts typing.
44. Provide input instructions. For fields with specific format requirements (phone number, postal code), provide instructions or examples before the user fills them in.
45. Offer error correction suggestions. When a user enters an invalid email format or misses a required field, suggest how to fix the error: "Please enter a valid email address (e.g., name@example.com)."
46. Provide error prevention for financial transactions. For checkout submissions and account changes, allow users to review, confirm, and correct information before finalizing.

Principle 4: Robust (6 Items)

Content must be robust enough to be interpreted by a wide variety of user agents, including assistive technologies.

47. Validate HTML. Use the W3C HTML Validator to check for parsing errors. Duplicate IDs, unclosed tags, and invalid nesting can break assistive technology interpretation.
48. Use ARIA roles and properties correctly. If you use ARIA attributes, ensure they follow the WAI-ARIA specification. Incorrect ARIA is worse than no ARIA — it actively misleads screen reader users.
49. Provide name, role, and value for custom controls. Custom-built elements like star ratings, quantity steppers, and color swatches need proper ARIA roles, states, and properties so assistive technologies can interpret them.
50. Ensure status messages are announced. When adding to cart, submitting a form, or applying a discount code, use aria-live regions to announce the result to screen reader users without moving focus.
51. Test with multiple assistive technologies. Validate your store with at least two screen readers (NVDA + VoiceOver), keyboard navigation, and browser zoom at 200%.
52. Monitor third-party app accessibility. Installed apps inject their own HTML and JavaScript. Audit each app's output for accessibility issues — review widgets, popups, chat buttons, and embedded forms are common problem areas.

Shopify-Specific Accessibility Considerations

Theme Selection

Your theme is the foundation of your store's accessibility. Shopify's free Online Store 2.0 themes (Dawn, Sense, Craft, Ride, Taste, etc.) are built with accessibility as a priority and generally meet most WCAG 2.1 AA criteria at the structural level. Third-party themes vary widely — before purchasing, test the theme demo with keyboard navigation and a screen reader.

Checkout Accessibility

Shopify controls the checkout experience for most stores. Shopify's checkout is generally accessible, but Shopify Plus merchants who customize checkout should verify that customizations maintain accessibility. Test every step of the checkout flow with keyboard navigation and screen readers.

Using EA Accessibility for Automated Fixes

While full WCAG compliance requires both automated and manual effort, apps like EA Accessibility can handle many of the technical requirements automatically. The app provides skip navigation links, enhanced focus indicators, text resizing controls, contrast adjustments, and ARIA improvements — addressing dozens of checklist items without code changes. This lets you focus your manual effort on content-level items like writing quality alt text and structuring headings.

Testing Tools and Resources

Compliance Priority Matrix

Not all WCAG criteria have equal impact. Prioritize fixes based on severity and frequency of impact:

Related Guides

• Accessible Forms for Shopify Stores
• Shopify Store Accessibility Guide
• Shopify Accessibility Checklist
• How to Add Accessibility to Shopify
• Case Study: Accessibility Compliance