PluginBench
Skill
Pass
Audit score 90

liquid-theme-a11y

benjaminsehl/liquid-skills

Implement WCAG 2.2 accessibility patterns in Shopify Liquid themes with semantic HTML and ARIA.

SourceView on skills.sh

What is liquid-theme-a11y?

A reference guide for building accessible e-commerce components in Shopify Liquid, covering product cards, carousels, modals, forms, and filters. Use when developing theme components, fixing accessibility issues, or reviewing ARIA patterns in .liquid files.

  • Provides semantic HTML and ARIA patterns for e-commerce components (product cards, carousels, modals, carts, forms, filters)
  • Includes focus management strategies with focus indicators and focus trapping for modals and drawers
  • Defines page structure landmarks (header, main, footer) and skip link implementation
  • Specifies keyboard navigation requirements and screen reader compatibility patterns
  • Offers a decision table mapping components to appropriate HTML elements and ARIA roles
  • Covers WCAG 2.2 compliance for interactive elements including reduced-motion preferences

How to install liquid-theme-a11y

npx skills add https://github.com/benjaminsehl/liquid-skills --skill liquid-theme-a11y
Claude Code
Cursor
Windsurf
Cline

How to use liquid-theme-a11y

  1. 1.Reference the decision table to identify the correct HTML element and ARIA pattern for your component
  2. 2.Implement page structure with landmarks (header, main, footer) and a skip link
  3. 3.Add focus indicators using :focus-visible with minimum 3:1 contrast ratio
  4. 4.Build the component using the provided code examples (product card, carousel, modal, form, etc.)
  5. 5.Test keyboard navigation with Tab, Enter, Escape, and arrow keys
  6. 6.Verify with a screen reader that all interactive elements are properly labeled and announced

Use cases

Good for
  • Building accessible product card components with proper labeling and keyboard navigation
  • Implementing carousels with pause/play controls and live region announcements
  • Creating modal dialogs and cart drawers with focus trapping and proper semantics
  • Fixing accessibility audit failures in existing Liquid theme components
  • Designing form validation with error messages linked via aria-describedby
Who it's for
  • Shopify theme developers building or maintaining custom themes
  • Accessibility auditors reviewing Liquid template compliance
  • Front-end engineers implementing WCAG 2.2 standards in e-commerce
  • Theme designers converting designs to accessible Liquid components

liquid-theme-a11y FAQ

When should I use ARIA vs. semantic HTML?

Start with semantic HTML (native elements like <button>, <form>, <dialog>). Add ARIA only when native semantics are insufficient, such as aria-label for icon buttons or aria-expanded for custom dropdowns.

How do I handle focus trapping in modals?

Query all focusable elements (a[href], button:not([disabled]), input:not([disabled]), select, textarea, [tabindex]:not([tabindex="-1"])), trap Tab/Shift+Tab within the modal, and return focus to the trigger element on close.

What's the difference between aria-hidden and tabindex="-1"?

aria-hidden="true" hides content from screen readers entirely; use for decorative elements. tabindex="-1" removes an element from tab order but keeps it accessible to screen readers; use for mouse-only shortcuts like quick-add buttons.

Do I need aria-label if I have visible text?

No. Use aria-label only when there's no visible text (icon buttons) or to provide additional context. For price displays, use aria-label to include currency context if not visible in the text alone.

How do I make carousels accessible?

Use role="region" with aria-roledescription="carousel", add play/pause buttons for auto-rotating slides, set aria-live="polite" on the slide container, mark inactive slides with aria-hidden="true", and ensure keyboard navigation with arrow keys.

Full instructions (SKILL.md)

Source of truth, from benjaminsehl/liquid-skills.

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?

ComponentHTML ElementARIA PatternReference
Expandable content<details>/<summary>None neededAccordion
Modal/dialog<dialog>aria-modal="true"Modal
Tooltip/popup[popover] attributerole="tooltip" fallbackTooltip
Dropdown menu<nav> + <ul>aria-expanded on triggersNavigation
Tab interface<div>role="tablist/tab/tabpanel"Tabs
Carousel/slider<div>role="region" + aria-roledescriptionCarousel
Product card<article>aria-labelledbyProduct card
Form<form>aria-invalid, aria-describedbyForms
Cart drawer<dialog>Focus trapCart drawer
Price display<span>aria-label for contextPrices
Filters<form> + <fieldset>aria-expanded for disclosuresFilters

Page Structure

Landmarks

<body>
  <a href="#main-content" class="skip-link">{{ 'accessibility.skip_to_content' | t }}</a>
  <header role="banner">
    <nav aria-label="{{ 'accessibility.main_navigation' | t }}">...</nav>
  </header>
  <main id="main-content">
    <!-- All page content inside main -->
  </main>
  <footer role="contentinfo">
    <nav aria-label="{{ 'accessibility.footer_navigation' | t }}">...</nav>
  </footer>
</body>
  • Single <header>, <main>, <footer> per page
  • Multiple <nav> elements must have distinct aria-label
  • All content must live inside a landmark

Skip Link

.skip-link {
  position: absolute;
  inset-inline-start: -999px;
  z-index: 999;
}
.skip-link:focus {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  padding: 1rem;
  background: var(--color-background);
  color: var(--color-foreground);
}

Headings

  • One <h1> per page, never skip levels (h1 → h3)
  • Use real heading elements, not styled divs
  • Template: <h1> is typically the page/product title

Focus Management

Focus Indicators

/* All interactive elements */
:focus-visible {
  outline: 2px solid rgb(var(--color-focus));
  outline-offset: 2px;
}

/* High contrast mode */
@media (forced-colors: active) {
  :focus-visible {
    outline: 3px solid LinkText;
  }
}
  • Minimum 3:1 contrast ratio for focus indicators
  • Use :focus-visible (not :focus) to avoid showing on click
  • Never outline: none without a visible replacement

Focus Trapping (Modals/Drawers)

  • Trap focus inside modals, drawers, and dialogs
  • Return focus to trigger element on close
  • First focusable element gets focus on open
  • Query all focusable elements: a[href], button:not([disabled]), input:not([disabled]), select, textarea, [tabindex]:not([tabindex="-1"])

See focus and keyboard patterns for full FocusTrap implementation.

Component Patterns

Product Card

<article class="product-card" aria-labelledby="ProductTitle-{{ product.id }}">
  <a href="{{ product.url }}" class="product-card__link" aria-labelledby="ProductTitle-{{ product.id }}">
    <img
      src="{{ product.featured_image | image_url: width: 400 }}"
      alt="{{ product.featured_image.alt | escape }}"
      loading="lazy"
      width="{{ product.featured_image.width }}"
      height="{{ product.featured_image.height }}"
    >
  </a>
  <h3 id="ProductTitle-{{ product.id }}">
    <a href="{{ product.url }}">{{ product.title }}</a>
  </h3>
  <div class="product-card__price" aria-label="{{ 'products.price_label' | t: price: product.price | money }}">
    {{ product.price | money }}
  </div>
  <button
    class="product-card__quick-add"
    tabindex="-1"
    aria-label="{{ 'products.quick_add' | t: title: product.title }}"
  >
    {{ 'products.add_to_cart' | t }}
  </button>
</article>

Rules:

  • Single tab stop per card (the main link)
  • tabindex="-1" on mouse-only shortcuts (quick add)
  • aria-labelledby on <article> pointing to the title
  • Descriptive alt text on images; empty alt="" if decorative

Carousel

<div
  role="region"
  aria-roledescription="carousel"
  aria-label="{{ section.settings.heading | escape }}"
>
  <div class="carousel__controls">
    <button
      aria-label="{{ 'accessibility.previous_slide' | t }}"
      aria-controls="CarouselSlides-{{ section.id }}"
    >{% render 'icon-chevron-left' %}</button>
    <button
      aria-label="{{ 'accessibility.next_slide' | t }}"
      aria-controls="CarouselSlides-{{ section.id }}"
    >{% render 'icon-chevron-right' %}</button>
    <button
      aria-label="{{ 'accessibility.pause_slideshow' | t }}"
      aria-pressed="false"
    >{% render 'icon-pause' %}</button>
  </div>

  <div id="CarouselSlides-{{ section.id }}" aria-live="polite">
    {% for slide in section.blocks %}
      <div
        role="group"
        aria-roledescription="slide"
        aria-label="{{ 'accessibility.slide_n_of_total' | t: n: forloop.index, total: forloop.length }}"
        {% unless forloop.first %}aria-hidden="true"{% endunless %}
      >
        {{ slide.settings.content }}
      </div>
    {% endfor %}
  </div>
</div>

Rules:

  • Auto-rotation minimum 5 seconds, pause on hover/focus
  • Play/pause button required for auto-rotating carousels
  • aria-live="polite" on slide container (set to "off" during auto-rotation)
  • aria-hidden="true" on inactive slides
  • Each slide: role="group" + aria-roledescription="slide"

Modal

<dialog
  id="Modal-{{ section.id }}"
  aria-labelledby="ModalTitle-{{ section.id }}"
  aria-modal="true"
>
  <div class="modal__header">
    <h2 id="ModalTitle-{{ section.id }}">{{ title }}</h2>
    <button
      type="button"
      aria-label="{{ 'accessibility.close' | t }}"
      on:click="/closeModal"
    >{% render 'icon-close' %}</button>
  </div>
  <div class="modal__content">
    <!-- Content -->
  </div>
</dialog>

Rules:

  • Use native <dialog> element
  • aria-labelledby pointing to the title
  • Close on Escape key (native with <dialog>)
  • Focus first interactive element on open
  • Return focus to trigger on close

Cart Drawer

Same as modal pattern but with additional:

  • Live region for cart count updates: <span aria-live="polite" aria-atomic="true">
  • Clear "remove item" buttons with aria-label="{{ 'cart.remove_item' | t: title: item.title }}"
  • Quantity inputs with associated labels

Forms

<form action="{{ routes.cart_url }}" method="post">
  <div class="form__field">
    <label for="Email-{{ section.id }}">{{ 'forms.email' | t }}</label>
    <input
      type="email"
      id="Email-{{ section.id }}"
      name="email"
      required
      aria-required="true"
      autocomplete="email"
      aria-describedby="EmailError-{{ section.id }}"
    >
    <p
      id="EmailError-{{ section.id }}"
      class="form__error"
      role="alert"
      hidden
    >{{ 'forms.email_required' | t }}</p>
  </div>
</form>

Rules:

  • Every input has a visible <label> with matching for/id
  • Use <fieldset>/<legend> for radio/checkbox groups
  • Error messages: role="alert" + aria-describedby linking to input
  • aria-invalid="true" on invalid inputs
  • autocomplete attributes on common fields
  • Required fields: required + aria-required="true" + visual indicator

Product Filters

<form class="facets">
  <div class="facets__group">
    <button
      type="button"
      aria-expanded="false"
      aria-controls="FilterColor-{{ section.id }}"
    >{{ 'filters.color' | t }}</button>
    <fieldset id="FilterColor-{{ section.id }}" hidden>
      <legend class="visually-hidden">{{ 'filters.filter_by_color' | t }}</legend>
      {% for color in colors %}
        <label>
          <input type="checkbox" name="filter.color" value="{{ color }}">
          {{ color }}
        </label>
      {% endfor %}
    </fieldset>
  </div>
  <div aria-live="polite" aria-atomic="true">
    {{ 'filters.results_count' | t: count: results.size }}
  </div>
</form>

Price Display

{% if product.compare_at_price > product.price %}
  <div class="price" aria-label="{{ 'products.sale_price_label' | t: sale_price: product.price | money, original_price: product.compare_at_price | money }}">
    <s aria-hidden="true">{{ product.compare_at_price | money }}</s>
    <span>{{ product.price | money }}</span>
  </div>
{% else %}
  <div class="price">{{ product.price | money }}</div>
{% endif %}
  • Use aria-label to provide full price context (sale vs. original)
  • aria-hidden="true" on the visual strikethrough to avoid duplicate reading

Accordion

<details>
  <summary>{{ block.settings.heading }}</summary>
  <div class="accordion__content">
    {{ block.settings.content }}
  </div>
</details>

Native <details>/<summary> provides keyboard and screen reader support automatically.

Tabs

<div role="tablist" aria-label="{{ 'accessibility.product_tabs' | t }}">
  {% for tab in tabs %}
    <button
      role="tab"
      id="Tab-{{ tab.id }}"
      aria-selected="{% if forloop.first %}true{% else %}false{% endif %}"
      aria-controls="Panel-{{ tab.id }}"
      tabindex="{% if forloop.first %}0{% else %}-1{% endif %}"
    >{{ tab.title }}</button>
  {% endfor %}
</div>
{% for tab in tabs %}
  <div
    role="tabpanel"
    id="Panel-{{ tab.id }}"
    aria-labelledby="Tab-{{ tab.id }}"
    {% unless forloop.first %}hidden{% endunless %}
    tabindex="0"
  >{{ tab.content }}</div>
{% endfor %}
  • Arrow keys navigate between tabs (left/right)
  • Only active tab has tabindex="0", others -1

Dropdown Navigation

<nav aria-label="{{ 'accessibility.main_navigation' | t }}">
  <ul role="list">
    {% for link in linklists.main-menu.links %}
      <li>
        {% if link.links.size > 0 %}
          <button aria-expanded="false" aria-controls="Submenu-{{ forloop.index }}">
            {{ link.title }}
          </button>
          <ul id="Submenu-{{ forloop.index }}" hidden role="list">
            {% for child in link.links %}
              <li><a href="{{ child.url }}">{{ child.title }}</a></li>
            {% endfor %}
          </ul>
        {% else %}
          <a href="{{ link.url }}">{{ link.title }}</a>
        {% endif %}
      </li>
    {% endfor %}
  </ul>
</nav>

Tooltip

<button aria-describedby="Tooltip-{{ block.id }}">
  {{ 'labels.info' | t }}
</button>
<div id="Tooltip-{{ block.id }}" role="tooltip" popover>
  {{ block.settings.tooltip_text }}
</div>

Mobile Accessibility

  • Touch targets: minimum 44x44px, 8px spacing between targets
  • No orientation lock: never restrict to portrait/landscape
  • No hover-only content: everything accessible via tap
  • Use dvh instead of vh for mobile viewport units

Animation & Motion

/* Always provide reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
  • No flashing above 3 times per second
  • Auto-playing animations need pause/stop controls
  • Meaningful animations only — don't animate for decoration

Visually Hidden Utility

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Use for screen-reader-only content like labels and descriptions.

Color Contrast

ElementMinimum Ratio
Normal text (<18px / <14px bold)4.5:1
Large text (≥18px / ≥14px bold)3:1
UI components & graphics3:1
Focus indicators3:1

Never rely solely on color to convey information — always pair with text, icons, or patterns.

References

Related skills

More from benjaminsehl/liquid-skills and the wider catalog.

LIliquid-theme-standards logo

liquid-theme-standards

benjaminsehl/liquid-skills

CSS, JavaScript, and HTML coding standards for Shopify Liquid themes with BEM, design tokens, and progressive enhancement.

2.0k installsAudited
SHshopify-liquid-themes logo

shopify-liquid-themes

benjaminsehl/liquid-skills

Generate Shopify Liquid theme code with correct schema, headers, and patterns for sections, blocks, and snippets.

2.6k installsAudited
AGagentation logo

agentation

benjitaylor/agentation

Add a visual feedback toolbar to Next.js projects for real-time annotation and agent integration.

11k installs
AGagentation-self-driving logo

agentation-self-driving

benjitaylor/agentation

Autonomously critique web pages by adding design annotations via the Agentation toolbar in a visible browser.

5.1k installs
TYtypeui-fundamentals logo

typeui-fundamentals

bergside/typeui

Universal UI/UX design principles covering visual hierarchy, interaction laws, typography foundations, and WCAG accessibility requirements. Use when making design decisions not covered by a specific design system, validating principle compliance, or resolving conflicts between aesthetics and accessibility. Design-system-agnostic and applies to every surface.

610 installsAudited
BEbetter-icons logo

better-icons

Official
better-auth/better-icons

Search and retrieve SVGs from 200+ icon libraries via Iconify CLI and MCP server.

3.6k installsAudited