English Version

Zurück zur Übersicht

Barrierefreiheit-Widget: Storefront-Integration

Live Demo: Teste dieses und weitere Plugins live — ohne Installation, ohne Risiko: demo.markus-michalski.net

Funktionsweise

CSS-Klassen

Das Widget wendet CSS-Klassen auf das <html>-Element an, abhängig von der Nutzerauswahl:

LocalStorage

Einstellungen werden unter dem Key mmd-accessibility-settings gespeichert:

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

Farbfilter

Die Farbsehschwächen-Filter sind SVG-Filter mit festen 3×3-Farbmatrizen (feColorMatrix) für Protanopie, Deuteranopie und Tritanopie. Sie nähern an, wie Menschen mit der jeweiligen Farbsehschwäche Farben wahrnehmen, und helfen Designern und Shop-Betreibern, die Wirkung auf ihre Inhalte einzuschätzen. Es handelt sich um eine Näherung, nicht um eine exakte Simulation.

Die Filter wirken auf den Container #a11y-content-wrapper, der den Seiteninhalt umschließt. Elemente außerhalb dieses Containers sind nicht betroffen.

Theme-Anpassung

SCSS-Variablen

Die Widget-Farben lassen sich anpassen, indem SCSS-Variablen im eigenen Theme überschrieben werden:

// In der base.scss des 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;

Template-Blöcke

Das Plugin stellt folgende Twig-Blöcke zur Anpassung bereit: