Ein Barrierefreiheits-Widget als REDAXO-AddOn. Aux zeigt einen schwebenden Button auf deiner Website, der Besuchern zahlreiche Barrierefreiheits-Optionen bietet.
Aux ersetzt keine echte Barrierefreiheit.
Ein zugängliches Web entsteht durch saubere semantische HTML-Struktur, ausreichende Farbkontraste, sinnvolle Alt-Texte, korrekte ARIA-Attribute und eine durchdachte Tastaturnavigation – kurz: durch barrierefreie Entwicklung von Grund auf.
Aux ist ein ergänzendes Hilfsmittel für Nutzer, die auf einer Website individuelle Anpassungen benötigen (z. B. größere Schrift, höherer Kontrast, Dyslexie-Schrift). Es verbessert die Benutzbarkeit für bestimmte Zielgruppen – es macht eine Seite aber nicht automatisch WCAG-konform oder BFSG-compliant.
Die Optionen arbeiten nach dem Best-Effort-Prinzip: CSS-Klassen werden auf
<html>gesetzt und greifen in den meisten Fällen zuverlässig. Auf Seiten mit sehr spezifischen Styles können einzelne Anpassungen eingeschränkt wirken.Aux ist kein Ersatz für einen Accessibility-Audit.
Vorkonfigurierte Presets mit einem Klick aktivieren:
- Sehbehinderung – Hoher Kontrast, Textvergrösserung, grosser Cursor
- Dyslexie – OpenDyslexic Schrift, erhöhter Zeilen-/Buchstabenabstand
- ADHS – Lese-Lineal, Animationen stoppen, Focus-Hervorhebung
- Motorische Einschränkung – Grosser Cursor, Focus-Hervorhebung
- Kognitive Einschränkung – Textvergrösserung, Links/Überschriften hervorheben
- Epilepsie – Animationen und Blinken stoppen
- Kontrastmodi (Dunkel, Hell, Hoher Kontrast, Invertiert)
- Textgrösse (3 Stufen)
- Zeilenabstand (3 Stufen)
- Buchstabenabstand (3 Stufen)
- Textausrichtung (Links / Zentriert / Rechts)
- Textleser (Vorlesen via Web Speech API)
- Links hervorheben
- Überschriften-Hierarchie sichtbar machen
- Lese-Lineal (folgt der Maus)
- Dyslexie-Schrift (OpenDyslexic)
- Focus-Hervorhebung
- Cursor vergrössern
- Animationen und Videos stoppen
- Bilder ausblenden
- Widget-Position im Frontend umschalten (Links / Rechts / Ausblenden)
- Einstellungen werden in localStorage gespeichert (bleiben beim nächsten Besuch erhalten)
- DSGVO-konform: Keine Cookies, kein Tracking
- Leichtgewichtig: Reines Vanilla JS + CSS, kein Framework
- Automatische Injection via REDAXO Extension Point (kein Template-Code nötig)
- Vollständig per Tastatur bedienbar
- Responsive: Passt sich auf Mobilgeräten an
- Mehrsprachig: Deutsch und Englisch
- Im Backend unter Installer nach aux suchen
- Herunterladen und installieren
- Unter AddOns aktivieren
- Repository herunterladen/klonen
- Ordner nach
redaxo/src/addons/aux/kopieren - Im Backend unter AddOns installieren und aktivieren
Im Backend unter AddOns > Aux > Einstellungen:
| Option | Beschreibung | Standard |
|---|---|---|
| Widget aktiv | Widget im Frontend anzeigen | Ja |
| Button-Position | Position des Floating Buttons | Unten rechts |
| Button-Farbe | Farbe des Floating Buttons | #1a73e8 |
Wenn du das Widget im Frontend ausgeblendet hast, kannst du es jederzeit wieder einblenden:
- Windows/Linux:
Strg + Alt + A - Mac:
⌘ + ⌥ + A
Das AddOn nutzt den REDAXO Extension Point OUTPUT_FILTER, um das Widget automatisch vor dem </body>-Tag einzufügen. Es ist kein manueller Template-Code erforderlich.
MIT License – siehe LICENSE
OpenDyslexic Font: SIL Open Font License 1.1
Michelle Falke
- OpenDyslexic – Dyslexie-freundliche Schrift von Abbie Gonzalez
- REDAXO CMS – Content Management System
- FriendsOfREDAXO – REDAXO Community