Das brauchst du
Ein eigenes Theme oder Subtheme mit Dateizugriff und die Berechtigung, alle Caches zu leeren. Ändere kein Core- oder Contrib-Theme direkt. Lege in Accessonaut zuerst ein Projekt mit deiner tatsächlichen Website-Domain an und öffne im Projekt die Einbauseite.
Schritt für Schritt
- Öffne die Datei
THEMENAME.libraries.ymldeines eigenen Themes oder Subthemes. Ein Subtheme bleibt bei Updates des Basis-Themes erhalten. - Lege eine Bibliothek an, etwa
accessonaut, und trage unterjsdie öffentliche widget.js-Adresse mittype: externalein. - Übertrage unter
attributesdie Attribute deines Einbaucodes:defer: trueund die Datenattribute wiedata-project-idmit den Werten aus deinem Projekt. - Binde die Bibliothek in
THEMENAME.info.ymlunterlibraries:global ein. Drupal lädt JavaScript standardmäßig im Footer. - Leere alle Caches unter Konfiguration → Entwicklung → Leistung oder mit
drush cr. Prüfe die öffentliche Website mit dem aktiven Theme.
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
Die Bibliothek gilt nur für Themes, die sie einbinden. Nutzt du weitere Frontend-Themes, binde sie dort ebenfalls ein. Füge den Code nicht in Blöcke mit Texteditor ein: Textformate und Editor können Script-Tags entfernen. Seiten-Caches, Reverse Proxies und CDNs musst du zusätzlich leeren.
Häufige Fragen zu Drupal
Muss ich die JavaScript-Aggregation abschalten?
Nein. Drupal fasst externe Bibliotheken nicht mit anderen Dateien zusammen. Die Option „Aggregate JavaScript files“ zum Zusammenfassen von JavaScript-Dateien unter Konfiguration → Entwicklung → Leistung kann eingeschaltet bleiben.
Kann ich die Bibliothek auch in einem Template einbinden?
Ja. Statt der globalen Einbindung in THEMENAME.info.yml kannst du sie in einem Twig-Template mit {{ attach_library('THEMENAME/accessonaut') }} laden. Für ein Widget auf allen Seiten eignet sich ein Template, das jede Seite nutzt. Binde die Bibliothek nur auf einem der beiden Wege ein.
Brauche ich für mehrere Sprachen einen eigenen Einbau?
Nein, solange alle Sprachen dasselbe Theme nutzen. Mit data-language="auto" folgt das Widget dem lang-Attribut der Seite. Es spricht Deutsch, Englisch und Spanisch.
Wie entferne ich das Widget wieder?
Entferne die Bibliothek aus THEMENAME.info.yml und aus Templates mit attach_library. Lösche den Eintrag in THEMENAME.libraries.yml und leere alle Caches, etwa mit drush cr.
Wenn etwas nicht klappt
Das Script fehlt im Quelltext.
Ursache: Drupal hat die geänderten YAML-Dateien noch nicht neu eingelesen, oder der Name in libraries: passt nicht zur Bibliothek.
Lösung: Leere alle Caches. Prüfe, ob der Eintrag genau THEMENAME/accessonaut lautet und die Einrückung in den YAML-Dateien stimmt.
Das Script lädt, aber ohne data-project-id.
Ursache: Die Attribute stehen nicht unter dem Dateieintrag der widget.js-Adresse.
Lösung: Setze attributes direkt unter die Adresse, neben type: external. Drupal überträgt nur dort angegebene Werte auf das script-Element.
Das Widget zeigt das Standarddesign mit Accessonaut-Hinweis.
Ursache: Die Website läuft unter einer anderen Domain als im Projekt, etwa auf einer Entwicklungsumgebung.
Lösung: Prüfe das Design auf der Live-Domain. Für eine dauerhafte zweite Domain legst du ein eigenes Projekt an.
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.
Offizielle Plattformdokumentation
Drupal: CSS und JavaScript per libraries.yml in ein Theme einbinden