Barrierefreiheits-Panel
Erfüllen Sie die Bedürfnisse
jedes Besuchers Ihrer Website
Was über Compliance hinausgeht: 32 Werkzeuge und 8 Profile, mit denen Besucher die Seite selbst anpassen. Auf einer bereits korrigierten Seite — nicht statt der Korrektur.
7 Tage kostenlos, keine Kreditkarte erforderlich
So funktioniert es
Drei Schritte von der Installation zum Ergebnis
Skript auf der Seite installieren
Eine Zeile Code vor dem schließenden body-Tag — und das Panel arbeitet. Über das WordPress-Plugin, den Shopify-Theme-Editor, den Google Tag Manager oder manuell. Ihr bestehendes HTML bleibt unverändert.
<!DOCTYPE html>
<html lang="uk">
<head>...</head>
<body>
...
<!-- Eine Zeile — und das Panel läuft -->
<script
src="https://cdn.inclusiveweb.net/widget.js"
data-id="YOUR_ID"
async></script>
</body>
</html>Besucher öffnet das Panel
Auf der Seite erscheint eine schwebende Barrierefreiheits-Schaltfläche. Ein Klick — und ein Panel mit 8 Profilen und 32 Werkzeugen öffnet sich.
Barrierefreiheits-Panel
Seite passt sich sofort an
Der Besucher wählt Einstellungen — Schrift, Kontrast, Lesemaske. Die Seite passt sich sofort an, ohne Neuladen.
Kostenlos testenGrößere Schrift, hervorgehobene Überschriften und Links. Lesemaske und Kontrast nach Ihren Bedürfnissen. mehr erfahren
Drei Schichten, nicht drei Produkte
Audit findet Fehler. Autofix behebt sie. Panel geht weiter — jeder Besucher erhält persönliche Einstellungen auf einer bereits zugänglichen Seite.
Schicht 1 — Audit
Probleme finden
Scannt die Seite anhand von 90+ WCAG-2.1/2.2-Regeln und zeigt die gefundenen Accessibility-Probleme. Das ist die Diagnose: Sie sehen genau, was den Standard bricht.
Schicht 2 — Autofix
Korrigieren ohne Code-Eingriff
Wendet die vom Audit gefundenen Korrekturen an — Alt-Texte, ARIA, Kontrast, Überschriften. Sie geben jede Gruppe vor der Aktivierung frei.
Schicht 3 — Panel
Über Compliance hinaus
Technische WCAG-Konformität ≠ Komfort für alle. Ältere Nutzer brauchen größere Schrift, Menschen mit Legasthenie Lexend Deca, bei Migräne Monochrom. Panel gibt jedem Besucher persönliche Einstellungen auf einer bereits zugänglichen Seite.
Boden und Decke
Compliance ist der Boden — was die Seite haben muss, um nicht gegen das Gesetz zu verstoßen. Inclusion ist die Decke — wie jeder Besucher die Seite wirklich nutzt. Audit und Autofix bauen den Boden. Panel hebt die Decke.
WCAG 2.2 AA + EAA 2025 fordern barrierefreie Inhalte. Audit und Autofix decken den technischen Teil dieser Anforderungen ab — mit Korrekturen über der Seite, ohne Ihren Code zu ändern.
Echte Barrierefreiheit = Nutzer wählen Schrift, Kontrast, Tempo selbst. Panel macht das — auf einer bereits korrigierten Seite, nicht statt der Korrektur.
Was das Panel nach WCAG abdeckt — und was nicht
Kriteriennummern und ein ehrliches "Nein", wo das Panel nicht hilft.
1.4.2 Audio-Steuerung
Schaltet Video und Audio stumm, auch YouTube- und Vimeo-Embeds.
2.2.2 Pausieren, Stoppen, Ausblenden
Stoppt CSS- und JS-Animationen, Autoplay-Videos, animierte GIFs.
1.4.1 Verwendung von Farbe
Unterstreicht alle Links, auch in Buttons und Menüs – W3C-Technik G182. Farbcodierung in Diagrammen und Statusanzeigen wird nicht korrigiert.
2.4.1 Blöcke umgehen
Der Modus „Tastaturzugang“ fügt einen echten Link „Zum Hauptinhalt springen“ als erstes in der Tab-Reihenfolge ein. Der Navigator über Überschriften und Bereiche bleibt ein zweiter Weg.
1.4.4 Textgröße ändern
Schrift bis 250 %, Seitenzoom bis 300 % — W3C-Technik G178.
2.5.8 Zielgröße (Minimum)
Buttons, Links und Felder erhalten mindestens 24×24 CSS-Pixel. Ein Kriterium aus WCAG 2.2.
1.4.3 Kontrast
Misst jedes Text-Hintergrund-Paar und repariert alle unter 4,5:1. Deaktiviert, wenn Sie selbst eine Textfarbe gewählt haben.
2.4.11 Fokus nicht verdeckt (Minimum)
Derselbe Modus: Scroll-Abstand für den Panel-Button und ein Nachscrollen, wenn das fokussierte Element unter der fixierten Kopfzeile der Website oder unserem Button landet. Ein WCAG-2.2-Kriterium.
2.3.3 Animation aus Interaktionen
Pausiert CSS-Animationen, CSS-Übergänge und Web Animations.
2.3.2 Drei Blitze
Stoppt Animationen vollständig — ohne Ausnahme für kleine Flächen — und blendet Videos und GIFs aus.
2.4.13 Fokusdarstellung
Stufe „stark“: durchgehende 4-px-Kontur mit weißer Haarlinie — 3:1 Kontrast auf hellem wie dunklem Grund.
1.4.8 Visuelle Darstellung
Modus „Lesbarer Text“: Zeilen mit höchstens 80 Zeichen, Zeilenhöhe ab 1,5, Absatzabstand 1,5× davon, kein Blocksatz. Text-, Überschriften- und Hintergrundfarbe wählt der Besucher.
1.4.6 Kontrast (erhöht)
Modus „Erhöhter Kontrast“: misst jedes Text-Hintergrund-Paar und korrigiert es auf 7:1 (4,5:1 bei großem Text).
Gilt nur, solange Besucher das jeweilige Werkzeug eingeschaltet haben, innerhalb ihrer Sitzung — die Website selbst wird dadurch nicht konform.
2.4.7 Fokus sichtbar
Ein Rahmen um das fokussierte Element, in drei Stärken.
1.4.12 Textabstand
Zeilenabstand ab 1,5, dazu Zeichen-, Wort- und Absatzabstand.
2.3.1 Blitzeffekte
Das Profil „Epilepsie" stoppt das Flackern.
2.4.5 Verschiedene Methoden
Der Navigator über Überschriften, Links und Bereiche ist ein zweiter Weg, Inhalte zu finden. Eigene Wege der Website (Suche, Sitemap) bleiben ihre Aufgabe.
3.2.6 Konsistente Hilfe
Das Feedback-Formular sitzt auf jeder Seite an derselben Stelle im Panel. Gilt nur, solange das Widget auf allen Seiten der Website angezeigt wird.
4.1.2 Name, Rolle, Wert
Der Modus „Namen für Screenreader“: der title des Autors oder der Titel eines SVG-Symbols wird in aria-label übertragen, wo das Element keinen anderen Namen hat. Rollen, Zustände und erfundene Namen – nein.
3.3.2 Beschriftungen oder Anweisungen
Derselbe Modus: ein Feld, das nur einen Platzhalter hat, erhält ihn als aria-label. Echte Beschriftungen, Anweisungen und Eingabeformate bleiben Aufgabe der Website.
Wirkt in der Besuchersitzung — die Website selbst wird dadurch nicht konform.
Alt-Texte sind ein eigenes Produkt, KI-Alt-Text (Beta), kein Teil des Panels. Über KI-Alt-Text →
Nichts davon zählt auf ein Kriterium ein. Das ist die Decke: ein Bedarf, den der Standard nicht beschreibt.
Ehrlich zu den Grenzen
Das Panel erreicht weder Bild-für-Bild-JS-Animation noch Frames anderer Herkunft. Und vor allem: Konformität ist eine Eigenschaft der Seite, die Sie allen ausliefern — kein Widget macht eine Website für sich genommen konform.
32 Anpassungs-Werkzeuge + 8 Profile
4 Kategorien von Anpassungen sowie 8 vorgefertigte Profile für die häufigsten Bedürfnisse: Sehschwäche, Legasthenie, Farbenblindheit, ADHS, Epilepsie, kognitive Besonderheiten, Motorik, Augenermüdung.
Vollständige Werkzeugliste mit BeschreibungenKategorie 01
Legasthenie, kognitive Einschränkungen, ältere Menschen
Schrift und Lesen
- Seitenzoom
- Schriftgröße
- Buchstabenabstand
- Wortabstand
- Zeilenabstand
- Absatzabstand
- Schrift für Legasthenie
- bionisches Lesen
- Überschriften hervorheben
- Links hervorheben
- Textausrichtung
- Sprachausgabe (TTS)
Kategorie 02
Visuelle Einstellungen
Farbenblindheit, Sehschwäche, Lichtempfindlichkeit
Kategorie 03
Werkzeuge und Navigation
Motorische Einschränkungen, Seitenorientierung
Kategorie 04
Sehkomfort
Epilepsie, ADHS, Konzentration
Anpassung und technische Spezifikationen
Das Panel passt sich vollständig an Ihre Marke an, und der Loader blockiert das Rendering der Seite nicht
Vollständig anpassbar an Ihre Marke
Das Panel passt sich komplett dem Design Ihrer Website an
Horizontaler und vertikaler Versatz in Pixeln — der Button sitzt genau dort, wo Sie ihn brauchen
5 Designstile, 4 Symboltypen
Perfekte Abstimmung auf Ihre Corporate Identity
Über 20 Sprachen inkl. automatischer Erkennung
Verwenden Sie Ihren eigenen Button auf der Seite statt des Standard-Buttons
Link zu Ihrer Barrierefreiheitserklärung
Fertige Einstellungen, falls Ihre Website einen Content-Security-Policy-Header sendet
Leichtgewichtig und schnell
Praktisch kein Einfluss auf die Ladegeschwindigkeit Ihrer Website
Über 20 Oberflächensprachen
Das Panel wird automatisch in der Sprache des Besuchers angezeigt
Ist das nicht auch nur ein Overlay?
Technisch ja — es ist ein Widget über der Seite. Der Unterschied liegt nicht darin, wie es funktioniert, sondern darin, was wir behaupten: Wir verkaufen es nicht als Ersatz für Korrekturen im Code und leiten daraus keine Konformität ab. Den Code korrigiert Autofix — als eigene Schicht, mit Ihrer Freigabe jeder Änderungsgruppe.
Erfüllt das Panel die Anforderungen von WCAG und des European Accessibility Act?
Teilweise. Die rechtliche Anforderung betrifft die Website selbst: barrierefreien Code und Inhalt. Das Panel gibt Besuchern Mechanismen, die der Standard in einzelnen Kriterien ausdrücklich verlangt — Steuerung automatisch startender Audio-Inhalte, Anhalten bewegter Inhalte, Wahl von Farben und Abständen. Untertitel, Formularlogik, Kontrast im Design und eigene Komponenten deckt es jedoch nicht ab. Audit zeigt genau, was nicht konform ist, Autofix automatisiert einen Teil der Korrekturen, den Rest erledigt Ihr Team.
Warum schreiben Sie nicht "WCAG-Konformität mit einem Klick"?
Weil es nicht stimmt und solche Aussagen bereits geahndet werden. Im April 2025 erließ die US-Handelsbehörde FTC eine Anordnung über 1 Mio. USD gegen einen Anbieter eines Overlay-Widgets wegen der Behauptung, sein Produkt mache Websites WCAG-konform. Wir schreiben stattdessen, welche Schicht was abdeckt, und liefern einen Bericht, den Sie einem Prüfer vorlegen können.
Beeinflusst das Panel die Ladegeschwindigkeit meiner Website?
Nein. Der Async-Loader ist nur ~25 KB groß (gzip) und blockiert das Laden der Seite nicht. Das Panel selbst (~117 KB gzip) wird erst beim Öffnen durch den Nutzer im iframe nachgeladen. Die Iframe-Isolation stellt sicher, dass die Panel-Styles nicht mit Ihrer Seite kollidieren.
Werden die Einstellungen der Besucher gespeichert?
Ja. Alle gewählten Einstellungen werden im Browser des Besuchers gespeichert (localStorage). Beim nächsten Besuch passt sich die Seite sofort an seine Bedürfnisse an.
Werden Mobilgeräte unterstützt?
Ja. Das Panel verfügt über ein responsives Interface, optimiert für Smartphones und Tablets. Alle Werkzeuge sind auf jedem Gerät verfügbar.
Kann ich auswählen, welche Werkzeuge angezeigt werden?
Ja. Im Dashboard können Sie jedes Werkzeug und Profil aktivieren oder deaktivieren. Änderungen werden ohne Codeanpassung auf Ihrer Website übernommen.
Wie installiere ich es auf WordPress oder Shopify?
Für WordPress — fügen Sie den Code im Footer über den Customizer oder ein Script-Einfüge-Plugin ein. Für Shopify — in theme.liquid vor '</body>' einfügen. Google Tag Manager wird ebenfalls unterstützt.
Machen Sie Ihre Website noch heute für alle zugänglich
7 Tage kostenlos. Installation in einer Minute.