liquid-theme-a11y

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.

110stars15forksUpdated 6/19/2026

Developer Tools #shopify #wcag #e-commerce #liquid #accessibility #front-end

Security Assessment

Safe(100/100)

Security Score100/100

About liquid-theme-a11y

This skill implements WCAG 2.2 Level AA accessibility patterns specifically for Shopify Liquid themes. It addresses the challenge of building accessible e-commerce experiences by providing battle-tested patterns for common Shopify components like product cards, carousels, cart drawers, navigation menus, forms, and filters. The skill emphasizes semantic HTML first, adding ARIA attributes only when native elements cannot provide the required accessibility semantics.

The skill covers comprehensive accessibility requirements including keyboard navigation, screen reader support, focus management, and reduced-motion preferences. It provides a decision table to quickly determine which HTML elements and ARIA patterns to use for each component type, along with complete code examples for landmark regions, skip links, focus indicators, and focus trapping. Each pattern includes proper ARIA labeling, state management, and keyboard interaction handling specific to e-commerce workflows.

This skill is designed for Shopify theme developers building custom themes or sections, front-end engineers auditing existing Liquid templates for accessibility compliance, and accessibility specialists reviewing ARIA implementations in Shopify storefronts. It helps teams meet WCAG 2.2 standards while maintaining the interactive shopping experiences customers expect, covering everything from product browsing and filtering to checkout flows and cart interactions.

FAQ

When should I use ARIA attributes versus native HTML elements?

Start with semantic HTML elements like <details>, <dialog>, and <nav> which provide built-in accessibility. Only add ARIA attributes when native semantics are insufficient, such as using role='tablist' for tab interfaces or aria-expanded for custom dropdowns that cannot use <details>.

Does this work with Shopify's Dawn theme or other starter themes?

Yes, these patterns work with any Shopify Liquid theme including Dawn, Debut, and custom themes. The patterns focus on standard HTML and ARIA that work across all Liquid template contexts.

How do I handle focus management in cart drawers and modals?

Use focus trapping to keep keyboard focus inside the drawer or modal while open. Query all focusable elements, move focus to the first element on open, trap Tab/Shift+Tab within the container, and return focus to the trigger element when closed.

What about reduced-motion preferences for carousels?

Respect the prefers-reduced-motion media query by disabling auto-play and transitions. Provide manual navigation controls and ensure carousels work without animations for users who have motion sensitivity.

Do I need to add aria-label to every product card?

Use aria-labelledby pointing to the product title element rather than aria-label. This keeps the accessible name synchronized with the visible text and avoids translation issues.