Accessibility Toolbar & WCAG Helper (EAA / WCAG 2.1 AA). Accessibility Toolbar & WCAG Helper fügt Ihrem Shop ein selbst gehostetes Barrierefreiheits-Widget hinzu, wendet optionale, nicht-destruktive WCAG-2.1-AA-Verbesserungen an, erzeugt eine Erklärung zur Barrierefreiheit und enthält ein einfaches WCAG-Audit im Backoffice. Es hilft Ihnen, die Anforderungen des European Accessibility Act (EAA) zu erfüllen. Kein Drittanbieterdienst, keine Programmierung, keine Theme-Anpassungen.

Accessibility Toolbar & WCAG Helper fügt Ihrem Shop ein selbst gehostetes Barrierefreiheits-Widget hinzu, wendet optionale, nicht-destruktive WCAG-2.1-AA-Verbesserungen an, erzeugt eine Erklärung zur Barrierefreiheit und enthält ein einfaches WCAG-Audit im Backoffice. Es hilft Ihnen, die Anforderungen des European Accessibility Act (EAA) zu erfüllen. Kein Drittanbieterdienst, keine Programmierung, keine Theme-Anpassungen.

1. Installation

  1. Gehen Sie im Backoffice zu Module → Modulverwaltung → Modul hochladen und wählen Sie die ZIP-Datei des Moduls aus.
  2. Klicken Sie nach der Installation auf Konfigurieren, um den Einstellungsbildschirm zu öffnen.
Updates erfolgen automatisch. Updates sind inbegriffen. Entwicklungsdomains (.local, .test, localhost) sind immer zugelassen. Sobald eine neue Version verfügbar ist, wird dies direkt im Modul angezeigt.

2. Konfiguration: Schritt für Schritt

Der Konfigurationsbildschirm enthält drei Reiter, Einstellungen, Erklärung zur Barrierefreiheit und WCAG-Audit. Der Reiter Einstellungen ist in die folgenden Abschnitte unterteilt; jeder lässt sich unabhängig aktivieren.

Widget

Die Schaltfläche für Barrierefreiheit, die auf jeder Shop-Seite angezeigt wird. Aktivieren Sie sie und legen Sie ihr Aussehen fest.

  • Barrierefreiheits-Widget aktivieren: der Ein/Aus-Schalter für die Leiste im Front Office.
  • Position der Schaltfläche: Unten rechts, Unten links, Oben rechts, Oben links, Mitte rechts oder Mitte links.
  • Farbe der Schaltfläche: die Farbe der schwebenden Schaltfläche.
  • Symbol der Schaltfläche: Rollstuhl, Person, Auge oder Kontrast.
Widget
Widget: Barrierefreiheits-Schaltfläche aktivieren und gestalten

Werkzeuge

Legen Sie fest, welche Barrierefreiheits-Werkzeuge im Widget erscheinen. Jedes ist ein unabhängiger Ein/Aus-Schalter.

  • Textgröße: ermöglicht Besuchern, den Text zu vergrößern.
  • Textabstand: vergrößert den Abstand zwischen Buchstaben, Wörtern und Zeilen.
  • Lupe: vergrößert den Inhalt unter dem Mauszeiger.
  • Leserliche Schrift (Legasthenie): wechselt zu einer legasthenie-freundlichen Schriftart.
  • Hoher Kontrast: erhöht den Kontrast für sehbehinderte Nutzer.
  • Farben umkehren: kehrt die Farben der Seite um.
  • Graustufen: entfernt die Farbe von der Seite.
  • Links hervorheben: hebt Links deutlich hervor.
  • Überschriften hervorheben: hebt Überschriften deutlich hervor.
  • Großer Mauszeiger: zeigt einen größeren Mauszeiger an.
  • Animationen stoppen: pausiert Bewegungen und Animationen.
  • Lesehilfe: ein horizontales Lineal, das dem Mauszeiger folgt.
Tools
Werkzeuge: wählen Sie aus, welche Funktionen das Widget bietet

Automatische WCAG-Verbesserungen nicht-destruktiv

Optionale Korrekturen im Hintergrund, die die Barrierefreiheit verbessern, ohne Ihr Theme oder Ihre Inhalte zu verändern. Steuert außerdem die generierte Erklärung zur Barrierefreiheit.

  • Link „Zum Inhalt springen“: fügt oben auf der Seite einen Tastatur-Link „Zum Inhalt springen“ hinzu.
  • Robuste Fokus-Sichtbarkeit: macht den Tastaturfokus-Rahmen deutlich sichtbar.
  • Seitensprache / ARIA-Hinweise: fügt die Seitensprache und grundlegende ARIA-Hinweise hinzu.
  • Grundlegende Landmarks: fügt grundlegende Landmark-Rollen hinzu, um Screenreadern zu helfen.
  • Link zur Erklärung im Widget anzeigen: zeigt im Widget einen Link zu Ihrer Erklärung zur Barrierefreiheit an.
  • Kontakt-E-Mail für Feedback: die für Feedback zur Barrierefreiheit angezeigte Adresse. Leer lassen, um die Shop-E-Mail zu verwenden.

Nutzen Sie den Reiter Erklärung zur Barrierefreiheit, um die mehrsprachige Erklärung zu bearbeiten (Vorlage mit Verweis auf EAA, EN 301 549 und WCAG 2.1 AA; lassen Sie eine Sprache leer, um den lokalisierten Standardtext zu verwenden), und den Reiter WCAG-Audit, um das einfache Audit im Backoffice auszuführen.

Automatic WCAG improvements
Automatische WCAG-Verbesserungen: nicht-destruktive Korrekturen und Erklärung

3. Funktionsprüfung

  • Öffnen Sie Ihren Shop und klicken Sie auf die Barrierefreiheits-Schaltfläche, die Werkzeugleiste sollte sich öffnen.
  • Aktivieren Sie ein Werkzeug wie Textgröße oder Hoher Kontrast und prüfen Sie, ob sich die Seite ändert.
  • Öffnen Sie die generierte Seite Erklärung zur Barrierefreiheit (im Widget verlinkt, wenn aktiviert).
  • Öffnen Sie im Backoffice den Reiter WCAG-Audit und führen Sie das Audit aus, um den Bericht zu sehen.
Accessibility toolbar (front office)
Die Barrierefreiheits-Leiste, wie Ihre Besucher sie im Shop sehen

4. Häufig gestellte Fragen

Ist das Widget selbst gehostet?

Ja. Alle Skripte und Stile werden von Ihrem eigenen Shop ausgeliefert, kein Drittanbieterdienst und keine externen Aufrufe für die Werkzeugleiste.

Garantiert es die rechtliche Konformität?

Das kann kein Tool. Es hilft Ihnen, die Anforderungen von EAA und WCAG 2.1 AA zu erfüllen, aber die vollständige Konformität erfordert eine manuelle Prüfung. Das Backoffice-Audit ist ein Hilfsmittel, kein vollständiger Validator.

Wird mein Theme dadurch beschädigt?

Nein. Die automatischen WCAG-Verbesserungen sind nicht-destruktiv, sie fügen Hilfen zur Barrierefreiheit hinzu, ohne Ihre Inhalte oder Ihr Layout zu verändern.

Muss ich mein Theme anpassen?

Nein. Das Modul funktioniert über Standard-Hooks und ist mit jedem Theme kompatibel.

Loading...
Back to top