liquid-theme-a11y

WCAG 2.2 accessibility patterns for Shopify Liquid theme components. 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. See focus and keyboard patterns for full FocusTrap implementation. Rules: Rules: Rules: Same as modal pattern but with additional: Rules: Native / provides keyboard and screen reader support automatically. Use for screen-reader-only content like labels and descriptions. Never rely solely on color to convey information — always pair with text, icons, or patterns. - Covers 11 e-commerce-specific components: product cards, carousels, modals, forms, filters, tabs, dropdowns, tooltips, cart drawers, prices, and accordions with semantic HTML and ARIA patterns - Includes decision table mapping components to correct HTML elements and ARIA roles, plus complete code examples for each pattern - Enforces keyboard navigation, screen reader support, focus management with trapping, and reduced-motion preferences across all interactive elements - Requires minimum 44x44px touch targets, 3:1 contrast for UI components, skip links, single h1 per page, and live regions for dynamic content updates - Single , , per page - Multiple elements must have distinct aria-label - All content must live inside a landmark - One per page, never skip levels (h1...