Stats
Actions
Tags
From shopware-storefront
Shopware 6 Storefront Barrierefreiheit (a11y): WCAG 2.1 AA, BITV 2.0, Feature-Flag ACCESSIBILITY_TWEAKS, Breaking-Changes-Handling, Checklist (ARIA, Fokus, Tastatur, Semantik, Farben, Modals, Skip Links). Automatisierte Tests (axe, Lighthouse, WAVE). Trigger: "accessibility shopware", "barrierefreiheit shopware", "wcag shopware", "ACCESSIBILITY_TWEAKS", "a11y storefront", "screen reader shopware", "aria shopware", "keyboard navigation shopware", "axe devtools shopware", "eu accessibility directive", "fokus management storefront", "accessible extension". Shopware 6.6+/6.7.
How this skill is triggered — by the user, by Claude, or both
Slash command
/shopware-storefront:sw-accessibilityThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
WCAG 2.1 AA + BITV 2.0. Bootstrap-5-Basis mit ARIA-Rollen.
WCAG 2.1 AA + BITV 2.0. Bootstrap-5-Basis mit ARIA-Rollen.
# .env oder .env.local
ACCESSIBILITY_TWEAKS=1
Nach Aktivierung: bin/console theme:compile (Styling-Änderungen).
Breaking a11y-Changes sind hinter diesem Flag versteckt — sie werden in Minor Releases eingeführt, aber erst mit v6.7.0 zum Standard.
{# @deprecated tag:v6.7.0 - Wird zu <ul>/<li> für korrekte Semantik #}
{% if feature('ACCESSIBILITY_TWEAKS') %}
<ul class="sidebar-list">
{% block component_list_items_inner %}
<li class="list-item"><a href="#">Item</a></li>
{% endblock %}
</ul>
{% else %}
<div class="sidebar-list">
{% block component_list_items %}
<div class="list-item"><a href="#">Item</a></div>
{% endblock %}
</div>
{% endif %}
Beim Erweitern: beide Blöcke anpassen bis v6.7.0.
| Bereich | Anforderung |
|---|---|
| Semantisches HTML | <button>, <a>, <nav>, <main>, <label for="..."> statt <div> |
| Dokument-Sprache | <html lang="de"> |
| Fokus-Management | Sichtbare Fokus-Indikatoren; focus() nach Modal-Schließen |
| Tastatur | Tab/Enter/Esc/Pfeiltasten; kein onclick auf nicht-fokussierbare Elemente |
| ARIA | Sparsam; role="alert", aria-expanded, aria-hidden, aria-live |
| Bilder/Icons | alt-Texte; Icon-only Buttons mit aria-label |
| Farben | Kontrastverhältnis ≥ 4.5:1 (Text) — nicht nur Farbe als Info-Träger |
| Überschriften | Eine <h1>, korrekte Hierarchie h2→h3... |
| Skip Links | <a href="#main-content" class="skip-link">Zum Inhalt springen</a> |
| Modals | Fokus-Trap im Modal; Fokus-Rückgabe nach Schließen |
| Formulare | <label>, aria-describedby für Fehlermeldungen |
<title> | Bei Seitenwechsel aktualisieren |
Vollständige Referenz + Changelog bekannter a11y-Fixes: references/deep/accessibility.md.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub zone1987/claude-a-dev-team --plugin shopware-storefront