Live Demo: Teste dieses und weitere Plugins live — ohne Installation, ohne Risiko: demo.markus-michalski.net
Das Widget wendet CSS-Klassen auf das <html>-Element an, abhängig von der Nutzerauswahl:
| Einstellung | CSS-Klassen |
|---|---|
| Schriftgröße | a11y-font-small, a11y-font-large |
| Kontrast | a11y-contrast-high, a11y-contrast-inverted |
| Farbfilter | a11y-filter-protanopia, a11y-filter-deuteranopia, a11y-filter-tritanopia |
| Blaulicht | a11y-blue-light |
| Animationen | a11y-reduce-motion |
Einstellungen werden unter dem Key mmd-accessibility-settings gespeichert:
{
"fontSize": "large",
"contrast": "high",
"colorFilter": "none",
"blueLight": false,
"reduceMotion": true
}
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.
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;
Das Plugin stellt folgende Twig-Blöcke zur Anpassung bereit:
| Block | Zweck |
|---|---|
a11y_widget |
Gesamter Widget-Container |
a11y_widget_trigger |
Schwebender Button |
a11y_widget_panel |
Einstellungs-Panel |
a11y_widget_panel_header |
Panel-Header mit Titel und Schließen-Button |
a11y_widget_panel_body |
Panel-Body mit allen Optionen |
a11y_widget_panel_footer |
Panel-Footer mit Reset-Button |
a11y_widget_option_fontsize |
Schriftgröße-Optionsgruppe |
a11y_widget_option_contrast |
Kontrast-Optionsgruppe |
a11y_widget_option_colorfilter |
Farbfilter-Optionsgruppe |
a11y_widget_option_bluelight |
Blaulicht-Toggle |
a11y_widget_option_animations |
Animationen-Toggle |