--- name: liquid-theme-a11y description: "Implement WCAG 2.2 accessibility patterns in Shopify Liquid themes. Covers e-commerce-specific components including product cards, carousels, cart drawers, price display, forms, filters, and modals. Use when building accessible theme components, fixing accessibility issues, or reviewing ARIA patterns in .liquid 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. ## Decision Table: Which Pattern? | Component | HTML Element | ARIA Pattern | Reference | |-----------|-------------|-------------|-----------| | Expandable content | `
/` | None needed | [Accordion](#accordion) | | Modal/dialog | `` | `aria-modal="true"` | [Modal](#modal) | | Tooltip/popup | `[popover]` attribute | `role="tooltip"` fallback | [Tooltip](#tooltip) | | Dropdown menu | `