PS PrestaShop PrestaShop Anfänger

EAA Barrierefreiheit — Widget & WCAG-Korrekturen (dfaccessibility)

Installation, Konfiguration und Nutzung des EAA-Barrierefreiheit-Moduls: Widget, automatische WCAG-Korrekturen, rechtliche Erklärung und Statistiken.

Aktualisiert Modulversion 1.0.1

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 für Ihre Besucher, eine automatische WCAG-Korrektur-Engine, die bei jedem Seitenaufruf läuft, und einen mehrsprachigen Generator für die rechtliche Erklärung zur Barrierefreiheit.

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

Installation

  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 drei Hooks (displayHeader, actionFrontControllerSetMedia, displayBeforeBodyClosingTag) und erstellt eine einzige Statistiktabelle. Direkt nach der Installation ist das Widget im Frontoffice mit den Standardeinstellungen aktiv und alle automatischen Korrekturen sind eingeschaltet — mit Ausnahme der Kontrastkorrektur.

Konfiguration

Barrierefreiheits-Widget

  • Widget aktivieren — zeigt den schwebenden Button auf allen Frontoffice-Seiten an.
  • 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. Bereits gespeicherte Besuchereinstellungen bleiben wirksam.

Automatische Korrekturen

Jede Korrektur ist einzeln aktivierbar. Sie laufen im Browser des Besuchers beim Seitenaufruf: Ihre Theme-Dateien werden niemals verändert und eine Deinstallation stellt den Originalzustand identisch wieder her.

  • Fehlende Alt-Texte — siehe die detaillierten Heuristiken weiter unten.
  • Unbeschriftete Formularfelder — fügt ein aria-label aus dem Placeholder 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 — injiziert einen Link „Zum Hauptinhalt springen“, der beim ersten Tab-Druck erscheint.
  • Sichtbarer Fokusrahmen — erzwingt einen Rahmen beim Tastaturfokus (WCAG-Kriterium 2.4.7).
  • Automatische Kontrastkorrektur — standardmäßig deaktiviert, siehe den eigenen Abschnitt.

Statistiken

Bei aktivierter Erfassung sendet der Browser nach dem Anwenden der Korrekturen anonyme Zähler pro Korrekturtyp (via sendBeacon). 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:

  • Textgröße — 5 Stufen von 100% bis 135%.
  • Hoher Kontrast — intelligenter Modus, der einfarbige Hintergründe aufhellt und Bilder erhält (siehe unten).
  • Lesbare Schrift — wechselt auf einen Verdana/Arial-Stack.
  • Abstände vergrößern — Zeilenhöhe 1.8, größere Buchstaben- und Wortabstände (WCAG-Kriterium 1.4.12).
  • Links hervorheben — gelber Hintergrund und durchgehende Unterstreichung.
  • Großer Cursor — vergrößerter kontrastreicher Cursor.
  • Lesehilfe — horizontale Leiste, die der Maus folgt.
  • Animationen stoppen — neutralisiert CSS-Animationen und -Übergänge (WCAG-Kriterium 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 — kein visuelles Flackern, keine Daten an Ihre Server.

Der intelligente Hochkontrast

Anders als klassische Widgets, die allen Elementen einen weißen Hintergrund aufzwingen (und damit Slider und Banner verschwinden lassen), analysiert dieser Modus beim Aktivieren das DOM:

  • opake einfarbige Hintergründe werden aufgehellt;
  • Elemente mit einem Hintergrundbild bleiben erhalten: Ihre Texte erhalten eine halbtransparente weiße Platte, die die Lesbarkeit über dem Visual garantiert;
  • Texte werden schwarz, Links dunkelblau und unterstrichen, interaktive Bedienelemente erhalten einen 2px schwarzen Rahmen.

Das Deaktivieren entfernt alle angewendeten Stile und stellt das Theme identisch wieder her.

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. liegt das 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 (Bindestriche ersetzt, Ziffernfolgen entfernt), sofern das Ergebnis aussagekräftig ist.

Die automatische Korrektur ist ein Sicherheitsnetz. Schreiben Sie für Ihre wichtigen Produktbilder die Alt-Texte von Hand in Ihrem Katalog: Sie haben immer Vorrang, da das Modul bestehende alt-Attribute niemals anfasst.

Formulare (WCAG 1.3.1, 4.1.2)

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

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 hinzugefügt, wenn das Theme sie nicht deklariert, der Sprunglink wird ganz oben auf der Seite injiziert und der Fokusrahmen wird auf allen interaktiven Elementen via :focus-visible erzwungen.

Automatische Kontrastkorrektur (WCAG 1.4.3)

Die Engine durchläuft sichtbare Texte, berechnet die relative Luminanz des Texts und seines effektiven Hintergrunds und dunkelt Farben unterhalb des Verhältnisses 4,5 schrittweise ab oder hellt sie auf. Die Analyse ist auf 1500 Elemente begrenzt und läuft via requestIdleCallback in den Leerlaufzeiten des Browsers.

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

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 generieren: Eine CMS-Seite wird in jeder aktiven Sprache Ihres Shops erstellt (Vorlagen FR, EN, ES, DE, IT 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, der auf Ihr Kontaktformular verweist;
  • dem Durchsetzungsverfahren bei der zuständigen nationalen Behörde.

Der Link zur Erklärung erscheint automatisch am unteren Rand des Widget-Panels. Nach einem Modul-Update oder einer Umbenennung des Shops klicken Sie auf Erklärungsseite aktualisieren, um die bestehende Seite ohne URL-Änderung zu aktualisieren.

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 h1-h6-Überschriftenhierarchie in Ihren CMS-Inhalten und Produktseiten;
  • redaktionelle Qualität der Alt-Texte Ihrer wichtigsten Bilder;
  • Untertitelung Ihrer Videos;
  • Verständlichkeit Ihrer Button- und Linkbeschriftungen.

Kein automatisches Werkzeug macht eine Website „100% konform“. Das Modul liefert Ihnen 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 ist, ob der Hook displayBeforeBodyClosingTag nicht von Ihrem Theme deaktiviert wurde, und leeren Sie den PrestaShop-Cache (Erweiterte Einstellungen > Leistung).
  • 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.
  • Der Hochkontrast lässt einen inkonsistenten Bereich zurück — einige nach dem Laden dynamisch injizierte Elemente (Dritt-Widgets) entgehen dem Analysedurchlauf. Schalten Sie den Modus aus und wieder ein oder melden Sie den Fall mit der betroffenen URL an den Support.
  • Keine Statistiken kommen an — prüfen Sie, ob die Erfassung aktiviert ist und ob kein serverseitiger Blocker Anfragen an den track-Controller des Moduls filtert.

Deinstallation

Die Deinstallation entfernt die Statistiktabelle und die Konfigurationsschlüssel. Die CMS-Seite mit der Barrierefreiheitserklärung bleibt absichtlich erhalten (sie bleibt eine gesetzliche Pflicht): Löschen Sie sie manuell, wenn Sie sie nicht behalten möchten.

War diese Seite hilfreich?

Immer noch nicht weiter? Support kontaktieren