# EAA Barrierefreiheit: Widget & WCAG-Korrekturen (dfaccessibility)

> DF Accessibility bringt Ihren PrestaShop-Shop in Konformität mit dem europäischen Barrierefreiheitsgesetz (EAA, Richtlinie (EU) 2019/882, in Deutschland BFSG) durch drei Bausteine: ein Barrierefreiheits-Widget, dessen Optionen Sie wählen, eine automatische WCAG-Korrektur-Engine,…

- Seite: <https://www.datafirefly.com/de/documentation/dfaccessibility/>
- Sprache: de
- Aktualisiert am: 2026-10-12
- Weitere Sprachen: [fr](https://www.datafirefly.com/documentation/dfaccessibility/index.md), [en](https://www.datafirefly.com/en/documentation/dfaccessibility/index.md), [es](https://www.datafirefly.com/es/documentation/dfaccessibility/index.md), [it](https://www.datafirefly.com/it/documentation/dfaccessibility/index.md), [pl](https://www.datafirefly.com/pl/documentation/dfaccessibility/index.md), [nl](https://www.datafirefly.com/nl/documentation/dfaccessibility/index.md), [pt](https://www.datafirefly.com/pt/documentation/dfaccessibility/index.md)
- Index: <https://www.datafirefly.com/de/documentation/llms.txt>

DF Accessibility bringt Ihren PrestaShop-Shop in Konformität mit dem europäischen Barrierefreiheitsgesetz (EAA, Richtlinie (EU) 2019/882, in Deutschland BFSG) durch drei Bausteine: ein Barrierefreiheits-Widget, dessen Optionen Sie wählen, eine automatische WCAG-Korrektur-Engine, die auf jeder Seite läuft, und einen Generator für die rechtliche Erklärung zur Barrierefreiheit in 8 Sprachen.

Diese Dokumentation beschreibt Modulversion **1.3.0**, kompatibel mit PrestaShop **8.0.0 bis 9.x**. Keine Klassen-Overrides, keine Composer-Abhängigkeit, keine externen Anfragen.

## Installation und Aktualisierung

1. Öffnen Sie in Ihrem PrestaShop-Backoffice **Module > Modul-Manager**.
2. Klicken Sie auf **Modul hochladen** und ziehen Sie die Datei `dfaccessibility.zip` hinein.
3. Klicken Sie nach Abschluss der Installation auf **Konfigurieren**.

Das Modul registriert sich auf den Hooks `displayHeader`, `actionFrontControllerSetMedia`, `displayBeforeBodyClosingTag` und `displayFooter` (der letzte dient als Ersatz für Themes, die den vorherigen nicht aufrufen) und erstellt eine Statistiktabelle. Direkt nach der Installation ist das Widget mit allen Optionen aktiv, und alle automatischen Korrekturen sind eingeschaltet, mit Ausnahme der Kontrastkorrektur.

Zum Aktualisieren laden Sie einfach das neue ZIP über das installierte Modul hoch, ohne es zu deinstallieren: Die Update-Skripte ergänzen die neuen Einstellungen und behalten Ihre Konfiguration bei.

## Konfiguration

### Barrierefreiheits-Widget

- **Widget aktivieren**: zeigt den schwebenden Button im Frontoffice an. Das Deaktivieren des Widgets beendet auch die Anwendung bereits gespeicherter Besuchereinstellungen.
- **Button-Position**: unten rechts oder unten links.
- **Akzentfarbe**: verwendet für den Button, die aktiven Panel-Optionen und den erzwungenen Fokusrahmen. Wählen Sie eine Farbe mit ausreichend Kontrast zu Weiß (das Standardblau `#2563EB` erfüllt das AA-Verhältnis).
- **Button auf Mobilgeräten ausblenden**: blendet den schwebenden Button unter 768px aus.
- **Button im Warenkorb und im Checkout ausblenden**: entfernt den Button von Warenkorb- und Bestellseiten, auch bei One-Page-Checkout-Modulen, die den Seitennamen `order` beibehalten.
- **Im Widget angezeigte Optionen**: ein Kontrollkästchen pro Option (Textgröße, hoher Kontrast, lesbare Schrift, Abstände, Link-Hervorhebung, großer Mauszeiger, Lesehilfe, Animationsstopp, Bilder ausblenden). Ist keine Option angehakt, wird der schwebende Button ausgeblendet.

Ist der Button auf Mobilgeräten, im Warenkorb oder im Checkout ausgeblendet, gelten die bereits aktivierten Besuchereinstellungen und die automatischen Korrekturen weiter. Ein Besucher im Hochkontrast bleibt bis zur Zahlung im Hochkontrast.

Eine nicht angehakte Option wird auch bei Besuchern, die sie bereits aktiviert hatten, nicht mehr angewendet. Das ist beabsichtigt: Ohne ihren Button hätte der Besucher keine Möglichkeit, sie auszuschalten.

### Automatische Korrekturen

Jede Korrektur ist einzeln aktivierbar. Sie laufen beim Seitenaufruf und bei nachträglich hinzugefügten Inhalten im Browser des Besuchers: Ihre Theme-Dateien werden nie verändert.

- **Fehlende Alt-Texte**: siehe Details weiter unten.
- **Unbeschriftete Formularfelder**: fügt ein `aria-label` aus dem Platzhalter oder Feldnamen hinzu.
- **Links, die ein neues Fenster öffnen**: fügt `rel=noopener` und einen hörbaren Hinweis für Screenreader hinzu.
- **Iframes ohne Titel**: fügt ein `title`-Attribut aus der Quelldomain hinzu.
- **ARIA-Landmarken**: fügt die Rollen `banner` und `contentinfo` sowie ein Navigations-`aria-label` hinzu, wenn sie fehlen.
- **Sprunglink**: fügt einen Link „Zum Hauptinhalt springen" ein, der beim ersten Drücken von Tab erscheint.
- **Sichtbarer Fokusrahmen**: erzwingt einen Rahmen beim Tastaturfokus (WCAG-Kriterium 2.4.7).
- **Automatische Kontrastkorrektur**: standardmäßig deaktiviert, siehe eigenen Abschnitt.

### Statistiken

Bei aktivierter Erfassung summiert jeder Browser die angewendeten Korrekturen und sendet sie höchstens einmal pro Minute, beim Schließen oder Verlassen der Seite. Die Zähler werden pro Tag und pro Shop aggregiert: kein Cookie, keine Kennung, keine personenbezogenen Daten.

## Das Widget aus Besuchersicht

Der schwebende Button öffnet ein Panel mit den Optionen, die Sie angehakt haben:

- **Textgröße**: 5 Stufen von 100 bis 150 %.
- **Hoher Kontrast**: intelligenter Modus, unten beschrieben.
- **Lesbare Schrift**: wechselt auf Verdana, Tahoma, Arial.
- **Abstände vergrößern**: Buchstaben 0,12 em, Wörter 0,16 em, Zeilenhöhe 1,6 und 2 em zwischen Absätzen, die Prüfwerte des WCAG-Kriteriums 1.4.12.
- **Links hervorheben**: gelber Hintergrund und durchgehende Unterstreichung.
- **Großer Mauszeiger**: vergrößerter Pfeil und vergrößerte Hand über Links und Buttons.
- **Lesehilfe**: horizontale Leiste, die der Maus folgt.
- **Animationen stoppen**: neutralisiert CSS-Animationen und -Übergänge, pausiert automatisch startende Videos sowie Bootstrap-, Swiper-, Slick- und Owl-Slider (WCAG-Kriterien 2.2.2 und 2.3.3).
- **Bilder ausblenden**: blendet Bilder, Videos und Hintergrundbilder aus.
- **Alle Einstellungen zurücksetzen**: zurück zum Originalzustand.

Das Panel ist vollständig per Tastatur bedienbar: Fokusfalle, Schließen per Escape, `aria-pressed`-Zustände auf jeder Option. Die Einstellungen werden ausschließlich im `localStorage` des Browsers gespeichert und auf den Folgeseiten **vor dem ersten Rendern** wieder angewendet, ohne Flackern und ohne Daten an Ihre Server.

Icon-Schriften (Material Icons im Classic-Theme, Font Awesome) sind von lesbarer Schrift und Abständen ausgenommen, damit Icons nicht zu Text werden.

### Textgröße

Das Modul vergrößert die Root-Schriftgröße der Seite ausgehend vom Wert Ihres Themes, wodurch alle Texte in `rem` und `em` wachsen, auch bei Themes mit 62,5 %-Root. In Pixeln angegebene Texte, die der Root nicht folgen, werden einzeln vergrößert. Jeder Text wird nur einmal vergrößert, unabhängig von seiner Einheit.

### Der intelligente Hochkontrast

Klassische Widgets erzwingen auf allen Elementen einen weißen Hintergrund und volle Deckkraft, wodurch Slider-Visuals verschwinden und versteckte Slides, eingeklappte Menüs und Modal-Hintergründe wieder auftauchen. Hier analysiert das Modul die ganze Seite, in Blöcken, damit sie nicht einfriert:

- **einfarbige** Hintergründe und **Verläufe** werden weiß;
- Elemente mit **Hintergrundbild** sowie Bildunterschriften über einem Slider-Bild bleiben erhalten: Ihre Texte bekommen eine halbtransparente weiße Platte;
- Texte werden schwarz, Links dunkelblau und unterstrichen (gelb beim Überfahren), Buttons und Felder bekommen einen weißen Hintergrund und einen 2px schwarzen Rahmen;
- nichts, was das Theme versteckt, taucht wieder auf.

Die erzwungenen Farben greifen erst nach Abschluss der Analyse, damit beim Laden kein schwarzer Text auf dunklem Grund erscheint. Das Ausschalten stellt die Originalstile wieder her, auch Inline-Stile eines Page Builders.

### Auf Mobilgeräten

Unter 768px wird der Button auf 44px verkleinert (die Touch-Zielgröße des WCAG-Kriteriums 2.5.5) und sitzt 14px vom Rand entfernt. Das Panel nutzt die Bildschirmbreite, bis 320px.

## Die automatischen Korrekturen im Detail

### Alt-Texte (WCAG 1.1.1)

Für jedes Bild ohne `alt`-Attribut wendet das Modul der Reihe nach an:

1. für Hilfstechnologien ausgeblendetes Bild, Tracking-Pixel oder Bild in einem Link, der bereits Text trägt: leeres `alt` (dekoratives Bild);
2. andernfalls die `figcaption`-Bildunterschrift oder das `title`-Attribut;
3. andernfalls den Produkttitel der umgebenden Miniatur;
4. als letztes Mittel den bereinigten Dateinamen, sofern aussagekräftig.

Ist keine dieser Quellen verlässlich, bleibt das Bild unverändert, statt es durch ein leeres `alt` fälschlich vor Screenreadern zu verbergen.

Die automatische Korrektur ist ein Sicherheitsnetz. Schreiben Sie für Ihre wichtigen Produktbilder die Alt-Texte von Hand im Katalog: Das Modul ändert bestehende `alt`-Attribute nie.

### Formulare (WCAG 1.3.1, 4.1.2)

Felder ohne zugeordnetes `label`, ohne `aria-label` und ohne `title` erhalten ein `aria-label` aus dem Platzhalter oder ersatzweise aus dem Feldnamen.

### Links und Iframes (WCAG 3.2.5, 4.1.2)

`target=_blank`-Links erhalten `rel=noopener` und ein `aria-label` mit dem Zusatz „öffnet in einem neuen Fenster". Iframes ohne Titel erhalten ein `title` mit der eingebetteten Domain.

### Struktur und Navigation (WCAG 1.3.1, 2.4.1, 2.4.7)

ARIA-Rollen werden ergänzt, wenn das Theme sie nicht deklariert, der Sprunglink ganz oben eingefügt und der Fokusrahmen über `:focus-visible` erzwungen. Im Classic-Theme, in dem das `

`-Tag auch Header und Footer umschließt, zielt der Sprunglink auf die Inhaltsspalte `#content-wrapper`. Bringt Ihr Theme bereits einen Sprunglink mit, fügt das Modul keinen hinzu.

### Automatische Kontrastkorrektur (WCAG 1.4.3)

Die Engine berechnet die relative Luminanz jedes Textes und seines tatsächlichen Hintergrunds und dunkelt Farben unter dem geforderten Verhältnis schrittweise ab oder hellt sie auf: 4,5, bzw. 3 bei großem Text (24px, oder 18,66px fett). Sie läuft in den Leerlaufzeiten des Browsers.

Texte über einem Bild, einem Verlauf, einem halbtransparenten Hintergrund oder in einem Slider werden übersprungen: Ihr tatsächlicher Hintergrund lässt sich nicht berechnen, und eine Korrektur könnte sie schlechter lesbar machen. Deaktivierte Texte werden ebenfalls übersprungen.

Diese Korrektur verändert die von Ihrem Theme definierten Textfarben. Aktivieren Sie sie, prüfen Sie das Ergebnis auf Ihren wichtigsten Seiten und behalten Sie sie, wenn es passt. Aus diesem Grund ist sie standardmäßig deaktiviert.

### Nach dem Laden eingefügte Inhalte

Die Korrekturen gelten auch für Inhalte, die nach dem Laden eingefügt werden: Produktlisten der Facettenfilter, Schnellansicht, Warenkorb-Modal, Endlos-Scrollen. Hochkontrast und Textgröße werden dort ebenso angewendet.

## BFSG/EAA-Barrierefreiheitserklärung

Die Veröffentlichung einer Erklärung zur Barrierefreiheit ist eine formale Pflicht der Richtlinie. Klicken Sie in der Modulkonfiguration auf **Erklärungsseite erzeugen**: Eine CMS-Seite wird in jeder Sprache Ihres Shops erstellt (Vorlagen FR, EN, ES, DE, IT, NL, PL und PT enthalten, englischer Fallback für weitere Sprachen), mit:

- dem Konformitätsstatus gemäß Richtlinie (EU) 2019/882 und Norm EN 301 549;
- der Liste der verfügbaren Barrierefreiheitsfunktionen;
- dem Feedback-Kanal zu Ihrem Kontaktformular, in der Sprache der Seite;
- dem Durchsetzungsverfahren bei der zuständigen nationalen Behörde.

Der Link zur Erklärung erscheint automatisch unten im Widget-Panel, nur wenn die Seite existiert und aktiv ist. Nach einem Modul-Update oder einer Umbenennung des Shops klicken Sie auf **Erklärungsseite aktualisieren**: Eine Bestätigung weist darauf hin, dass manuelle Änderungen ersetzt werden, dann wird die Seite ohne URL-Änderung aktualisiert.

## Statistiken und Sorgfaltsnachweis

Die Tabelle auf der Konfigurationsseite zeigt über die letzten 30 Tage und pro Typ die Zahl der angewendeten Korrekturen: Alt-Texte, Formular-Labels, externe Links, Iframe-Titel, ARIA-Landmarken, Sprunglinks und Kontrastkorrekturen. Im Falle einer Prüfung oder Beschwerde dokumentieren diese Zähler die umgesetzten technischen Maßnahmen. Der Button **Statistiken zurücksetzen** leert die Zähler des aktuellen Shops.

Im Multishop werden Statistiken und Erklärung pro Shop-Kontext verwaltet.

## Best Practices und Grenzen

Das Modul behebt die häufigsten technischen Mängel, aber einige WCAG-Kriterien sind redaktioneller Natur und bleiben in Ihrer Hand:

- logische Überschriftenhierarchie h1 bis h6 in CMS-Inhalten und Produktseiten;
- redaktionelle Qualität der Alt-Texte Ihrer wichtigsten Bilder;
- Untertitel für Ihre Videos;
- Verständlichkeit Ihrer Button- und Linkbeschriftungen.

Kein automatisches Werkzeug macht eine Website „100% konform". Das Modul liefert eine solide, dokumentierte technische Basis; ergänzen Sie sie durch eine redaktionelle Prüfung Ihrer wichtigsten Seiten.

## Fehlerbehebung

- **Der Button erscheint nicht**: Prüfen Sie, ob das Widget aktiviert und mindestens eine Option angehakt ist und ob Sie sich nicht auf einer Seite befinden, auf der er ausgeblendet ist (Mobilgerät, Warenkorb, Checkout), und leeren Sie den PrestaShop-Cache (Erweiterte Einstellungen > Leistung).
- **Eine Option ist bei einem Besucher verschwunden**: Sie wurde in der Konfiguration abgewählt, wodurch auch die gespeicherte Einstellung entfällt.
- **Einstellungen bleiben nicht erhalten**: Der Besucher surft vermutlich im privaten Modus oder sein Browser blockiert den `localStorage`; das Widget bleibt nutzbar, nur die Persistenz geht verloren.
- **Ein Bereich bleibt im Hochkontrast dunkel**: Ein Element ändert seinen Hintergrund später per Skript (etwa ein Sticky-Header, der beim Scrollen dunkler wird). Schalten Sie den Modus aus und wieder ein oder melden Sie den Fall mit der betroffenen URL an den Support.
- **Installation oder Update schlägt fehl**: Laden Sie die neueste ZIP-Version über das Modul hoch, ohne zu deinstallieren. Versionen vor 1.2.1 konnten mit „Undefined array key DFACCESS_WIDGET_OPTIONS" fehlschlagen.
- **Keine Statistiken kommen an**: Prüfen Sie, ob die Erfassung aktiviert ist und keine Firewall Anfragen an den `track`-Controller des Moduls filtert. Die Zähler kommen gebündelt, eventuell mit einigen Minuten Verzögerung.

## Deinstallation

Die Deinstallation entfernt die Statistiktabelle und die Konfigurationsschlüssel. Die CMS-Seite mit der Erklärung zur Barrierefreiheit bleibt absichtlich erhalten (sie bleibt eine gesetzliche Pflicht): Löschen Sie sie bei Bedarf manuell unter **Design > Seiten**.