Barrierefreiheit Toolbar & Widget | Barrierefreiheit-Assistent

Über die Erweiterung

Barrierefreiheit, die deine Kunden wirklich benutzen — für 4,08 € im Monat.

Die Barrierefreiheit Toolbar gibt jedem Besucher einen Barrierefreiheit-Assistenten an die Hand: Kontraste, Farben, Schriftgrößen und Leseführung stellt sich jeder selbst ein — ohne dass sich dein Design für alle anderen ändert.

→ 14 Komfort-Funktionen — Kontrast erhöhen, Farben invertieren, Monochrom, Sättigung, Schrift, Leseführung, großer Cursor
→ 100 % lokal — kein externer Server, kein Tracking, keine Datenweitergabe
→ 44 Einstellungen — davon 13 Farbfelder, damit die Toolbar aussieht wie dein Shop
→ Vom ersten Klick bis zum Checkout — die Toolbar bleibt auf jeder Seite erreichbar
→ Entwicklermodus — findet fehlende Alt-Attribute, Labels, lang-Attribut und schwache Kontraste
→ Selbst barrierefrei gebaut — echte Buttons, ARIA-Rollen, per Tastatur bedienbar

Für Shopware 6.5 bis 6.7, Cloud und selbst gehostet — läuft mit jedem Theme, ganz ohne Code.

→ Jetzt testen — der erste Monat ist kostenlos, monatlich kündbar.

Was deine Besucher einstellen

Jeder Mensch sieht anders. Die Toolbar lässt deine Besucher entscheiden, statt ihnen eine Einstellung vorzuschreiben:

Sehen und Kontrast
Kontrast erhöhen wahlweise auf WCAG-Stufe AA oder AAA, Farben invertieren, Monochrom-Modus, Sättigung hoch oder niedrig. Einzelne Bereiche lassen sich per CSS-Klasse vom Hochkontrast ausnehmen — dein Logo bleibt dein Logo.

Der Hochkontrast rät dabei nicht: Die Toolbar misst die Luminanz von Hintergrund und Text, rechnet gegen die WCAG-Schwellen (4,5:1 für AA, 7:1 für AAA) und erkennt auch Elemente mit Farbverläufen. Wo die gewünschte Stufe rechnerisch nicht erreichbar ist, sichert sie mindestens AA, statt einen Wert zu behaupten.

Lesen
Text vergrößern, lesefreundliche Schrift, Links deutlich unterstreichen, Überschriften hervorheben, Leseführung und Reading Guide für die Zeile, in der gerade gelesen wird.

Ruhe und Orientierung
Animationen ausblenden, Bilder ausblenden, großer Cursor. Dazu ein Reset-Button, der alles mit einem Klick zurücksetzt — ohne Reload.

Problem melden
Ein optionaler Button führt deine Besucher auf eine frei wählbare URL — dein Kontaktformular, eine eigene Seite, was du willst. Wer eine Barriere findet, kann sie dir sagen: Du erfährst von Problemen aus erster Hand, statt sie zu suchen.

Datenschutz: es verlässt nichts deinen Shop

Viele kommerzielle Barrierefreiheits-Overlays kosten mehrere hundert Euro im Jahr und laden ihr Skript von fremden Servern — jeder Besucher deines Shops wird damit zum Datenpunkt eines Dritten.

Diese Toolbar macht das Gegenteil. Sie ist reines JavaScript in deinem Shop: kein externer Server, keine API, kein Drittanbieter, kein Tracking. Sie bringt keine einzige Fremdbibliothek mit — die gesamte Logik steckt in einer JavaScript-Datei, die auf der Shopware-eigenen Plugin-Basis aufsetzt. Die Einstellungen deiner Besucher bleiben in deren Browser und gelten beim nächsten Besuch wieder.

Du entscheidest, ob das Speichern sofort passiert oder erst nach Cookie-Einwilligung — die Toolbar fügt sich in die Cookie-Consent-Gruppen deines Shops ein, statt sie zu umgehen.

Was du einstellst

Position
Über dem Header, im Header, schwebend links oder rechts, oder als dezenter Action-Button im Icon-Bereich. Fünf Positionen, damit die Toolbar in dein Layout passt statt es zu sprengen.

Aussehen
13 einzelne Farbfelder — Container, Titelzeile, Buttons, Icons, Schließen-Button, Initial-Button und der Melde-Button lassen sich getrennt einfärben. Dazu vier Icon-Varianten, Rundung, getrennte Höhen für Desktop und Mobil, Layer-Reihenfolge (z-index) und zwei Darstellungen: kompakt mit Text oder groß mit reinen Icons.

Funktionsumfang
Jede der 14 Funktionen ist einzeln abschaltbar. Was dein Shop nicht braucht, taucht in der Toolbar nicht auf. Alles pro Verkaufskanal steuerbar — 44 Einstellungen in vier aufgeräumten Abschnitten, mit Hilfetext an jeder Option.

Sprache
Alle Texte der Toolbar kommen aus Textbausteinen — Deutsch, britisches und amerikanisches Englisch sind fertig dabei. Jede weitere Sprache ergänzt du im Admin, ohne eine Datei anzufassen.

Selbst barrierefrei — nicht nur dem Namen nach

Es ist die naheliegendste Frage, die am seltensten gestellt wird: Ist das Barrierefreiheits-Werkzeug selbst barrierefrei? Bei vielen Overlays lautet die Antwort nein — sie bauen ihre Schalter aus klickbaren Grafiken, die eine Tastatur nie erreicht.

Diese Toolbar ist aus echten Button-Elementen gebaut. Damit funktioniert die Tastaturbedienung so, wie ein Browser sie ohnehin mitbringt: mit Tab hin, mit Enter oder Leertaste schalten. Dazu kommt saubere Semantik — die Toolbar meldet sich als eigener Bereich mit Namen an, jeder Schalter trägt die Rolle switch und sagt per aria-checked an, ob er gerade aktiv ist. Der Öffnen-Button meldet über aria-expanded, ob die Toolbar offen ist, und die rein dekorativen Icons sind für Screenreader ausgeblendet, statt sie zuzutexten.

Der Zustand bleibt dabei synchron: Schaltet ein Besucher eine Funktion um, wandert die Änderung mit in die ARIA-Attribute — kein Schalter, der optisch an und für die Vorlesesoftware aus ist.

Entwicklermodus: Barrieren finden statt raten

Häng ?dev=1 an deine Shop-URL und die Seite markiert ihre eigenen Schwachstellen — sichtbar nur für dich, nicht für deine Kunden:

• fehlende Alt-Attribute an Bildern
• Formularfelder ohne Label
• fehlendes lang-Attribut der Seite
• schwacher Farbkontrast, mit gemessenem Wert
• zu kleine Schriftgrößen
• leere Links
• fehlender Skip-Link

Das ist der Teil, der deinen Shop tatsächlich barrierefreier macht — die Toolbar hilft deinen Besuchern, der Entwicklermodus hilft dir.

→ Teste die Toolbar einen Monat kostenlos — voller Funktionsumfang, alle Updates und Support inklusive, monatlich kündbar.

Was die Toolbar ist — und was nicht

Barrierefreiheit wird viel versprochen. Deshalb hier ehrlich, was du bekommst:

Sie ist ein Komfort-Werkzeug für deine Besucher, ein Prüf-Werkzeug für dich und ein sichtbares Zeichen, dass du das Thema ernst nimmst. Sie greift deinen Shop nicht an, sondern legt sich darüber.

Sie ist kein Ersatz für echte Barrierefreiheit. Kein Overlay der Welt macht einen Shop WCAG- oder BFSG-konform — auch dieses nicht. Sie ersetzt keinen Screenreader, schreibt dein HTML nicht um und repariert keine kaputte Seitenstruktur. Wer dir etwas anderes verspricht, verkauft dir ein Risiko.

Das BFSG verlangt seit dem 28. Juni 2025 keine Perfektion, sondern dass du Barrieren erkennst und abbaust. Genau dafür ist die Toolbar gebaut: Komfort für die, die ihn brauchen — und ein Entwicklermodus, der dir zeigt, wo du selbst ran musst.

Für den Rest bekommst du von uns etwas dazu, das nichts kostet: das Barrierefreiheits-Quick-Start-Toolkit mit WCAG-Checkliste, priorisierten Prüfpunkten und einer Muster-Barrierefreiheitserklärung — der Fahrplan für die Punkte, die kein Overlay für dich erledigt.

Zum Quick-Start-Toolkit — direkt verfügbar, ohne Formular und ohne Anmeldung.

Häufig gesucht — auf einen Blick

Barrierefreiheit: Barrierefreiheit Toolbar, barrierefrei, Barriere, Accessibility, Barrierefreiheit Widget, Barrierefreiheit Assistent, Accessibility Toolbar, Accessibility Widget
Recht: BFSG, Barrierefreiheitsstärkungsgesetz, EAA, European Accessibility Act, WCAG 2.1, WCAG 2.2, Level AA, Level AAA, Barrierefreiheitserklärung (Muster im kostenlosen Toolkit), BITV
Funktionen: Kontrast erhöhen, Hochkontrast, Farben invertieren, Monochrom, Sättigung, Text vergrößern, Schriftgröße, lesefreundliche Fonts, Leseführung, Reading Guide, großer Cursor, Animationen aus, Links unterstreichen, Bilder ausblenden, Reset
Prüfen: Alt Text prüfen, fehlende Labels, lang Attribut, Farbkontrast messen, Skip Link, leere Links, Accessibility Check im Shop
Semantik: ARIA, aria-label, aria-checked, aria-expanded, role switch, Tastatur-Navigation, Fokus, Screenreader-freundliche Auszeichnung
Datenschutz: DSGVO, lokal, kein Tracking, keine externen Server, Cookie Consent Gruppe
Nicht enthalten: Screenreader (die Toolbar ersetzt keinen), Vorlesefunktion, Gebärdensprache, Leichte Sprache, automatische Bildbeschreibung, Übersetzung, Seiten-Zoom (macht dein Browser)
Betrieb: Shopware 6.5, 6.6, 6.7, Cloud, selbst gehostet, App ohne App-Server, pro Verkaufskanal, mehrsprachig, ESI, HTTP-Cache, Textbausteine

Läuft mit jedem Theme

Die Toolbar ist theme-unabhängig — sie legt sich über deinen Shop, statt sich in ihn einzubauen. Sie funktioniert mit dem Shopware-Standard-Theme, mit ThemeWare® und mit Themes und Shop-Setups von moori, PremSoft, Zenit Design, FROSH, neofire, Nimbits, Codegiganten, 8mylez, Biloba, Codiverse, solution25, BOGX, neonlines, NETZperfekt, BrandCrock, digitvision, Stageware, Morayne und clover4.

Auch dann, wenn andere Erweiterungen mitreden. Die Toolbar hängt nicht am Footer, sondern rendert im Seitenkörper — sie bleibt deshalb sichtbar, selbst wenn ein anderes Plugin den Footer durch einen eigenen ersetzt. Genau das passiert im Checkout unseres Erweiterten Checkouts, wo der Barrierefreiheits-Button trotz Minimal-Footer erhalten bleibt. ESI-Header- und ESI-Footer-Blöcke sind eingebunden, der Betrieb hinter dem HTTP-Cache also vorgesehen. Und bei aktiviertem Browser-Zoom wird die Toolbar scrollbar, statt abgeschnitten zu werden.

Entwickelt von TC-Innovations — zertifizierter Shopware Premium Extension Partner seit 2016.