Liquid Theme A11y

A comprehensive WCAG 2.2 reference for Shopify theme development that covers the patterns you'll actually need: product cards, carousels, cart drawers, modals, and filters. The decision table at the top tells you whether to reach for semantic HTML or ARIA for each component, which saves a lot of guessing. Includes production-ready Liquid snippets with proper focus management, live regions for cart updates, and keyboard navigation patterns. The focus trap implementation and carousel auto-rotation guidance alone are worth having on hand. Best used as a reference when building new components or fixing accessibility issues flagged in audits, since it maps directly to Shopify's template structure with section IDs and translation keys.

skills.sh installs: 3K
GitHub stars: 120
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add benjaminsehl/liquid-skills --skill liquid-theme-a11y --agent claude-code

Installs into .claude/skills of the current project.

Files

Accessibility for Shopify Liquid Themes

Core Principle

Every interactive component must work with keyboard only, screen readers, and reduced-motion preferences. Start with semantic HTML — add ARIA only when native semantics are insufficient.