liquid-theme-a11y
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 shopify/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.
47liquid-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.
43