Barrierefreiheit

Button

• Der Button ist ein echtes <button>-Element, mit der Tabulatortaste erreichbar und mit Enter oder Leertaste bedienbar.
• Die Beschriftung sagt, was ein Klick tut: „Leichte Sprache“ schaltet ein, „Original-Text“ schaltet zurück. Der Button hat deshalb kein aria-pressed, denn Screenreader würden sonst „Original-Text, gedrückt“ ansagen, und es bliebe unklar, welche Fassung gerade zu sehen ist. Während der Übersetzung heißt der Button „Übersetze …“ und trägt aria-busy="true".
• Die Klickfläche ist mindestens 44 × 44 Pixel groß. Der Fokus ist ein 3 Pixel breiter Rahmen in der Akzentfarbe mit einem weißen Rand nach innen, damit er auch auf dunklem Hintergrund sichtbar bleibt (Farbe änderbar mit --ls-focus).
• Das Buch-Symbol ist für Screenreader ausgeblendet. Im Kontrastmodus von Windows (erzwungene Farben) verwenden der Button und „Verstanden“ die Systemfarben und haben einen Rahmen.
• Hat die Akzentfarbe weniger als 4,5 : 1 Kontrast zu Weiß, schreibt das Plugin eine Warnung in die Browser-Konsole.
• Unten im Fenster weicht der schwebende Button festen Leisten und Buttons nach oben aus, etwa Cookie-Hinweisen oder Chat- und Vorlese-Buttons.

Einen Button in Ihrem eigenen Element (data-button) gestalten Sie selbst, mit sichtbarem Fokus und ausreichendem Kontrast. Den Zustand lesen Sie an data-ls-on (Leichte Sprache an) und aria-busy ab (Gestaltung).

Statusmeldungen für Screenreader

Ein unsichtbarer Statusbereich (role="status") meldet „Übersetze …“, danach „Der Text ist jetzt in Leichter Sprache.“ und beim Zurückschalten „Sie sehen wieder den Original-Text.“ Öffnet sich das Hinweis-Fenster, liest der Screenreader das Fenster vor, und die Meldung entfällt. Geht etwas schief, meldet er „Leichte Sprache ist gerade nicht möglich.“ oder „Diese Seite gibt es nicht in Leichter Sprache.“, bei der täglichen Übersetzung für eine noch neue Seite „Diese Seite gibt es bald in Leichter Sprache.“ Die Texte lassen sich mit data-label-done, data-label-restored und den anderen Beschriftungen ändern. Während der Übersetzung trägt der Inhaltsbereich aria-busy="true". Der Fortschrittsbalken ist für Screenreader ausgeblendet, er enthält keine weitere Information.

Hinweis-Fenster

Das Hinweis-Fenster ist ein modaler Dialog des Browsers (<dialog>). Der Fokus springt auf „Verstanden“ und bleibt im Fenster, bis es mit „Verstanden“, der Escape-Taste oder einem Klick neben das Fenster geschlossen wird. Danach liegt er wieder auf dem Button. Der Text ist 18 Pixel groß, mit großzügigem Zeilenabstand.

Übersetzter Inhalt

Überschriften behalten ihre Ebene (h1 bis h6), Listen und Links bleiben erhalten, und gleiche Abschnitte heißen auf allen Seiten gleich (Feste Überschriften). Die Bedienelemente des Plugins und der Banner-Hinweis tragen translate="no", damit Übersetzungsfunktionen des Browsers sie nicht verändern. Ein Button in Ihrem eigenen Element trägt das Attribut nicht.

Bewegung

Abschnitte, die auf ihre Übersetzung warten, pulsieren höchstens etwa 4 Sekunden lang und bleiben dabei lesbar. Danach zeigen der Fortschrittsbalken und der Button, dass die Übersetzung noch läuft. Höchstens zwölf Abschnitte pulsieren gleichzeitig. Mit „Bewegung reduzieren“ im Betriebssystem entfallen alle Animationen: Wartende Abschnitte sind nur leicht abgeblendet, neue Übersetzungen erscheinen ohne Einblenden, das Ladesymbol im Button steht still, und der Fortschrittsbalken springt ohne Übergang.

Was Sie beitragen können

Der schwebende Button steht im Quelltext am Ende der Seite und ist damit das letzte Element in der Tab-Reihenfolge. Damit Tastatur-Nutzer ihn früh erreichen, und wenn es auf Ihrer Website schon schwebende Buttons gibt (Vorlesen, Chat), setzen Sie ihn mit data-button in den Kopfbereich oder mit data-placement="above" unter die Hauptüberschrift. Wählen Sie eine Akzentfarbe mit mindestens 4,5 : 1 Kontrast zu Weiß (Gestaltung), und geben Sie übersetztem Fließtext mehr Zeilenabstand. Wenn Sie den Button mit data-label-on umbenennen, verwenden Sie auf der ganzen Website denselben Begriff.

Prüfung

Stand 4. Oktober 2026, Plugin v0.5.0. Automatisch geprüft mit axe-core 4.13 (Regeln für WCAG 2.1 und 2.2, Stufe AA) in Chromium, mit dem Button im Kopfbereich der Demo-Website und mit dem schwebenden Button. Geprüft wurde jeweils vor dem Einschalten, mit offenem Hinweis-Fenster, mit Leichter Sprache und bei 320 Pixel Breite. Dabei gab es keine Verstöße. Von Hand geprüft wurden die Bedienung mit der Tastatur, der Fokus im Hinweis-Fenster und zurück zum Button, Namen und Zustände im Accessibility-Baum, der Fokusrahmen auf hellem und dunklem Hintergrund und die erzwungenen Farben. Ein Test mit Screenreadern (NVDA, JAWS, VoiceOver) und ein BITV-Test durch eine Prüfstelle stehen noch aus.