liquid-theme-a11y_skill

Overview

This skill implements WCAG 2.2 accessibility patterns for Shopify Liquid themes, focusing on e-commerce components. It provides concrete, code-first guidance and ARIA usage for product cards, carousels, cart drawers, forms, filters, modals, tabs, and navigation. Use it to build accessible theme components, fix issues in .liquid files, or audit ARIA patterns.

How this skill works

The skill inspects Liquid templates and recommends semantic HTML first, adding ARIA only when necessary. It applies component-specific patterns (e.g., <dialog> for modals, <article> for product cards, role=region for carousels), focus management rules, and accessible markup examples. It also enforces keyboard, screen reader, and reduced-motion behaviors, and suggests specific Liquid snippets and attributes for each pattern.

When to use it

• Building new Shopify theme components (product cards, carousels, filters, modals).
• Reviewing or fixing accessibility issues found in .liquid templates.
• Implementing WCAG 2.2-compliant ARIA patterns in existing themes.
• Ensuring focus management and keyboard support for interactive widgets.
• Adding accessible price, form, and cart drawer behaviors.

Best practices

• Prefer native semantic elements (details/summary, dialog, form, fieldset) before adding ARIA.
• Keep a single tab stop per product card (main link) and use tabindex=-1 for mouse-only shortcuts.
• Trap and return focus for modals/drawers; focus the first interactive element on open.
• Provide visible labels, link inputs with for/id, and use aria-describedby for error messages.
• Respect motion preferences with prefers-reduced-motion and provide play/pause controls for auto-rotating content.

Example use cases

• Convert a product grid to accessible product cards with aria-labelledby and proper alt text.
• Replace a custom dropdown with a keyboard-accessible nav + aria-expanded pattern.
• Implement an accessible carousel with play/pause, aria-live, and aria-hidden on inactive slides.
• Build a cart drawer using <dialog> with focus trap and live region updates for cart count.
• Add accessible filters using button-led disclosures that toggle fieldset visibility.