Barrierefrei
Mach deine Website bereit für das am 28. Juni in Kraft tretende Barrierefreiheitsstärkungsgesetz (BFSG)!
Unser Script hilft dir, deine Webseite schnell und einfach barrierefrei zu gestalten.
✅ 1-Zeilen-Integration
✅ Kontrastanpassung für bessere Lesbarkeit bei Sehschwäche
✅ Textgröße individuell anpassbar
✅ Inhalte vorlesen lassen (Text-to-Speech)
✅ Für jede Website & Branche geeignet
Erweitere deine Reichweite und zeige Inklusion!
Eine barrierefreie Website ist für jeden zugänglich und erhöht die Nutzerfreundlichkeit.
Produktdetails
Mach deine Website für alle zugänglich und setze ein Zeichen für Inklusion. Mit unserem A11y Accessibility Widget gibst du deinen Besuchern die Werkzeuge an die Hand, um deine Inhalte so zu erleben, wie sie es benötigen. Barrierefreiheit ist kein optionales Feature mehr, sondern ein Standard für moderne Webprojekte.
Individuelle Anpassung für deine Besucher
Jeder Mensch ist unterschiedlich. Dein neues Widget ermöglicht es Nutzern, die Darstellung deiner Seite in Echtzeit zu verändern. Ob Kontrasterhöhung für bessere Lesbarkeit, ein spezieller Modus für Farbenblindheit oder die Anpassung der Schriftgröße – deine Besucher entscheiden selbst, was für sie am besten funktioniert. Besonders hilfreich: Die integrierte Dyslexie-Schrift unterstützt Menschen mit Leseschwäche gezielt beim Erfassen deiner Texte.
Interaktive Lesehilfen
Biete echten Mehrwert mit intelligenten Assistenzfunktionen. Das Widget enthält ein Leselineal, das die Konzentration auf die aktuelle Zeile erleichtert, sowie eine Vorlesefunktion (Text-to-Speech). Per Mausklick liest dein Webauftritt dem Nutzer die Inhalte vor – das steigert die Verweildauer und verbessert die Zugänglichkeit massiv.
Rechtliche Sicherheit & Standards
Barrierefreiheit wird zunehmend gesetzliche Pflicht (z. B. durch das Barrierefreiheitsstärkungsgesetz). Dein Widget unterstützt dich dabei, die Anforderungen der BITV und WCAG-Konformität zu erfüllen. Es sorgt dafür, dass deine Seite für Screenreader optimiert ist und alle Funktionen vollständig per Tastatur bedienbar bleiben. So schützt du dich vor rechtlichen Risiken und öffnest deine Seite für eine deutlich größere Zielgruppe.
Zentrale Steuerung im Kundenportal
Wie alle unsere Lösungen verwaltest du das Widget bequem über dein Kundenportal. Du entscheidest, welche Funktionen aktiv sind und wie das Widget auf deiner Seite erscheint. Da das Skript dynamisch geladen wird, musst du bei Einstellungsänderungen nicht in den Code deiner Website eingreifen.
Technische Details
Unser A11y Accessibility Widget bietet eine nahtlose Integration ohne die Geschwindigkeit deiner Seite zu beeinträchtigen.
- State-Persistence via LocalStorage: Das Widget merkt sich die gewählten Einstellungen deiner Nutzer. Wenn ein Besucher die Seite neu lädt oder später zurückkehrt, bleiben Kontrast, Schriftgröße und alle anderen gewählten Modi dank
localStorageautomatisch aktiv. - Native Text-to-Speech Integration: Die Vorlesefunktion nutzt die moderne
SpeechSynthesis APIdes Browsers. Das bedeutet für dich: Keine externen Serverkosten für Sprachpakete und eine extrem schnelle Reaktion ohne Verzögerung. - Vollständige Tastaturbedienbarkeit: Alle Steuerungselemente sind für die Navigation per Tab und Enter optimiert. Ein "Skip-Link" Fokus-Management stellt sicher, dass Nutzer mit motorischen Einschränkungen das Widget mühelos bedienen können.
- Smart Styles Injection: Das Widget injiziert benötigte CSS-Klassen für Kontrast- und Farbenblindmodi direkt in das Dokument. Dies geschieht hochperformant, sodass kein "Flackern" beim Seitenwechsel entsteht.
- Zero-Dependency Architektur: Es wird kein Framework wie jQuery benötigt. Das Widget besteht aus reinem, schlankem JavaScript (Vanilla JS), was die Kompatibilität mit allen modernen Browsern und CMS-Systemen garantiert.
- Animations-Stopp: Eine technische Besonderheit ist der Modus zur Deaktivierung von Animationen. Das Widget greift aktiv ein, um blinkende oder bewegte Elemente zu stoppen – ein wichtiger Schutz für Nutzer mit epileptischen Vorerkrankungen.
- Multilinguale Sprachausgabe: Das System erkennt die eingestellte Seitensprache und passt die Vorlesestimme (z.B. Deutsch oder Englisch) automatisch an, um eine korrekte Aussprache zu gewährleisten.
Mache Barrierefreiheit zum Teil deines Markenzeichens und verwalte alle Einstellungen zentral über unser Kundenportal.
Changelog & Versionen
Lese-Lineal (Reading Guide):
Ein interaktiver, horizontaler Fokus-Balken unterstützt Nutzer mit Leseschwäche oder Konzentrationsschwierigkeiten (ADHS).
Dyslexie-Modus:
Integration der OpenDyslexic-Schriftart zur Verbesserung der Lesbarkeit für Menschen mit Legasthenie.
Intelligentes Text-to-Speech (TTS):
Die Vorlesefunktion erkennt nun automatisch Hauptinhalte (
main, article) und überspringt Navigationsmenüs. Ein neuer Stopp-Button ermöglicht das sofortige Beenden der Sprachausgabe.
Technische Optimierungen & "Clean Code" Zero-Dependency Architektur:
Vollständige Entfernung externer CSS-Frameworks (Bootstrap). Alle Styles sind nun gekapselt im Shadow DOM enthalten. Dies verbessert die Ladezeit und die DSGVO-Konformität (kein externer CDN-Aufruf).
Zentrales Config-System:
Einführung eines globalen Konfigurationsobjekts. Käufer können Farben, Position (Links/Rechts), Z-Index und alle Texte (i18n) an einer zentralen Stelle anpassen.
Persistent Settings:
Wechsel von
sessionStorage zu localStorage. Benutzereinstellungen bleiben nun auch nach dem Schließen des Browsers erhalten.
DOM-Hygiene:
Dynamisch geladene Ressourcen (wie Google Fonts für den Dyslexie-Modus) werden beim Deaktivieren sauber aus dem DOM entfernt.
Bugfixes & Stabilität
Z-Index Fix:
Das Widget nutzt nun konsistent den maximalen Z-Index , um sicherzustellen, dass es niemals von anderen Page-Elementen überlagert wird.
Interaktions-Fix:
Das Lese-Lineal verwendet nun
pointer-events: none, sodass die Webseite trotz aktivem Lineal voll bedienbar bleibt.
Dynamic Positioning:
Korrektur der Layout-Logik für die Platzierung auf der rechten Bildschirmseite.
Die Positionierung unten links ist intuitiv, und das Panel bleibt nun stets sichtbar.
Shadow DOM:
Die Implementierung von Shadow DOM isoliert das Styling des Widgets von den Website-Styles, was Konflikte effektiv verhindert.
Grundlegende Anpassungen:
Wichtige Funktionen wie Kontrastmodus, Farbenblindmodus (Grayscale-Filter), Schriftgrößenanpassung und das Anhalten von Animationen wurden integriert.
Screenreader-Modus / Vorlesefunktion (TTS):
Die Integration von SpeechSynthesisUtterance für das Vorlesen der Seite und die Statusmeldung für den Screenreader-Modus ist nun verfügbar. Die Sprachauswahl wurde ebenfalls hinzugefügt.
Tastaturbedienbarkeit & Fokus-Trap:
Die Implementierung der Fokus-Trap und die allgemeine Tastaturbedienbarkeit sind nun besser gelöst und essenziell für die Barrierefreiheit.
State Management:
Die Nutzung von sessionStorage speichert die Einstellungen nutzerfreundlich, sodass gewählte Optionen über Seitenwechsel hinweg bestehen bleiben.
Reset-Funktion:
Ein "Alles zurücksetzen"-Button wurde hinzugefügt.
Ein-Zeilen-Integration:
Die einfache Integration, da es sich um ein selbstcontained JavaScript handelt.
"BITV/WCAG-konform":
Das Skript unterstütz die Erfüllung der BITV/WCAG-Kriterien (z.B. Kontrast, Textgröße, Tastaturbedienung). Es ist jedoch wichtig zu verstehen, dass kein einziges JavaScript-Widget eine Website allein vollständig BITV/WCAG-konform machen kann. Viele Aspekte (semantischer HTML-Aufbau, korrekte alt-Texte für Bilder, sinnvolle Überschriftenstrukturen, Fokus-Management bei dynamischen Inhalten, ARIA-Attribute für komplexe Widgets, Video-Untertitel etc.) müssen im Quellcode der Website selbst implementiert sein.
