JavaScript-API und Ereignisse

window.LeichteSprache

Sobald das Plugin läuft, gibt es das Objekt window.LeichteSprache, mit defer eingebunden schon vor DOMContentLoaded. Auf nicht deutschen Seiten, im CMS-Bearbeitungsmodus und für Crawler und automatisierte Browser startet das Plugin absichtlich nicht, dann fehlt das Objekt. Prüfen Sie es deshalb vor der Verwendung.

Methode oder Eigenschaft	Wirkung
enable()	Schaltet Leichte Sprache ein, mit Hinweis-Fenster wie bei einem Klick. Das Promise ist erfüllt, sobald die Übersetzungen der Seite da sind (dann erscheint das Hinweis-Fenster) oder die Übersetzung nicht möglich war.
disable()	Zeigt wieder den Original-Text.
toggle()	Schaltet ein, wenn Leichte Sprache aus ist, sonst aus.
refresh()	Sucht sofort nach neuen Inhalten und übersetzt sie. Wirkt nur, wenn Leichte Sprache an ist.
isActive	Eigenschaft: true, wenn Leichte Sprache an ist, sonst false.
contentRoots	Die Inhaltsbereiche, mit denen das Plugin arbeitet (für die Fehlersuche).

Einen Fehler meldet enable() nicht als Ausnahme. Ist isActive nach dem Promise false, war die Übersetzung nicht möglich oder die Seite ist mit data-skip-urls ausgenommen:

await window.LeichteSprache.enable();
if (!window.LeichteSprache.isActive) {
  // Leichte Sprache ist auf dieser Seite gerade nicht möglich
}

Ereignis leichtesprache

Bei jedem Ein- und Ausschalten löst das Plugin am document das Ereignis leichtesprache aus, event.detail.active sagt, ob Leichte Sprache jetzt an ist:

document.addEventListener("leichtesprache", function (event) {
  console.log("Leichte Sprache ist", event.detail.active ? "an" : "aus");
});

Beim Einschalten kommt das Ereignis sofort, noch vor den Übersetzungen. Scheitert das Einschalten, folgt gleich ein zweites mit active: false.

Eigener Button

Mit data-placement="none" verwenden Sie ein eigenes Bedienelement. Das Beispiel zeigt den Button nur, wenn das Plugin läuft, und hält die Beschriftung aktuell. Sie sagt, was ein Klick tut, deshalb braucht der Button kein aria-pressed:

<button type="button" id="mein-ls-button" hidden>Leichte Sprache</button>

<script src="https://leichtesprache.participaite.de/plugin/leichte-sprache.js"
        data-site="IHRE-KENNUNG" data-placement="none" defer></script>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    var ls = window.LeichteSprache;
    var button = document.getElementById("mein-ls-button");
    if (!ls) return;                       // Plugin läuft hier nicht: Button bleibt verborgen

    function zeige(an) {
      button.textContent = an ? "Original-Text" : "Leichte Sprache";
    }
    zeige(ls.isActive);                    // kann schon an sein, wenn es auf der vorigen Seite an war
    document.addEventListener("leichtesprache", function (e) { zeige(e.detail.active); });
    button.addEventListener("click", function () { ls.toggle(); });
    button.hidden = false;
  });
</script>

Meldungen wie „Leichte Sprache ist gerade nicht möglich.“ sind dann nicht zu sehen, Screenreader lesen sie aber vor. Hinweis-Fenster und Fortschrittsbalken erscheinen wie gewohnt.

Direkt in Leichter Sprache verlinken

Mit ?leichte-sprache=1 in der Adresse öffnet sich eine Seite gleich in Leichter Sprache, etwa aus einer Übersichtsseite „Leichte Sprache“, einem Newsletter oder über einen QR-Code auf einem Aushang:

https://www.stadt.de/buergerservice/personalausweis?leichte-sprache=1
https://www.stadt.de/suche?q=wohngeld&leichte-sprache=1
https://www.stadt.de/buergerservice/personalausweis#leichte-sprache

• ?leichte-sprache=1, jeder andere Wert, der Parameter ohne Wert und #leichte-sprache schalten Leichte Sprache ein, mit Hinweis-Fenster wie bei einem Klick.
• ?leichte-sprache=0 schaltet sie aus und merkt sich das für die folgenden Seiten, ebenso false, off, aus und nein.
• Danach bleibt der gewählte Zustand beim Weiterklicken erhalten. Auf Seiten aus data-skip-urls meldet der Button „Diese Seite gibt es nicht in Leichter Sprache.“

Inhalte, die später erscheinen

Solange Leichte Sprache an ist, beobachtet das Plugin den Inhaltsbereich. Neue oder sichtbar gewordene Inhalte wie Akkordeons, Reiter, „Mehr laden“ oder Slider übersetzt es nach etwa 0,4 Sekunden. Es reagiert auf neue Elemente und auf Änderungen der Attribute class, style, hidden, open, aria-hidden und aria-expanded. In Single-Page-Apps erkennt es Seitenwechsel über history.pushState, history.replaceState sowie Vor und Zurück im Browser und sucht den Inhaltsbereich neu. Ändert Ihre Seite Inhalte unbemerkt, zum Beispiel durch eine Änderung außerhalb des Inhaltsbereichs, rufen Sie danach window.LeichteSprache.refresh() auf.