Das brauchst du
Contao 5.7 oder 5.3 LTS oder Contao 6.0 mit der passenden PHP-Version, der Contao Manager oder Composer und ein Backend-Konto, das Website-Startseiten bearbeiten darf. Für Contao 4.13 nutzt du den manuellen Einbau aus den Fragen unten. Lege in Accessonaut zuerst ein Projekt mit deiner tatsächlichen Website-Domain an und öffne im Projekt die Einbauseite.
Schritt für Schritt
- Installiere das Bundle aus dem Abschnitt „Das Contao-Bundle“ weiter unten, im Contao Manager oder mit Composer.
- Aktualisiere die Datenbank, wenn der Contao Manager dich dazu auffordert, oder führe
vendor/bin/contao-console contao:migrateaus. Das Bundle ergänzt vier Felder der Website-Startseite. - Öffne im Backend Inhalte → Seiten und bearbeite die Website-Startseite. Setze im Bereich „Accessonaut-Lesehilfen“ den Haken bei „Widget und Verbindung zum Dienst einschalten“.
- Trage die öffentliche Projekt-ID aus der Einbauseite deines Accessonaut-Projekts ein und behalte die Service-Adresse https://accessonaut.com. Lies den Hinweis zum externen Dienst und speichere. Wiederhole das für jede Website-Startseite, die das Widget zeigen soll. Prüfe danach mehrere öffentliche Unterseiten in einem privaten Fenster.
Das Contao-Bundle
Das Bundle „accessonaut/contao-accessibility“ setzt das Script für dich ein, ohne Änderung an Seitenlayout oder Templates. Es läuft mit Contao 5.7 und 5.3 LTS sowie 6.0 und ist auf jeder Website-Startseite zunächst ausgeschaltet. Erst wenn du es einschaltest und eine gültige Projekt-ID einträgst, lädt der Browser etwas vom Dienst. Jede Website einer Installation hat eigene Einstellungen. Im Backend erscheint das Widget nie.
accessonaut-contao-1.0.0.zip
SHA-256-Prüfsumme · Lizenz: GPLv2 oder neuer
Die Aufnahme in Packagist und die Contao-Erweiterungsliste ist vorbereitet. Bis dahin lädst du die ZIP-Datei im Contao Manager unter Pakete → „Pakete hochladen“ hoch, wählst „Uploads bestätigen“ und dann „Änderungen anwenden“. Mit Composer installierst du sie als lokales Paket:
mkdir -p packages
cp ~/Downloads/accessonaut-contao-1.0.0.zip packages/
composer config repositories.accessonaut artifact ./packages
composer require accessonaut/contao-accessibility:^1.0
vendor/bin/contao-console contao:migrateOhne Extension oder Bundle kannst du den Einbaucode weiterhin selbst einsetzen. Er steht im nächsten Abschnitt; wie es geht, beantworten die häufigen Fragen weiter unten.
So sieht die Einbindung aus
Verwende den fertigen Code aus deinem Projekt. Das Beispiel benötigt deine echte Projekt-ID und die öffentlich erreichbare Service-Adresse.
<script src="https://accessonaut.com/widget.js"
data-project-id="DEINE_PROJEKT_ID"
data-language="de" defer></script>Das Design an deine Website anpassen
Öffne im Accessonaut-Projekt „Lesehilfen-Widget“. Fünf Vorlagen und eine Live-Vorschau helfen dir beim Gestalten: Farben, Schriften, Menübreite, Ecken, Schatten, Symbol oder beschrifteter Öffner sowie eigene Texte. Position und Randabstände lassen sich für Desktop und Smartphone abstimmen. Nach dem Speichern übernimmt dein vorhandener Einbaucode das Projektdesign automatisch; die öffentliche Konfiguration wird bis zu einer Minute zwischengespeichert.
Im WordPress-Plugin kannst du stattdessen lokale Einstellungen wählen. Diese haben Vorrang vor dem Projektdesign. Die Gestaltung ist in allen Tarifen verfügbar. Im Free-Tarif bleibt der Accessonaut-Hinweis sichtbar. Persönliche Leseeinstellungen deiner Besuchenden haben Vorrang vor Designvorgaben.
Darauf achten
Nutze genau eine Einbauart und entferne den Einbaucode aus „Eigener JavaScript-Code“ deiner Seitenlayouts. Findet das Bundle auf einer Seite schon ein Script desselben Dienstes, fügt es kein zweites hinzu. Es setzt das Script in die fertige Seite ein und braucht deshalb kein Feld im Seitenlayout, auch nicht bei Twig-Layouts. Vorgelagerte Proxies und CDNs musst du selbst leeren.
Häufige Fragen zu Contao
Wie binde ich das Widget ohne Bundle ein?
Öffne Layout → Themes und die Seitenlayouts deines Themes. Füge im Bereich JavaScript den unveränderten Einbaucode in das Feld „Eigener JavaScript-Code“ ein; Contao gibt ihn am Ende der Seite aus. Nutzen deine Seiten mehrere Layouts, ergänze ihn in jedem genau einmal. Bei der Layout-Art „Twig-Layout mit Slots“ fehlt dieses Feld. Das gilt auch für Contao 4.13.
Was gilt bei mehreren Websites in einer Installation?
Jede Website-Startseite hat ihre eigenen Accessonaut-Einstellungen. Nutzen die Websites verschiedene Domains, braucht jede ein eigenes Accessonaut-Projekt. Trage dessen Projekt-ID in der passenden Website-Startseite ein. Websites ohne Haken zeigen kein Widget.
Was ist bei der Content-Security-Policy von Contao zu tun?
Ab Contao 5.3 aktivierst du die CSP in der Website-Startseite. Das Feld Content-Security-Policy enthält den ganzen Header. Ergänze deine Service-Adresse in script-src und connect-src. Das Widget fügt style-Elemente ohne Nonce ein; style-src muss eingebettete Styles erlauben. Teste zuerst mit dem Nur-Bericht-Modus.
Muss ich nach dem Speichern den Cache leeren?
Meist nicht. Contao verknüpft zwischengespeicherte Seiten mit ihren übergeordneten Seiten. Speicherst du die Website-Startseite, verwirft Contao die Seiten dieser Website im Shared Cache. Vorgelagerte Proxies und CDNs leerst du separat.
Wie entferne ich das Widget wieder?
Entferne den Haken in der Website-Startseite und speichere. Willst du das Bundle ganz entfernen, deinstalliere es im Contao Manager oder mit composer remove accessonaut/contao-accessibility. Die Datenbank-Aktualisierung bietet danach an, die vier Felder zu löschen. Entferne auch CSP-Einträge, die du nur für das Widget ergänzt hast.
Wenn etwas nicht klappt
Das Widget fehlt.
Ursache: Der Haken ist in der Website-Startseite dieser Domain nicht gesetzt, die Projekt-ID hat ein ungültiges Format oder ein vorgelagerter Cache liefert noch die alte Seite aus.
Lösung: Prüfe die Felder der richtigen Website-Startseite. Die Projekt-ID besteht aus 20 bis 40 Kleinbuchstaben und Ziffern. Leere Proxies und CDNs.
Die Browser-Konsole meldet einen CSP-Verstoß.
Ursache: Die CSP der Website-Startseite erlaubt deine Service-Adresse oder die Styles des Widgets nicht.
Lösung: Ergänze die fehlende Quelle in der gemeldeten Direktive und speichere die Startseite.
Ein älterer Einbau wirkt weiter, Änderungen im Bundle greifen nicht.
Ursache: Der Einbaucode steht noch in „Eigener JavaScript-Code“ eines Seitenlayouts. Das Bundle fügt dann kein zweites Script hinzu.
Lösung: Lösche den alten Einbaucode aus allen Seitenlayouts und speichere sie.
Einbau prüfen
- Öffne die öffentliche Website in einem privaten Fenster. Das Widget wird genau einmal angezeigt.
- Erreiche den Button mit der Tastatur. Öffne das Panel, ändere die Textgröße und schließe es wieder.
- Prüfe Startseite, Unterseite, Formular und mobile Ansicht. Das Widget darf keine wichtigen Bedienelemente verdecken.
- Prüfe im Netzwerk-Tab, dass widget.js und die Projektkonfiguration von deiner Service-Adresse geladen werden. Bei Fehlern kontrolliere Domain, Projekt-ID und CSP.
- Bei Free-Projekten bleibt der sichtbare Accessonaut-Hinweis Bestandteil des Widgets. Berechtigungen kommen aus deinem Projekt.
Datenschutz und Grenzen
Beim Laden ruft der Besucherbrowser das Script und die Projektkonfiguration vom Accessonaut-Dienst ab. Dabei fallen IP-Adresse, Browser-Anfragedaten und Website-Hostname an. Darstellungswünsche werden lokal im Browser gespeichert. Berücksichtige die Einbindung in deinen Datenschutzhinweisen und prüfe deine konkrete Konfiguration.
Die Lesehilfen erzeugen keine Konformitätsgarantie. Prüfe Barrieren im Quellcode und vollständige Nutzerabläufe zusätzlich automatisch und manuell.