Zu Content springen
Deutsch
  • Es gibt keine Vorschläge, da das Suchfeld leer ist.

Wie erstelle ich einen individuellen Button für Einfache Sprache?

Wie du Einfache Sprache direkt in deine Seite einbettest

Neben dem vordefinierten Button hast du auch die Möglichkeit, einen eigenen Button für die Funktion Einfache Sprache zu erstellen.

So kannst du Design, Position und Darstellung vollständig an deine Website anpassen und den Button genau so gestalten, wie du ihn benötigst.

Grundsätzlich gibt es zwei Möglichkeiten zur Individualisierung: eine teilweise oder eine vollständige Individualisierung des Buttons.

Teilweise Individualisierung des Buttons

Bei der teilweisen Individualisierung ersetzt dein eigener Button den Standard-Button. Die Funktion für Einfache Sprache wird weiterhin automatisch ausgelöst, wenn Nutzende auf deinen Button klicken.

Dabei kannst du zwischen zwei Varianten wählen.

1. Individueller Button ohne Tooltip und Icon

Bei dieser Variante übernimmst du keine vorgefertigten Elemente. Dein Button wird komplett selbst gestaltet und ersetzt den vorhandenen Button vollständig.

Es werden keine Tooltips und keine Icons aus dem System übernommen.

So funktioniert es:

  • Du bindest die bereitgestellte JavaScript-Datei ein

  • Du erstellst keinen <easy-speech> Tag

  • Stattdessen erstellt du einen eigenen individuellen Button

  • Deinem Button weist du die ID easy-speech-custom zu

Danach wird nur dein individueller Button angezeigt.

Wenn Nutzende auf den Button klicken, wird die Übersetzung in Einfache Sprache aktiviert. Bei einem erneuten Klick wird wieder die normale Seite angezeigt.

2. Individueller Button mit Tooltip und Icon

Auch bei dieser Variante kannst du das Design deines Buttons vollständig selbst gestalten.

Der Unterschied ist, dass Tooltips und Icons des Systems übernommen werden.

Diese zeigen beispielsweise an, ob eine Übersetzung erfolgreich durchgeführt wurde. Zusätzlich erscheint ein Tooltip beim Hover über den Button, der weitere Informationen zur Übersetzung liefert.

So funktioniert es:

  • Du bindest die bereitgestellte JavaScript-Datei ein

  • Du erstellst keinen <easy-speech> Tag

  • Stattdessen erstellt du einen eigenen individuellen Button

  • Deinem Button weist du die ID easy-speech-custom-including-tooltip zu

Danach wird dein individueller Button angezeigt.

Beim Klick auf den Button wird die Einfache Sprache aktiviert. Bei einem erneuten Klick wird wieder die normale Seite angezeigt.

Während der Nutzung erscheinen zusätzliche Statusanzeigen:

  • Beim Start der Übersetzung wird ein Lade-Icon am Button angezeigt

  • Nach erfolgreicher oder fehlgeschlagener Übersetzung erscheint ein entsprechendes Status-Icon am Button

  • Beim Hovern über den Button wird ein Tooltip mit Informationen zur Übersetzung angezeigt

  • Wenn die Übersetzung länger dauert oder fehlschlägt, erscheint ebenfalls ein Tooltip

Vollständige Individualisierung des Buttons

Bei der vollständigen Individualisierung übernimmst du keine vorgefertigten Elemente.

Du gestaltest deinen Button komplett selbst und steuerst die Aktivierung der Einfachen Sprache über Funktionen.

Tooltips und Icons werden in dieser Variante nicht automatisch übernommen.

So funktioniert es:

  • Du bindest die bereitgestellte JavaScript-Datei ein

  • Du erstellst keinen <easy-speech> Tag

  • Stattdessen erstellt du ein eigenes individuell gestaltetes HTML-Element

  • Du fügst die Funktionen zur Aktivierung der Einfachen Sprache deinem Code hinzu

Zur Steuerung stehen folgende Funktionen zur Verfügung:

  • await EA.activateEasy()
    Aktiviert die Übersetzung in Einfache Sprache.

  • await EA.deactivateEasy()
    Deaktiviert die Einfache Sprache und zeigt wieder die Originalseite an.

Weitere Funktionen stehen zur Verfügung, um Statusinformationen zur Einfachen Sprache abzufragen oder die Aktivierung zu steuern.

Weitere verfügbare Funktionen

Zusätzlich stehen mehrere Funktionen zur Verfügung, mit denen du den Status der Einfachen Sprache prüfen oder die Nutzung steuern kannst.

Dazu gehören unter anderem:

  • EA.statusEasy() – gibt den aktuellen Status der Einfachen Sprache zurück

  • EA.isEasyActive() – prüft, ob Einfache Sprache aktuell aktiv ist

  • EA.keepEasyActivated() – sorgt dafür, dass Einfache Sprache auch nach einem Seitenwechsel aktiv bleibt

  • EA.scriptIsLoaded() – prüft, ob das Skript erfolgreich geladen wurde

Diese Funktionen helfen dir dabei, die Einfache Sprache flexibel in deine Website zu integrieren und an dein eigenes Interface anzupassen.