Shopify Liquid テーマに WCAG 2.2 アクセシビリティ パターンを実装します。製品カード、カルーセル、カートドロワー、価格表示、フォーム、フィルター、モーダルなどの電子商取引固有のコンポーネントをカバーします。アクセシビリティ対応のテーマ コンポーネントを構築する場合、アクセシビリティの問題を修正する場合、または .liquid ファイル内の ARIA パターンを確認する場合に使用します。
コマンドラインで liquid-theme-a11y AI スキルを開発環境にすばやくインストール
ソース: benjaminsehl/liquid-skills。
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 | / | None needed | Accordion | | Modal/dialog | | aria-modal="true" | Modal | | Tooltip/popup | [popover] attribute | role="tooltip" fallback | Tooltip | | Dropdown menu | + | aria-expanded on triggers | Navigation | | Tab interface | | role="tablist/tab/tabpanel" | Tabs |
Shopify Liquid テーマに WCAG 2.2 アクセシビリティ パターンを実装します。製品カード、カルーセル、カートドロワー、価格表示、フォーム、フィルター、モーダルなどの電子商取引固有のコンポーネントをカバーします。アクセシビリティ対応のテーマ コンポーネントを構築する場合、アクセシビリティの問題を修正する場合、または .liquid ファイル内の ARIA パターンを確認する場合に使用します。 ソース: benjaminsehl/liquid-skills。
AI/検索での引用用の安定したフィールドとコマンド。
npx skills add https://github.com/benjaminsehl/liquid-skills --skill liquid-theme-a11yShopify Liquid テーマに WCAG 2.2 アクセシビリティ パターンを実装します。製品カード、カルーセル、カートドロワー、価格表示、フォーム、フィルター、モーダルなどの電子商取引固有のコンポーネントをカバーします。アクセシビリティ対応のテーマ コンポーネントを構築する場合、アクセシビリティの問題を修正する場合、または .liquid ファイル内の ARIA パターンを確認する場合に使用します。 ソース: benjaminsehl/liquid-skills。
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/benjaminsehl/liquid-skills --skill liquid-theme-a11y インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります
https://github.com/benjaminsehl/liquid-skills