BFSG/WCAG 2.1 AA compliant accessibility widget for Shopware 6.7+ storefronts. Helps meet the German Barrierefreiheitsstärkungsgesetz (BFSG).
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.
Installation via the Shopware Store is recommended. After purchase, you can install the plugin directly from the backend.
Add the private Composer repository to your shop's composer.json:
{
"repositories": [
{
"type": "composer",
"url": "https://packeton.markus-michalski.net"
}
]
}
Note: Repository credentials will be provided upon license purchase. Private repositories are managed via Packeton.
composer require mmd/sw67-accessibility
When prompted for authentication, enter the credentials provided with your license.
bin/console plugin:refresh
bin/console plugin:install --activate MmdAccessibility
bin/console assets:install
bin/console theme:compile
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 questions and support:
Markus Michalski
Email: support@markus-michalski.net