liquid-theme-a11y
WCAG 2.2 accessibility patterns for Shopify Liquid theme components.
- 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
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 | <details>/<summary> |
None needed | Accordion |
| Modal/dialog | <dialog> |
aria-modal="true" |
Modal |
| Tooltip/popup | [popover] attribute |
role="tooltip" fallback |
Tooltip |
| Dropdown menu | <nav> + <ul> |
aria-expanded on triggers |
Navigation |
| Tab interface | <div> |
role="tablist/tab/tabpanel" |
Tabs |
| Carousel/slider | <div> |
role="region" + aria-roledescription |
Carousel |
| Product card | <article> |
aria-labelledby |
Product card |
| Form | <form> |
aria-invalid, aria-describedby |
Forms |
| Cart drawer | <dialog> |
Focus trap | Cart drawer |
More from benjaminsehl/liquid-skills
shopify-liquid-themes
Generate Shopify Liquid theme code (sections, blocks, snippets) with correct schema JSON, LiquidDoc headers, translation keys, and CSS/JS patterns. Use when creating or editing .liquid files for Shopify themes, working with schema, doc, stylesheet, javascript tags, or Shopify Liquid objects/filters/tags.
2.2Kliquid-theme-standards
CSS, JavaScript, and HTML coding standards for Shopify Liquid themes. Covers BEM naming inside stylesheet tags, design tokens, CSS custom properties, Web Components for themes, defensive CSS, and progressive enhancement. Use when writing CSS/JS/HTML in .liquid files or theme asset files.
1.6K