Deutsche Version

Back to overview

Accessibility Widget: Storefront Integration

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

How It Works

CSS Classes

The widget applies CSS classes to the <html> element based on the user's selection:

LocalStorage

Settings are stored under the mmd-accessibility-settings key:

{
    "fontSize": "large",
    "contrast": "high",
    "colorFilter": "none",
    "blueLight": false,
    "reduceMotion": true
}

Color Filters

The color vision deficiency filters are SVG filters with fixed 3×3 color matrices (feColorMatrix) for protanopia, deuteranopia and tritanopia. They approximate how people with the respective color vision deficiency perceive colors, helping designers and shop owners assess the impact on their content. This is an approximation, not an exact simulation.

The filters act on the #a11y-content-wrapper container that wraps the page content. Elements outside this container are not affected.

Theme Customization

SCSS Variables

You can customize the widget colors by overriding SCSS variables in your own theme:

// In your theme's base.scss, before importing the 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;

Template Blocks

The plugin provides the following Twig blocks for customization: