Accessibility Widget: Technical Details

Accessibility widget for Shopware 6.7 - architecture diagram, plugin structure and subscriber overview

Live Demo: Try this and other plugins live — no installation, no risk: demo.markus-michalski.net

How Settings Are Applied

graph TD
    A["Visitor clicks<br/>accessibility widget"] --> B["AccessibilityWidget<br/>(accessibility-widget.js)"]
    B --> C["Save setting<br/>(localStorage)"]
    C --> D{"Setting type?"}
    D -->|"Font size"| E["CSS class<br/>a11y-font-small / a11y-font-large"]
    D -->|"Contrast"| F["CSS class<br/>a11y-contrast-high / a11y-contrast-inverted"]
    D -->|"Color filter"| G["CSS class<br/>a11y-filter-*"]
    D -->|"Blue light / Animations"| H["CSS class<br/>a11y-blue-light / a11y-reduce-motion"]
    E & F & G & H --> I["html element<br/>class applied"]
    I --> J["CSS rules<br/>active"]

Plugin Structure

src/
├── MmdAccessibility.php                       Plugin class, cleans up system_config on uninstall
├── Subscriber/
│   └── StorefrontRenderSubscriber.php         Passes configuration to the templates
└── Resources/
    ├── config/
    │   ├── config.xml                          Plugin settings (admin)
    │   └── services.xml                        Service wiring
    ├── app/storefront/src/scss/base.scss        Widget styles and effect classes
    ├── public/js/accessibility-widget.js        Vanilla JS widget, no build step required
    ├── snippet/de_DE/, en_GB/                   Translations
    └── views/storefront/
        ├── base.html.twig                       Includes SVG filters, widget and widget script
        └── component/accessibility/
            ├── widget.html.twig                 Trigger button and settings panel
            └── svg-filters.html.twig            SVG filter definitions for color vision deficiencies

Subscriber Overview

StorefrontRenderSubscriber listens for StorefrontRenderEvent and exposes the plugin configuration under the Twig variable mmdAccessibility:

Config Key	Twig Path	Default
`widgetEnabled`	`mmdAccessibility.enabled`	`true`
`widgetPosition`	`mmdAccessibility.position`	`bottom-right`
`optionFontSize`	`mmdAccessibility.options.fontSize`	`true`
`optionContrast`	`mmdAccessibility.options.contrast`	`true`
`optionColorFilter`	`mmdAccessibility.options.colorFilter`	`true`
`optionBlueLight`	`mmdAccessibility.options.blueLight`	`true`
`optionAnimations`	`mmdAccessibility.options.animations`	`true`

Two safeguards in the subscriber:

Widget position is checked against a fixed allowlist (bottom-right, bottom-left); any other stored value falls back to bottom-right. This prevents a manipulated config value from injecting CSS into the page.
Boolean settings only accept real PHP booleans. A value stored as the string "false" would otherwise be interpreted by PHP as true; the subscriber falls back to the default instead.