BFSG/WCAG 2.1 AA konformes Barrierefreiheit-Widget für Shopware 6.7+ Storefronts. Hilft bei der Einhaltung des Barrierefreiheitsstärkungsgesetzes (BFSG)
Dieses Plugin fügt ein schwebendes Barrierefreiheit-Widget zu Ihrer Shopware-Storefront hinzu. Es ermöglicht Kunden, visuelle Einstellungen nach ihren Bedürfnissen anzupassen:
Alle Einstellungen werden im Browser des Nutzers gespeichert (LocalStorage) und bleiben über Sitzungen hinweg erhalten.
| Kriterium | Unterstützung |
|---|---|
| 2.4.1 Blöcke umgehen | Skip-to-Content Link |
| 1.4.3 Kontrast (Minimum) | Hoher Kontrast Modus |
| 1.4.12 Textabstand | Schriftgrößenanpassung |
| 2.3.1 Drei Blitze | Animationen deaktivieren |
| 1.4.8 Visuelle Darstellung | Farbfilter für Farbsehschwächen |
Wichtig: Dieses Plugin allein garantiert keine vollständige BFSG-Konformität. Eine umfassende Barrierefreiheitsprüfung Ihres gesamten Shops ist erforderlich.
Die Installation über den Shopware Store wird empfohlen. Nach dem Kauf können Sie das Plugin direkt über das Backend installieren.
Fügen Sie das private Composer-Repository zur composer.json Ihres Shops hinzu:
{
"repositories": [
{
"type": "composer",
"url": "https://packeton.markus-michalski.net"
}
]
}
Hinweis: Die Zugangsdaten zum Repository werden nach Erwerb einer Lizenz zugestellt. Die Verwaltung der privaten Repositories läuft über Packeton.
composer require mmd/sw67-accessibility
Bei der Authentifizierungsabfrage geben Sie die Zugangsdaten ein, die Sie mit Ihrer Lizenz erhalten haben.
bin/console plugin:refresh
bin/console plugin:install --activate MmdAccessibility
bin/console assets:install
bin/console theme:compile
bin/console cache:clear
Auf die neueste Version aktualisieren:
composer update mmd/sw67-accessibility
bin/console cache:clear
Plugin-Konfiguration im Shopware Admin unter:
Einstellungen > Erweiterungen > Barrierefreiheit-Widget
| Einstellung | Standard | Beschreibung |
|---|---|---|
| Widget aktivieren | An | Hauptschalter für das Barrierefreiheit-Widget |
| Widget-Position | Unten rechts | Position des schwebenden Buttons (unten-rechts oder unten-links) |
| Skip-Link aktivieren | An | Zeigt "Zum Hauptinhalt springen"-Link für Tastaturnutzer |
| Einstellung | Standard | Beschreibung |
|---|---|---|
| Schriftgröße anzeigen | An | Aktiviert Klein/Normal/Groß Schriftgrößenauswahl |
| Kontrast anzeigen | An | Aktiviert Normal/Hoch/Invertiert Kontrastmodi |
| Farbfilter anzeigen | An | Aktiviert Farbsehschwächen-Filter |
| Blaulichtfilter anzeigen | An | Aktiviert Blaulichtreduzierungs-Toggle |
| Animationen-Toggle anzeigen | An | Aktiviert Bewegungsreduzierungs-Toggle |
Das Widget wendet CSS-Klassen auf das <html>-Element basierend auf Nutzerauswahl an:
| Einstellung | CSS-Klassen |
|---|---|
| Schriftgröße | a11y-font-small, a11y-font-large |
| Kontrast | a11y-contrast-high, a11y-contrast-inverted |
| Farbfilter | a11y-filter-protanopia, a11y-filter-deuteranopia, a11y-filter-tritanopia |
| Blaulicht | a11y-blue-light |
| Animationen | a11y-reduce-motion |
Einstellungen werden im mmd-accessibility-settings Key gespeichert:
{
"fontSize": "large",
"contrast": "high",
"colorFilter": "none",
"blueLight": false,
"reduceMotion": true
}
Die Farbsehschwächen-Filter verwenden SVG-Filter basierend auf dem Brettel, Viénot & Mollon (1997) Algorithmus: "Computerized simulation of color appearance for dichromats".
Diese Filter simulieren, wie Menschen mit verschiedenen Arten von Farbblindheit Farben sehen, und helfen Designern und Shop-Betreibern, die Auswirkungen auf ihre Inhalte zu verstehen.
Sie können die Widget-Farben anpassen, indem Sie SCSS-Variablen in Ihrem Theme überschreiben:
// In der base.scss Ihres Themes (vor dem Import der Plugin-Styles)
$a11y-color-primary: #ihre-markenfarbe;
$a11y-color-primary-dark: darken(#ihre-markenfarbe, 10%);
$a11y-color-bg: #ffffff;
$a11y-color-text: #1f2937;
$a11y-color-border: #e5e7eb;
$a11y-color-hover: #f3f4f6;
Das Plugin bietet Twig-Blöcke zur Anpassung:
a11y_widget - Gesamter Widget-Containera11y_widget_trigger - Schwebender Buttona11y_widget_panel - Einstellungs-Panela11y_widget_panel_header - Panel-Header mit Titel und Schließen-Buttona11y_widget_panel_body - Panel-Body mit allen Optionena11y_widget_panel_footer - Panel-Footer mit Reset-Buttona11y_widget_option_fontsize - Schriftgröße-Optionsgruppea11y_widget_option_contrast - Kontrast-Optionsgruppea11y_widget_option_colorfilter - Farbfilter-Optionsgruppea11y_widget_option_bluelight - Blaulicht-Togglea11y_widget_option_animations - Animationen-ToggleDieses Plugin wurde mit Datenschutz im Fokus entwickelt:
| Aspekt | Umsetzung |
|---|---|
| Externe Dienste | Keine - vollständig selbst gehostet |
| Cookies | Keine |
| Nutzer-Tracking | Keins |
| Datenspeicherung | Nur Browser LocalStorage |
| Server-Speicherung | Keine |
| Einwilligung erforderlich | Nein - keine Verarbeitung personenbezogener Daten |
Wichtig: Da keine Cookies gesetzt werden und keine Daten an Dritte oder auf den Server gesendet werden, müssen Sie dieses Plugin NICHT zu Ihrem Cookie-Consent-Banner hinzufügen.
bin/console cache:clearbin/console assets:installbin/console theme:compiletheme:compile nach Plugin-Installation ausgeführt wurde<html>-Element hinzugefügt werdenDer Skip-Link ist standardmäßig versteckt und erscheint nur bei Fokus über Tastaturnavigation (Tab-Taste). Dies ist gemäß WCAG-Richtlinien beabsichtigt.
MIT-Lizenz - siehe LICENSE-Datei für vollständige Bedingungen.
Bei Fragen und Support:
Markus Michalski
E-Mail: support@markus-michalski.net