Installation

Dateien hochladen

Entpacke den Ordner „barrierefrei“ aus der Zip-Datei in das Rootverzeichnis deiner Webseite.

Einbindung im HTML

Standard-Einbindung

Binde Barrieren-Brecher Bary mit folgendem HTML-Code im Footer ein:

<script type="text/javascript" defer="defer">
function bfJSLoad(){
    var t=document.createElement("script");
    t.src="/barrierefrei/barrierefrei.js",
    document.body.appendChild(t)
}
window.addEventListener?window.addEventListener("load",bfJSLoad,!1):window.attachEvent?window.attachEvent("onload",bfJSLoad):window.onload=bfJSLoad;
</script>

Gzip-komprimierte Variante (empfohlen für bessere Ladezeiten)

Für die gzip-komprimierte Variante auf gzip-unterstützenden Servern verwende stattdessen diesen Code:

<script type="text/javascript" defer="defer">
function bfJSLoad(){
    var t=document.createElement("script");
    t.src="/barrierefrei/barrierefrei.js.gz",
    document.body.appendChild(t)
}
window.addEventListener?window.addEventListener("load",bfJSLoad,!1):window.attachEvent?window.attachEvent("onload",bfJSLoad):window.onload=bfJSLoad;
</script>

Gzip-Unterstützung konfigurieren (optional)

Damit gzip unterstützt wird, füge diese Konfiguration zur .htaccess-Datei hinzu:

<IfModule mod_mime.c>
    AddType application/javascript .js
    AddType application/javascript .js.gz
    AddType text/css .css
    AddType text/css .css.gz
</IfModule>

<IfModule mod_headers.c>
<FilesMatch "\.js\.gz$">
        Header set Content-Encoding gzip
        Header set Content-Type "application/javascript"
</FilesMatch>
<FilesMatch "\.css\.gz$">
        Header set Content-Encoding gzip
        Header set Content-Type "text/css"
</FilesMatch>
</IfModule>

Alternative Einbindung (vereinfacht)

Du kannst das Tool auch mit diesem vereinfachten Code einbinden:

var t = document.createElement("script");
t.src = "/barrierefrei/barrierefrei.js.gz";
document.body.appendChild(t);

Überprüfung

Nach der Einbindung sollte auf deiner Webseite bereits unten links der Button für das Overlay angezeigt werden. Falls der Button nicht erscheint:

  1. Leere den Browser-Cache
  2. Überprüfe, ob der Pfad zum barrierefrei-Ordner korrekt ist
  3. Kontrolliere die Browser-Konsole auf JavaScript-Fehler

Fehlerbehebung

Button erscheint nicht

  • Stelle sicher, dass der Pfad „/barrierefrei/barrierefrei.js“ korrekt ist
  • Überprüfe, ob alle Dateien vollständig hochgeladen wurden
  • Kontrolliere die Dateiberechtigungen auf dem Server

JavaScript-Fehler

  • Achte darauf, dass das Script nach dem vollständigen Laden der Seite ausgeführt wird
  • Vermeide Konflikte mit anderen JavaScript-Bibliotheken
  • Überprüfe die Konfigurationsdatei auf Syntaxfehler

Gzip funktioniert nicht

  • Server muss Gzip-Komprimierung unterstützen
  • .htaccess-Datei muss korrekt konfiguriert sein
  • Verwende in diesem Fall die normale barrierefrei.js ohne .gz-Endung

Nächste Schritte

Nach der erfolgreichen Installation kannst du das Tool über die Konfigurationsdatei „barrierefrei_config.js“ an deine Bedürfnisse anpassen. Mehr Informationen findest du unter Setup