Dokumentation
Erfahren Sie, wie Sie das BarrierFree Widget auf Ihrer Website einbinden und konfigurieren.
Einführung
BarrierFree ist ein Barrierefreiheits-Widget, das Ihrer Website automatisch Funktionen zur besseren Zugänglichkeit hinzufügt. Mit nur einer Zeile Code können Sie Ihren Besuchern folgende Funktionen bieten:
- Schriftgröße und Buchstabenabstand anpassen
- Kontrast erhöhen und Graustufen aktivieren
- Dyslexie-freundliche Schriftart
- Links hervorheben und unterstreichen
- Zeilenlineal und Lesemaske
- Text vorlesen lassen
- Großer Mauszeiger
Installation
Die Installation ist denkbar einfach. Fügen Sie einfach den folgenden Code vor dem schließenden </body>-Tag Ihrer Website ein:
<script src="https://barrierfree.site/widget/widget.php?key=IHR_WIDGET_KEY" async></script>
Ersetzen Sie IHR_WIDGET_KEY durch Ihren persönlichen Widget-Schlüssel, den Sie im
Dashboard finden.
Tipp für WordPress-Nutzer
Sie können den Code im WordPress Customizer unter "Zusätzliches CSS/JS" einfügen oder ein Plugin wie "Insert Headers and Footers" verwenden.
Konfiguration
Im Dashboard können Sie das Widget nach Ihren Wünschen anpassen:
Position
Wählen Sie, wo der Widget-Button erscheinen soll: Unten rechts, Unten links, Mitte rechts oder Mitte links.
Farbe
Passen Sie die Farbe des Widgets an Ihr Corporate Design an. Wählen Sie aus vordefinierten Farben oder geben Sie einen eigenen HEX-Wert ein.
Größe
Bestimmen Sie die Größe des Widget-Buttons: Klein (50px), Mittel (60px) oder Groß (70px).
Funktionen
Aktivieren oder deaktivieren Sie einzelne Barrierefreiheits-Funktionen je nach Bedarf Ihrer Zielgruppe.
Funktionen im Detail
| Funktion | Beschreibung |
|---|---|
| Schriftgröße | Ermöglicht das Vergrößern oder Verkleinern der Textgröße (50% - 200%) |
| Buchstabenabstand | Erhöht den Abstand zwischen Buchstaben für bessere Lesbarkeit |
| Dyslexie-Schriftart | Aktiviert OpenDyslexic, eine speziell für Legasthenie entwickelte Schriftart |
| Hoher Kontrast | Erhöht den Kontrast zwischen Text und Hintergrund |
| Graustufen | Wandelt alle Farben in Graustufen um |
| Farben invertieren | Invertiert alle Farben der Seite |
| Links hervorheben | Hebt alle Links visuell hervor |
| Zeilenlineal | Zeigt ein horizontales Lineal, das der Maus folgt |
| Lesemaske | Dunkelt Bereiche außerhalb der aktuellen Zeile ab |
| Großer Mauszeiger | Vergrößert den Mauszeiger für bessere Sichtbarkeit |
| Seite vorlesen | Liest den gesamten Seiteninhalt vor |
| Auswahl vorlesen | Liest markierten Text vor |
Erweiterte Anpassung
Das Widget passt sich automatisch an die Gestaltung Ihrer Website an. Falls Sie zusätzliche CSS-Anpassungen vornehmen möchten, können Sie die folgenden CSS-Klassen überschreiben:
/* Widget-Button */
.accessibility-toggle {
/* Ihre Anpassungen */
}
/* Widget-Panel */
.accessibility-tools {
/* Ihre Anpassungen */
}
/* Aktive Buttons */
.accessibility-button.bf-active {
/* Ihre Anpassungen */
}Hinweis
Verwenden Sie !important um sicherzustellen, dass Ihre Anpassungen die Standard-Styles überschreiben.
Häufige Fragen (FAQ)
Das Widget wird nicht angezeigt. Was kann ich tun?
- Überprüfen Sie, ob der Widget-Schlüssel korrekt ist
- Stellen Sie sicher, dass Ihr Abo aktiv ist
- Prüfen Sie die Browser-Konsole auf JavaScript-Fehler
- Kontrollieren Sie, ob andere Skripte das Widget blockieren