BFSG/WCAG 2.1 AA compliant accessibility widget for Shopware 6.7+ storefronts. Helps meet the German Barrierefreiheitsstärkungsgesetz (BFSG).
Live Demo: Try all OXID eShop and Shopware plugins by Markus Michalski live — no installation, no risk. demo.markus-michalski.net
This plugin adds a floating accessibility widget to your Shopware storefront. It allows customers to adjust visual settings according to their needs:
All settings are stored in the user's browser (LocalStorage) and persist across sessions.
| Criterion | Support |
|---|---|
| 2.4.1 Bypass Blocks | Skip-to-content link |
| 1.4.3 Contrast (Minimum) | High contrast mode |
| 1.4.12 Text Spacing | Font size adjustment |
| 2.3.1 Three Flashes | Reduce animations toggle |
| 1.4.8 Visual Presentation | Color filters for CVD |
Important: This plugin alone does not guarantee full BFSG compliance. A comprehensive accessibility audit of your entire shop is required.
1. Add Private Repository
{"repositories": [{"type": "composer","url": "https://packeton.markus-michalski.net"}]}
The repository credentials will be provided after license purchase.
2. Install Plugin
composer require mmd/sw67-accessibility
3. Activate Plugin
bin/console plugin:refresh && bin/console plugin:install --activate MmdAccessibility && bin/console cache:clear
Update to the latest version:
composer update mmd/sw67-accessibility
bin/console cache:clear
Plugin configuration in Shopware Admin:
Settings > Extensions > Accessibility Widget
| Setting | Default | Description |
|---|---|---|
| Enable Widget | On | Master switch for the accessibility widget |
| Widget Position | Bottom right | Position of the floating button (bottom-right or bottom-left) |
| Enable Skip Link | On | Shows "Skip to main content" link for keyboard users |
| Setting | Default | Description |
|---|---|---|
| Show font size option | On | Enables Small/Normal/Large font size selection |
| Show contrast option | On | Enables Normal/High/Inverted contrast modes |
| Show color filter option | On | Enables color vision deficiency filters |
| Show blue light filter | On | Enables blue light reduction toggle |
| Show animations toggle | On | Enables reduce motion toggle |
The widget applies CSS classes to the <html> element based on user selections:
| Setting | CSS Classes |
|---|---|
| Font Size | a11y-font-small, a11y-font-large |
| Contrast | a11y-contrast-high, a11y-contrast-inverted |
| Color Filter | a11y-filter-protanopia, a11y-filter-deuteranopia, a11y-filter-tritanopia |
| Blue Light | a11y-blue-light |
| Animations | a11y-reduce-motion |
Settings are stored in mmd-accessibility-settings key:
{
"fontSize": "large",
"contrast": "high",
"colorFilter": "none",
"blueLight": false,
"reduceMotion": true
}
The color vision deficiency filters use SVG filters based on the Brettel, Viénot & Mollon (1997) algorithm: "Computerized simulation of color appearance for dichromats".
These filters simulate how people with different types of color blindness see colors, helping designers and shop owners understand the impact on their content.
You can customize the widget colors by overriding SCSS variables in your theme:
// In your theme's base.scss (before importing plugin styles)
$a11y-color-primary: #your-brand-color;
$a11y-color-primary-dark: darken(#your-brand-color, 10%);
$a11y-color-bg: #ffffff;
$a11y-color-text: #1f2937;
$a11y-color-border: #e5e7eb;
$a11y-color-hover: #f3f4f6;
The plugin provides Twig blocks for customization:
a11y_widget - Entire widget containera11y_widget_trigger - Floating buttona11y_widget_panel - Settings panela11y_widget_panel_header - Panel header with title and close buttona11y_widget_panel_body - Panel body with all optionsa11y_widget_panel_footer - Panel footer with reset buttona11y_widget_option_fontsize - Font size option groupa11y_widget_option_contrast - Contrast option groupa11y_widget_option_colorfilter - Color filter option groupa11y_widget_option_bluelight - Blue light togglea11y_widget_option_animations - Animations toggleThis plugin is designed with privacy in mind:
| Aspect | Implementation |
|---|---|
| External Services | None - fully self-hosted |
| Cookies | None |
| User Tracking | None |
| Data Storage | Browser LocalStorage only |
| Server Storage | None |
| Consent Required | No - no personal data processing |
Important: Since no cookies are set and no data is sent to third parties or stored on the server, you do NOT need to add this plugin to your cookie consent banner.
bin/console cache:clearbin/console assets:installbin/console theme:compiletheme:compile was run after plugin installation<html> elementThe skip link is hidden by default and only appears when focused via keyboard navigation (Tab key). This is intentional per WCAG guidelines.
MIT License - see LICENSE file for full terms.
For customers who purchased this plugin through the Shopware Store, technical support is provided exclusively through the official Shopware support ticket system in your Shopware account. For general, project-related, or commercial inquiries outside the scope of the Store framework, you can reach me at support@markus-michalski.net.