Implementieren Sie WCAG 2.2-Barrierefreiheitsmuster in Shopify Liquid-Themes. Deckt E-Commerce-spezifische Komponenten ab, einschließlich Produktkarten, Karussells, Warenkorbschubladen, Preisanzeige, Formulare, Filter und Modalitäten. Verwenden Sie diese Option, wenn Sie barrierefreie Designkomponenten erstellen, Barrierefreiheitsprobleme beheben oder ARIA-Muster in .liquid-Dateien überprüfen.
Installieren Sie den KI-Skill liquid-theme-a11y schnell in Ihrer Entwicklungsumgebung über die Kommandozeile
Quelle: 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 |
Implementieren Sie WCAG 2.2-Barrierefreiheitsmuster in Shopify Liquid-Themes. Deckt E-Commerce-spezifische Komponenten ab, einschließlich Produktkarten, Karussells, Warenkorbschubladen, Preisanzeige, Formulare, Filter und Modalitäten. Verwenden Sie diese Option, wenn Sie barrierefreie Designkomponenten erstellen, Barrierefreiheitsprobleme beheben oder ARIA-Muster in .liquid-Dateien überprüfen. Quelle: benjaminsehl/liquid-skills.
Stabile Felder und Befehle für KI/Such-Zitate.
npx skills add https://github.com/benjaminsehl/liquid-skills --skill liquid-theme-a11yImplementieren Sie WCAG 2.2-Barrierefreiheitsmuster in Shopify Liquid-Themes. Deckt E-Commerce-spezifische Komponenten ab, einschließlich Produktkarten, Karussells, Warenkorbschubladen, Preisanzeige, Formulare, Filter und Modalitäten. Verwenden Sie diese Option, wenn Sie barrierefreie Designkomponenten erstellen, Barrierefreiheitsprobleme beheben oder ARIA-Muster in .liquid-Dateien überprüfen. Quelle: benjaminsehl/liquid-skills.
Öffnen Sie Ihr Terminal oder Kommandozeilen-Tool (Terminal, iTerm, Windows Terminal, etc.) Kopieren Sie diesen Befehl und führen Sie ihn aus: npx skills add https://github.com/benjaminsehl/liquid-skills --skill liquid-theme-a11y Nach der Installation wird der Skill automatisch in Ihrer KI-Programmierumgebung konfiguriert und ist bereit zur Verwendung in Claude Code, Cursor oder OpenClaw
https://github.com/benjaminsehl/liquid-skills