Gestaltung

Button, Hinweis-Fenster, Fortschrittsbalken und Statusmeldung liegen in einem abgeschirmten Bereich (Shadow DOM), den das CSS Ihrer Website nicht erreicht. Sie gestalten sie mit Akzentfarbe, CSS-Variablen und ::part(). Die Übersetzung steht in Ihren eigenen Elementen, dort wirkt Ihr CSS weiter.

Akzentfarbe

<script src="https://leichtesprache.participaite.de/plugin/leichte-sprache.js" data-site="IHRE-KENNUNG" data-accent="#00507d" defer></script>

Die Farbe gilt für Rahmen und Schrift des Buttons, seinen Hintergrund im eingeschalteten Zustand, den Fortschrittsbalken, den Button „Verstanden“ und die Linie am Banner-Hinweis. Auf dem eingeschalteten Button und auf „Verstanden“ steht weiße Schrift, wählen Sie also eine Farbe mit mindestens 4,5 : 1 Kontrast zu Weiß. Bei einer hellen Akzentfarbe setzen Sie --ls-accent-contrast auf eine dunkle Schriftfarbe. Sitzt der Button in einem Element Ihrer Seite (data-button), bestimmt Ihr CSS seine Farben. Die Akzentfarbe gilt dann für Hinweis-Fenster und Fortschrittsbalken und steht am Button als Variable --ls-accent bereit.

Button im eigenen Kopfbereich

Mit data-button kommt der Button in ein Element Ihrer Seite, etwa in die Service-Leiste:

<ul class="service-leiste">
  <li><a href="/suche">Suche</a></li>
  <li id="ls-button"></li>
</ul>
<!-- … -->
<script src="https://leichtesprache.participaite.de/plugin/leichte-sprache.js" data-site="IHRE-KENNUNG" data-button="#ls-button" defer></script>

Das Plugin setzt dort einen einfachen Button ohne Symbol ein:

<button type="button" class="ls-plugin-ui ls-toggle" aria-busy="false">Leichte Sprache</button>

Zustand	Beschriftung	Attribute
Original	„Leichte Sprache“	keine
Übersetzung läuft	„Übersetze …“	`data-ls-on`, `aria-busy="true"`
Leichte Sprache an	„Original-Text“	`data-ls-on`

Der Button hat kein aria-pressed, weil seine Beschriftung sagt, was ein Klick tut (Barrierefreiheit). Bis Version 0.4 zeigte aria-pressed="true" den Zustand. Verwendet Ihr CSS diesen Selektor, ändern Sie ihn in [data-ls-on].

Seine Grundstile haben keine Spezifität (:where()), jede Ihrer Regeln mit Element-, Klassen- oder ID-Selektor geht vor:

.service-leiste .ls-toggle {
  font: inherit;
  padding: 0.5em 1em;
  border: 2px solid currentColor;
  border-radius: 4px;
  background: #fff;
  color: #00507d;
  cursor: pointer;
}
.service-leiste .ls-toggle[data-ls-on] { background: #00507d; color: #fff; }
.service-leiste .ls-toggle[aria-busy="true"] { cursor: progress; }
.service-leiste .ls-toggle:focus-visible { outline: 3px solid #00507d; outline-offset: 2px; }

Hinweis-Fenster, Fortschrittsbalken und Statusmeldung bleiben im abgeschirmten Bereich. Einen ganz eigenen Button mit eigenem Symbol bauen Sie mit data-placement="none" und der JavaScript-API.

Schwebender Button, Hinweis-Fenster, Fortschrittsbalken

Diese Elemente liegen in <leichte-sprache-ui>. CSS-Variablen setzen Sie an diesem Element oder weiter oben, etwa an :root:

leichte-sprache-ui {
  --ls-radius: 6px;
  --ls-font-size: 18px;
  --ls-shadow: none;
}

Variable	Standard	Wirkung
`--ls-accent`	`#1a1a1a`	Akzentfarbe (wie `data-accent`)
`--ls-accent-contrast`	`#fff`	Schrift auf der Akzentfarbe
`--ls-bg`	`#fff`	Hintergrund von Button und Hinweis-Fenster
`--ls-fg`	`#1a1a1a`	Schriftfarbe im Hinweis-Fenster
`--ls-hover-bg`	`#f2f2f2`	Hintergrund des Buttons unter dem Mauszeiger
`--ls-focus`	Akzentfarbe	Farbe des Fokusrahmens
`--ls-font`	Schrift Ihrer Seite	Schriftart (ohne Angabe die des `body`)
`--ls-font-size`	`16px` (auf schmalen Bildschirmen `15px`)	Schriftgröße des Buttons
`--ls-radius`	`999px` (Pillenform)	Eckenradius von Button und „Verstanden“-Button
`--ls-radius-popup`	`12px`	Eckenradius des Hinweis-Fensters
`--ls-shadow`	leichter Schatten	Schatten des Buttons
`--ls-offset-x`, `--ls-offset-y`	`16px`	Abstand des schwebenden Buttons zum Fensterrand (wie `data-offset`)
`--ls-z`	`2147483000`	Stapelhöhe (wie `data-z-index`)

Werte aus data-accent, data-offset und data-z-index stehen direkt am Element und gehen CSS-Variablen mit demselben Zweck vor. Einzelne Teile erreichen Sie mit ::part():

Teil	Element
`toggle`	der Button (schwebend oder über dem Inhalt)
`popup`	das Hinweis-Fenster
`popup-text`	der Text im Hinweis-Fenster
`popup-ok`	der Button „Verstanden“
`progress`	der Fortschrittsbalken am oberen Fensterrand

leichte-sprache-ui::part(toggle) { font-weight: 600; }
leichte-sprache-ui::part(popup) { border-radius: 4px; }
leichte-sprache-ui::part(progress) { height: 6px; }

Übersetzte Inhalte

Das Plugin ändert nie das class-Attribut Ihrer Elemente. Regeln wie p:not([class]) und Klassen, auf die Ihre Skripte reagieren, wirken also weiter. Den Zustand zeigen eigene Attribute:

Haken	Bedeutung
`[data-ls-state="translated"]`	Element, das gerade eine Übersetzung zeigt, zum Beispiel eine Überschrift, ein Absatz, eine Liste oder ein Listeneintrag
`span.ls-run`	Hülle um Text, der direkt in einem Container neben anderen Blöcken steht. Sie trägt ebenfalls `data-ls-state="translated"` und verschwindet beim Zurückschalten.
`li[data-ls-lead]`	Einleitungszeile einer Liste, die mit Doppelpunkt endet (zum Beispiel „Sie brauchen:“), ohne Aufzählungszeichen
`[data-ls-wait]`	Abschnitt, der auf seine Übersetzung wartet. Werte `0` bis `5`: pulsiert (als Welle, höchstens 12 Abschnitte im sichtbaren Bereich), `still`: nur abgeblendet.
`[data-ls-fresh]`	Abschnitt, dessen Übersetzung gerade angekommen ist (kurzes Einblenden)
`[aria-busy="true"]`	am Inhaltsbereich, solange Übersetzungen laufen
`.ls-notice`	der Hinweis als Banner (`data-notice-style="banner"`), ein `<p role="note">` über dem Inhalt

Im Markup ändert sich Folgendes:

In Absätzen trennt <br> die Sätze, jeder steht in einer eigenen Zeile im selben <p> wie vorher.
Bei Überschriften wechselt nur der Text. Schreibt das Modell eine Überschrift in mehreren kurzen Zeilen, bleiben die Zeilenumbrüche.
Kurze Aufzählungen baut das Plugin aus den übersetzten Zeilen neu auf. Jeder Eintrag ist eine Kopie des ersten Originaleintrags, mit dessen Klassen, aber ohne id. Nummerierte Listen, Linklisten und Listen mit langen Einträgen übersetzt es Eintrag für Eintrag.
Links, deren Text in der Übersetzung fehlt, stehen in einer letzten Zeile „Mehr Infos: …“, in Listen als eigener Eintrag.

Mehr Zeilenabstand für Fließtext

Leichte Sprache liest sich mit mehr Zeilenabstand besser. Vergrößern Sie ihn nur für übersetzten Fließtext, nicht für Überschriften, Buttons oder Teaser-Titel:

:is(p, li, ul, ol, dd, figcaption, blockquote, .ls-run)[data-ls-state="translated"] {
  line-height: 1.75;
}

Aufzählungszeichen aus `::before`

Erzeugt Ihr CSS die Aufzählungszeichen mit ::before, blenden Sie sie für die Einleitungszeile aus:

li[data-ls-lead]::before { display: none; }
li[data-ls-lead] { margin-left: 0; padding-left: 0; }

Längere Texte

Leichte Sprache erklärt Wörter und setzt jeden Satz in eine eigene Zeile, die Texte werden also oft länger. Kästen mit fester Höhe oder line-clamp können überlaufen. Lassen Sie solche Elemente für [data-ls-state="translated"] mitwachsen. Beim Einschalten, bei neuen Übersetzungen und beim Zurückschalten löst das Plugin höchstens alle zwei Sekunden das Ereignis resize am Fenster aus, damit Skripte für gleich hohe Kacheln, Akkordeons oder Slider neu messen.

Mediopunkt

Das Modell trennt lange Wörter mit dem Mediopunkt ‧ (U+2027), zum Beispiel „Bürger‧amt“. Fehlt das Zeichen in Ihrer Webschrift, nimmt der Browser es aus einer Ersatzschrift, und es kann etwas anders aussehen.

Akzentfarbe​

Button im eigenen Kopfbereich​

Schwebender Button, Hinweis-Fenster, Fortschrittsbalken​

Übersetzte Inhalte​

Mehr Zeilenabstand für Fließtext​

Aufzählungszeichen aus ::before​

Längere Texte​

Mediopunkt​