Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
benjaminsehl avatar

Liquid Theme A11y

benjaminsehl/liquid-skills

  • 2.2k installs
  • 115 repo stars
  • Updated July 16, 2026
  • benjaminsehl/liquid-skills

liquid-theme-a11y is an agent skill that Implement WCAG 2.2 accessibility patterns in Shopify Liquid themes. Covers e-commerce-specific components including prod.

About

Accessibility for Shopify Liquid Themes 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 Component HTML Element ARIA Pattern Reference Expandable content details summary None needed Accordion accordion Modal dialog dialog aria modal true Modal modal Tooltip popup popover attribute role tooltip fallback Tooltip tooltip Dropdown menu nav ul aria expanded on triggers Navigation dropdown navigation Tab interface div role tablist tab tabpanel Tabs tabs Carousel slider div role region aria roledescription Carousel carousel Product card article aria labelledby Product card product card Form form aria invalid aria describedby Forms forms Cart drawer dialog Focus trap Cart drawer cart drawer Price display span aria label for context Prices price display Filters form fieldset aria expanded for disclosures Filters product filters html 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

  • description: "Implement WCAG 2.2 accessibility patterns in Shopify Liquid themes. Covers e-commerce-specific components
  • Every interactive component must work with keyboard only, screen readers, and reduced-motion preferences. Start with sem
  • | Component | HTML Element | ARIA Pattern | Reference |
  • Follow liquid-theme-a11y SKILL.md steps and documented constraints.
  • Follow liquid-theme-a11y SKILL.md steps and documented constraints.

Liquid Theme A11y by the numbers

  • 2,218 all-time installs (skills.sh)
  • +65 installs in the week ending Aug 5, 2026 (Skillselion tracking)
  • Ranked #512 of 16,546 AI & Agent Building skills by installs in the Skillselion catalog
  • Security screen: LOW risk (skills.sh audit)
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
At a glance

liquid-theme-a11y capabilities & compatibility

Capabilities
description: "implement wcag 2.2 accessibility p · every interactive component must work with keybo · | component | html element | aria pattern | refe · follow liquid theme a11y skill.md steps and docu
Use cases
orchestration
From the docs

What liquid-theme-a11y says it does

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,
SKILL.md
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.
SKILL.md
| Component | HTML Element | ARIA Pattern | Reference |
SKILL.md
npx skills add https://github.com/benjaminsehl/liquid-skills --skill liquid-theme-a11y

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs2.2k
repo stars★ 115
Security audit3 / 3 scanners passed
Last updatedJuly 16, 2026
Repositorybenjaminsehl/liquid-skills ↗

When should an agent use liquid-theme-a11y and what problem does it solve?

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. U

Who is it for?

Developers invoking liquid-theme-a11y as documented in the skill source.

Skip if: Skip when requirements fall outside liquid-theme-a11y documented scope.

When should I use this skill?

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. U

What you get

Outputs aligned with the liquid-theme-a11y SKILL.md workflow and stated deliverables.

  • Accessible Liquid HTML snippets
  • ARIA component patterns

Files

SKILL.mdMarkdownGitHub ↗

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

  • Component accessibility patterns
  • Focus and keyboard patterns

Related skills

mattpocockSetup Matt Pocock SkillsScaffold the per-repo configuration that Matt Pocock’s engineering agent skills rely on so they understand the issue tracker, triage labels, and domain documentation la495k196kopen.feishu.cnLark AppsConnect Claude, Cursor or custom agents directly to Lark (Feishu) for messaging, document automation, approval workflows and enterprise data access.402kjuliusbrusseeCavemanSlash token usage by roughly 75% while keeping every technical detail intact when working with Claude Code, Cursor or similar agents.391k94.7klarksuiteLark Skill MakerQuickly turn any Lark/Feishu OpenAPI call or multi-step workflow into a reusable agent skill with its own SKILL.md.386k16kxixu-meRunning Claude Code Via Litellm CopilotRun Claude Code at a fraction of the cost by routing requests through LiteLLM to the GitHub Copilot Chat API.270k72runcomfy-comCodex PetGenerate a complete Codex Pet spritesheet and metadata from one reference image without needing an OpenAI key or Codex Pro.246k10

Forks & variants (1)

Liquid Theme A11y has 1 known copy in the catalog totaling 110 installs. They canonicalize to this original listing.

How it compares

Choose liquid-theme-a11y over generic web accessibility skills when the markup language is Shopify Liquid for e-commerce theme components.

FAQ

What is 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, fi

When should I use 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, fi

Is liquid-theme-a11y safe to install?

Review the Security Audits panel on this page before production use.

AI & Agent Buildingagents
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.