BFSG/WCAG 2.1 AA konformes Barrierefreiheit-Widget für Shopware 6.7+ Storefronts. Hilft bei der Einhaltung des Barrierefreiheitsstärkungsgesetzes (BFSG)
Live Demo: Teste alle Plugins für OXID eShop und Shopware von Markus Michalski live — ohne Installation, ohne Risiko. demo.markus-michalski.net
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.
1. Privates Repository hinzufügen
{"repositories": [{"type": "composer","url": "https://packeton.markus-michalski.net"}]}
Die Repository-Zugangsdaten werden nach dem Lizenzkauf bereitgestellt.
2. Plugin installieren
composer require mmd/sw67-accessibility
3. Plugin aktivieren
bin/console plugin:refresh && bin/console plugin:install --activate MmdAccessibility && 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.
Für Kunden, die dieses Plugin über den Shopware Store erworben haben, erfolgt der technische Support ausschließlich über das offizielle Shopware Support-Ticket-System in Ihrem Shopware-Account. Für allgemeine, projektbezogene oder kommerzielle Anfragen außerhalb des Store-Frameworks erreichen Sie mich unter support@markus-michalski.net.