Kategorie
Plugin-Version
1.1.0-beta.29

Accessibility Toolbar

Mit der Accessibility Toolbar können Besucher Darstellung und Bedienung einer Seite an ihre Bedürfnisse anpassen. Alle Präferenzen sind rückgängig machbar und gelten nur im Browser des Besuchers. Die Toolbar repariert keine fehlende Semantik, Beschriftung oder Tastaturbedienung im Quellcode und macht eine ansonsten nicht barrierefreie Website nicht automatisch WCAG-konform.

So funktioniert die Toolbar

Ein schwebender Trigger öffnet genau einen modalen Toolbar-Dialog. Die Übersicht enthält alle verfügbaren Werkzeuge. Funktionen mit mehreren Auswahlmöglichkeiten öffnen eine Detailansicht innerhalb desselben Dialogs; es entsteht kein Dialog in einem Dialog.

  • Profil: Standard bedeutet, dass keine Besucherpräferenz aktiv ist. Profil: Benutzerdefiniert erscheint, sobald mindestens eine Präferenz abweicht. Der Profilstatus ist ein Button und öffnet die Profilverwaltung.
  • In einer Detailansicht ersetzt die Zeile mit Zurück, Funktionssymbol, Titel und Beschreibung den normalen Toolbar-Titel im festen Kopfbereich. Zurück führt in die Übersicht und setzt den Fokus auf die Karte zurück, die sie geöffnet hat.
  • Fertig schließt die Toolbar, ohne die gewählten Präferenzen zurückzusetzen.
  • Escape und der Schließen-Button schließen die vollständige Toolbar und setzen den Fokus auf den schwebenden Trigger zurück.
  • Alle zurücksetzen stellt sämtliche Toolbar-Präferenzen wieder her, beendet das Vorlesen und den Lesemodus und bietet einmal Rückgängig an. In der geöffneten Toolbar erscheint die Meldung als eigene Zeile direkt unter dem Header und verdeckt keine Funktionskarten. Ein farbiger Zeitbalken zeigt die verbleibenden 12 Sekunden; Zeigerkontakt oder Tastaturfokus pausiert den Ablauf. Wird die Toolbar währenddessen geschlossen, bleibt die Meldung als zentrierter Toast auf der Seite bestehen; Zeitbalken und Ablauf laufen synchron mit der bereits verbleibenden Zeit weiter.
  • Sobald mindestens eine Funktion angepasst ist, zeigt die grüne Statusbox die Anzahl. Details anzeigen blendet platzsparende Einträge mit Funktion und aktuellem Wert beziehungsweise aktiven Unteroptionen ein. Das X eines Eintrags deaktiviert nur diese Funktion, aktualisiert Anzahl und Funktionskarte sofort und bietet Rückgängig an. Die Einträge und ihr X sind vollständig mit der Tastatur bedienbar; der Fokus bleibt nach dem Entfernen an einer sinnvollen sichtbaren Position.
  • Ein aktiver Zustand wird immer durch Text und zusätzlich durch Symbol, Rahmen oder Form vermittelt – niemals nur durch Farbe.

Auf dem Desktop passt ein intrinsisches Raster vier, zwei oder eine Spalte an die tatsächlich verfügbare Panelbreite an. Bis zum konfigurierten mobilen Breakpoint öffnet sich die Toolbar als Bottom Sheet mit Safe-Area-Abstand. Bei etwa 390 px sind zwei kompakte Spalten vorgesehen; bei 320 px, langen Übersetzungen oder starkem Zoom fließen die Bedienelemente in eine Spalte um. Nur der Inhaltsbereich scrollt, Kopf- und Fußbereich bleiben stabil. Jedes Bedienelement ist mindestens 44 mal 44 CSS-Pixel groß. Bei reduzierter Bewegung erfolgen Übergänge praktisch sofort.

Standardwerte bei Neuinstallation

Toolbar, Desktop- und Mobile-Anzeige sowie alle beschriebenen Besucherwerkzeuge sind verfügbar. Die visuelle Anpassung ist ab Basic verfügbar, der Score-Tooltip ab Plus. Für einen neuen Besucher beginnt die Darstellung neutral:

  • Textgröße 100 %
  • Standardkontrast und Originalfarben
  • Link- und Bedienelement-Hervorhebung aus; Medien von Farbfiltern ausgenommen
  • Lesemodus und Vorlesen inaktiv
  • Zusätzliche Fokushilfen aus
  • Bilder sichtbar
  • Keine vom Besucher gewählte Bewegungsreduzierung; eine Systemeinstellung für reduzierte Bewegung wird trotzdem berücksichtigt

Die Fußzeile bleibt ausgeblendet, bis ein Administrator bewusst einen Link zur Barrierefreiheitserklärung oder EZZE-Branding auswählt.

Verfügbare Funktionen

Textgröße

Separate Minus- und Plus-Buttons wechseln zwischen 100, 110, 125, 150 und 200 %. Der neue Wert wird angekündigt; am Minimum oder Maximum ist der jeweilige Button deaktiviert. Die Toolbar verändert echte Textgrößen und Zeilenhöhen, damit Inhalte umbrechen können. Sie vergrößert die Seite nicht optisch mit transform: scale(). Ursprüngliche Werte werden exakt wiederhergestellt; später eingefügte Inhalte werden bei aktiver Skalierung ebenfalls berücksichtigt. Ansichtswechsel in der Toolbar und Fortschrittsaktualisierungen beim Vorlesen wenden die gewählte Stufe nicht erneut auf bereits vergrößerten Text an.

Kontrast

Die Detailansicht Kontrast bietet:

  • Standard
  • Erhöht · Hell
  • Erhöht · Dunkel
  • System

Diese Modi verwenden semantische Farben für Text, Hintergründe, Links, Rahmen, Formulare und Fokus. Die Seite wird nicht global invertiert. Bilder und Videos behalten ihre natürliche Darstellung, sofern der Administrator die Medienoption nicht freigibt und der Besucher sie nicht ausdrücklich aktiviert. Theme-eigene Menü-, Navigations- und Scroll-Icons bleiben erhalten: bildbasierte Button-Hintergründe werden nicht gelöscht, und einfarbige Masken- sowie Hamburger-Symbole übernehmen die jeweilige Textfarbe des Modus.

Original, Ruhige Farben und Graustufen lassen sich mit einem Kontrastmodus kombinieren. Eigene Farben setzt Kontrast auf Standard zurück, weil beide Einstellungen Vorder- und Hintergrundfarben der Seite steuern. Die Toolbar kündigt diese Priorität an und speichert sie eindeutig.

Farben

Ein Klick auf Farben verändert die Seite nicht sofort. Er öffnet vier gleich große Vorschaukarten mit einer nativen Einfachauswahl. Ein kräftigerer Rahmen, eine ruhige Hintergrundfläche und ein Haken kennzeichnen den aktiven Modus:

  • Original – lässt die Seitenfarben unverändert
  • Gedämpft – reduziert intensive Seitenfarben
  • Graustufen – entfernt Farbinformationen der Seite
  • Eigene Farben – verwendet eine gewählte Text- und Hintergrundfarbe

Eigene Farben erscheinen in einer eigenen Fläche mit zwei beschrifteten Karten für Text und Hintergrund. Jede Karte kombiniert ein großes Farbfeld mit einem editierbaren sechsstelligen Hex-Wert. Unter beiden Karten zeigt eine gemeinsame Zeile den echten Beispieltext, das numerische Kontrastverhältnis und eine verständliche Bewertung: Sehr gut lesbar, Gut lesbar, Nur für große Schrift geeignet oder Schwer lesbar.

Ein Farbfeld öffnet denselben innerhalb der Toolbar begrenzten Farbwähler mit tastaturbedienbaren Reglern für Farbton, Sättigung und Helligkeit. Anwenden übernimmt den Entwurf; Abbrechen, die Schließen-Schaltfläche oder Escape verwirft ihn und setzt den Fokus auf das auslösende Farbfeld zurück. Der Farbwähler wechselt bei wenig Platz die Seite und begrenzt seine eigene Höhe, damit am Browserrand keine Bedienelemente abgeschnitten werden. Die direkte Hex-Eingabe bleibt eine gleichwertige Alternative. Ein ungültiger Entwurf bleibt mit Fehlermeldung im Feld und ersetzt nicht die zuletzt gültige angewendete Farbe. Ein Besucher darf eine Kombination unter 4,5:1 nach einer klaren Warnung bewusst beibehalten; die Toolbar selbst bleibt davon unberührt und kontrastkonform.

Unter Weitere Anpassungen erscheinen drei kompakte Auswahlkarten mit nativen Checkboxen statt dauerhafter An-/Aus-Schalter:

  • Links unterstreichen
  • Bedienelemente hervorheben
  • Medien einbeziehen

Die Medienoption ist standardmäßig aus. Ihre Karte bleibt bei Original und Eigenen Farben sichtbar, wird aber als Nicht verfügbar bezeichnet, weil nur Gedämpft und Graustufen den Filter auf Fotos, Illustrationen und Videos anwenden können. Mit einem passenden Modus wird die Karte sofort bedienbar. Farben zurücksetzen stellt Originalfarben und diese drei Checkbox-Präferenzen wieder her, ohne andere Toolbar-Präferenzen zu verändern.

Lesemodus

Die Detailansicht bietet serifenlose oder Serifenschrift, schmale/mittlere/breite Zeilenlänge, normalen/großen Zeilenabstand und helle/warme/dunkle Hintergründe. Auf dem Desktop stehen diese vier Einstellungen in einem kompakten 2×2-Raster; in schmalen Ansichten werden sie untereinander angeordnet. Die Hintergründe besitzen zusätzliche visuelle Vorschauen. Eine Zusammenfassung zeigt die aktuelle Auswahl direkt neben dem kompakten Start-Button und wird nach jeder Änderung aktualisiert; auf schmalen Ansichten nutzt der Button die verfügbare Breite. Lesemodus starten schließt die Toolbar und öffnet einen separaten Vollbild-Lesedialog. Er wird niemals in der geöffneten Toolbar verschachtelt. Nach dem Beenden wird der Lesemodus nicht mehr als aktive Funktion markiert oder mitgezählt. Die zuletzt gewählte Darstellung bleibt für den nächsten Start vorausgewählt und lässt sich weiterhin mit Alle zurücksetzen löschen.

Der Reader bevorzugt das main-Element der Seite, danach [role="main"] und schließlich den aussagekräftigsten article-Bereich. Fehlen diese semantischen Bereiche, prüft er bekannte WordPress- und Page-Builder-Inhaltscontainer und zuletzt den gefilterten Seiteninhalt. Er übernimmt aussagekräftige Überschriften, Absätze, Listen, Zitate, Links, Tabellen, Beschriftungen und nicht doppelte informative Bildalternativen. Inhalte, die nur bis zum Auslösen einer erkannten Scroll- oder Einblendanimation verborgen sind, werden auch ohne vorheriges Scrollen übernommen. Header, Navigation, Sidebars, Footer, Dialoge, Toolbar-UI, semantisch oder dauerhaft per CSS versteckte Inhalte, an responsiven Breakpoints ausgeblendete Varianten, geschlossene Detailinhalte, Skripte, Styles, Formulare, Werbung und Cookie-Overlays werden auch beim Rückfall ausgeschlossen. Doppelte IDs, Event-Attribute und unsichere interaktive Zustände werden aus der Kopie entfernt. Das Originaldokument wird nicht verändert. Wenn auch der gefilterte Rückfall keinen sinnvollen Inhalt enthält, bleibt die Toolbar offen und meldet das Problem. Beim Schließen des Lesemodus kehrt der Fokus zum Toolbar-Trigger zurück.

Vorlesen

Das Öffnen von Vorlesen startet niemals Audio. Zuerst wählt der Besucher:

  • Hauptinhalt
  • Ab aktuellem Abschnitt
  • Markierten Text, sofern eine nicht leere Auswahl innerhalb des Hauptinhalts besteht
  • Geschwindigkeit
  • Verfügbare Stimme

Die drei Startpunkt-Schalter sind kompakt gehalten, bleiben aber mindestens 76 px hoch. Auch zweizeilige Übersetzungen, Auswahlhaken, deaktivierter Zustand und sichtbarer Tastaturfokus bleiben vollständig erhalten. Solange kein geeigneter Text markiert wurde, steht der zugehörige Hinweis direkt in der Karte Ausgewählter Text; mit einer gültigen Auswahl verschwindet er. Bei voller Breite stehen die Karten in einer vollständigen Dreierspalte und fließen abhängig von der Toolbar-Breite auf zwei beziehungsweise eine Spalte um. Geschwindigkeit und Stimme bilden ein einziges gemeinsames Einstellungsfeld: auf breiten Toolbars zwei gleich breite Spalten, auf schmalen Toolbars untereinander. Dieses Feld bleibt beim Wechsel zwischen Vorbereitung und Wiedergabe dasselbe; es wird nicht doppelt gerendert. Vorlesen starten nutzt die gesamte verfügbare Breite.

Beim Klick auf den schwebenden Toolbar-Button kann der Browser die sichtbare Textmarkierung durch den Fokuswechsel aufheben. Die Toolbar sichert deshalb eine gültige Auswahl aus dem Hauptinhalt bereits vor diesem Wechsel. Der Startpunkt Markierter Text bleibt in der geöffneten Vorleseansicht verfügbar; beim Schließen wird die Zwischenspeicherung verworfen. Entfernte oder nicht mehr zum Hauptinhalt gehörende Quellen werden nicht vorgelesen.

Erst Vorlesen starten erzeugt Sprache. „Ab aktuellem Abschnitt“ beginnt am lesbaren Block mit Tastaturfokus. Andernfalls verwendet die Funktion zuerst den Block auf einer Linie bei 35 % der Viewport-Höhe, danach den ersten Block unter dieser Linie und schließlich den ersten lesbaren Abschnitt. Überschriften, Absätze, Listenpunkte, Zitate, Beschriftungen, sinnvolle Bildalternativen und Tabelleninhalte bilden eine begrenzte Warteschlange. Jeder Abschnitt behält die nächstgelegene Seitensprache.

Während der Wiedergabe zeigt der Player Inhaltstitel, eine eigene Zeile für die Abschnittsnummer, Fortschrittsbalken und Prozentwert, aktuellen Text sowie Zurück, Pause/Fortsetzen, Weiter, Stopp und Zum aktuellen Absatz. Das gemeinsame Feld für Geschwindigkeit und Stimme bleibt darunter sichtbar und bedienbar. Die Geschwindigkeit verwendet in jeder Breite denselben Minus/Wert/Plus-Stepper mit angekündigtem Wert und deaktivierten Grenzbuttons. Der Header zeigt statt der Einrichtungsbeschreibung den schriftlichen Wiedergabestatus. Der aktuelle Text steht in einem Lesefenster mit fester Höhe: Kurze Texte lassen den reservierten Raum bestehen, lange Texte bleiben vollständig erhalten und können innerhalb des Fensters gescrollt werden. Dadurch behalten die vier gleich großen rechteckigen Wiedergabebuttons ihre Position; Pause beziehungsweise Fortsetzen wird als aktive Primäraktion hervorgehoben. Während der Wiedergabe zeigt die Fußzeile Abschnittsstatus, Vorlesen beenden und Toolbar schließen statt der allgemeinen Aktionen; auf schmalen Toolbars bleibt dort nur die breite Aktion Vorlesen beenden, weil Zurück und Schließen im festen Header erreichbar sind. Der aktuelle Absatz erhält einen ruhigen Hintergrund und einen deutlichen seitlichen Rahmen, ohne den Tastaturfokus während des Vorlesefortschritts zu verschieben. Ein Klick auf Zum aktuellen Absatz schließt bei Bedarf die Toolbar, lässt den kompakten Player aktiv, scrollt den Originalabsatz mittig ins Sichtfeld und setzt den Fokus dorthin. Wenn die Sprach-Engine verlässliche Grenzereignisse liefert, kann zusätzlich das aktuelle Wort oder der aktuelle Satz markiert werden; die Absatzmarkierung bleibt immer der verlässliche Rückfall.

Auf Geräten mit Maus oder einem anderen präzisen Zeiger erhalten neutrale Bedienelemente im großen und kompakten Player beim Überfahren eine hellblaue Fläche mit Akzentrahmen. Die blaue Primäraktion verwendet einen stärkeren Akzent; deaktivierte Bedienelemente bleiben unverändert.

Unter Seitenposition bleibt Zum aktuellen Absatz als separater einmaliger Sprung verfügbar. Daneben erscheint Automatisch folgen als dauerhafte Einstellung mit Hilfetext, schriftlichem Zustand An/Aus und Schalter; dieselbe Einstellung steht auch im kompakten Player zur Verfügung. Beim Einschalten wird die Quellseite sichtbar; anschließend zentriert die Funktion einen neu vorgelesenen Absatz nur dann, wenn er den gut sichtbaren mittleren Viewport-Bereich verlässt. Der Tastaturfokus bleibt auf dem zuletzt verwendeten Bedienelement, Pausieren verursacht keine Bewegung und die Einstellung für reduzierte Bewegung wird beachtet.

Das Schließen der Toolbar beendet die Wiedergabe nicht. Ein kompakter beschrifteter Player bleibt sichtbar und per Tastatur bedienbar. Auf Desktop und Smartphone verwendet er dieselbe Anordnung: Zurück, Pause/Fortsetzen und Weiter bilden eine verbundene Gruppe; daneben stehen Stopp, Zum aktuellen Absatz und die etwas breitere Schaltfläche Automatisch folgen mit ausgeschriebenem An/Aus-Zustand und Haken im aktiven Zustand. Auf Smartphones dockt derselbe Player als nicht-modales Bottom Sheet über die sichtbare Breite am unteren Rand des aktuellen Browser-Sichtbereichs an und berücksichtigt die Geräte-Safe-Area. Alle Ziele bleiben dort mindestens 44 px groß. Beide Gruppen stehen in einer Zeile, solange der verfügbare Platz einschließlich übersetzter Zustände ausreicht; andernfalls rückt nur die zweite Gruppe darunter. Ein unten platzierter Toolbar-Button rückt über das Sheet, damit beide Bedienelemente erreichbar bleiben; die Seite bleibt für die Absatznavigation bedienbar. Der Player verwendet dasselbe Audiowellen-Symbol wie die Vorlesen-Karte, und alle Aktionen besitzen sichtbare Lucide-Symbole sowie zugängliche Namen beziehungsweise Zustände. Stopp, das Verlassen der Seite, ein nicht behebbarer Fehler oder Alle zurücksetzen beendet die Warteschlange und entfernt alle Markierungen. Verspätete Ereignisse einer früheren Wiedergabe werden ignoriert.

Die erste Umsetzung verwendet den Sprachdienst des Browsers oder Betriebssystems. EZZE WCAG Pro sendet weder eine Vorleseanfrage noch den Seitentext an einen EZZE-Endpunkt. Je nach Browser, Betriebssystem und gewählter Stimme kann die Verarbeitung trotzdem einen Onlinedienst dieses Anbieters verwenden. Stellt der Browser keine Sprachausgabe bereit, zeigt die Toolbar den verständlichen Status Nicht verfügbar statt eines funktionslosen Start-Buttons.

Fokus

Die Detailansicht Fokus gruppiert vier unabhängig auswählbare Kacheln unter Fokus sichtbar machen und Lesen führen. Jede Kachel verbindet eine Vorschau mit einer kurzen Erklärung. Inaktive Kacheln bleiben neutral; eine aktive Kachel wird durch Akzentrahmen, Hintergrund und Häkchen gekennzeichnet. Das zugrunde liegende Kontrollkästchen stellt Zustand und Tastaturbedienung vollständig bereit:

  • Kontrastreicher Fokusring – ersetzt die vorhandene Fokusmarkierung durch einen zweifarbigen :focus-visible-Ring, der auf hellen und dunklen Hintergründen sichtbar bleibt
  • Zusätzliche gelbe Fokusmarkierung – fügt um das fokussierte Bedienelement eine gelbe Flächenmarkierung hinzu, ohne den Fokusring zu ersetzen; sind beide Optionen aktiv, erscheint die Markierung außerhalb des vollständigen zweifarbigen Rings
  • Leselinie – stellt eine horizontale Orientierungshilfe bereit, die sich per Zeiger, Touch oder Tastatur positionieren lässt
  • Lesemaske – dunkelt die Seite ober- und unterhalb eines freien Lesefensters ab, das Zeiger, Touch oder Tastatur folgt, ohne die Bedienung zu blockieren

Diese Präferenzen fügen normalem Seitentext kein tabindex hinzu und verändern niemals die Fokusreihenfolge.

Bewegung

Bewegung reduzieren ist ein direkter Schalter. Er unterdrückt nicht notwendige Animationen, Übergänge, Parallax-Effekte und sanftes Scrollen, lässt aber bedeutsame Fortschritts- und Statusanzeigen bestehen. Die Toolbar unterscheidet zwischen einer Besucherwahl und einer aktiven Systemeinstellung prefers-reduced-motion. Eine optional vom Administrator aktivierte jQuery-Unterdrückung wird vollständig rückgängig machbar ein- und ausgeschaltet.

Bilder

Bilder ausblenden bleibt als optionales direktes Werkzeug verfügbar. Es respektiert die vom Administrator konfigurierten SVG-, Bild- und Hintergrundausnahmen und verwendet die gespeicherte Ersatzfarbe. Die Funktion bleibt von Farben getrennt, weil Inhalte ausblenden eine andere Bedeutung hat als ihre Farbdarstellung zu ändern.

Tastaturhilfe

Die Tastaturhilfe öffnet eine Detailansicht und erklärt ausschließlich tatsächlich vorhandene Steuerungen: Tab, Umschalt+Tab, Enter/Leertaste, Escape sowie die vom Administrator konfigurierten Plugin-Kürzel. Standardtasten und konfigurierte Website-Tastenkürzel stehen in zwei klar benannten Bereichen. Jede Kombination zeigt einzelne Tastenkappen neben ihrer Erklärung; in schmalen Ansichten wird die Erklärung darunter angeordnet. Die Toolbar erfindet keine nicht konfigurierbaren globalen Buchstaben-Shortcuts.

Profile und Speicherung

Der Button Profil: … im Kopfbereich der Toolbar öffnet vier direkt nutzbare Unterstützungsprofile. Sie sind Ausgangspunkte und keine Diagnosen. Es werden nur Werkzeuge angewendet, die der Administrator für die Website freigegeben hat:

  • Sehunterstützung – Textgröße 125 %, Kontrast Erhöht · Hell, unterstrichene Links, hervorgehobene Bedienelemente und der Kontrastreiche Fokusring
  • Leseunterstützung – Textgröße 110 %, ein schmaler warmer Lesemodus mit großem Zeilenabstand und die Leselinie
  • Tastatur und Fokus – Kontrastreicher Fokusring, Zusätzliche gelbe Fokusmarkierung und reduzierte Bewegung
  • Reizarme Ansicht – Ruhige Farben, reduzierte Bewegung und die Lesemaske

Das Anwenden eines Unterstützungsprofils ersetzt die aktuellen Toolbar-Präferenzen und aktualisiert Auswahlstatus, Profilname im Header, Funktionskarten und aktive Funktionsdetails sofort. Für 12 Sekunden steht Rückgängig bereit. Der gewählte Speicherbereich für Sitzung oder Gerät bleibt erhalten. Die erste spätere manuelle Anpassung ändert den Header zu Profil: Benutzerdefiniert. Ein Unterstützungsprofil kann weiter angepasst und anschließend unter einem eigenen Namen gespeichert werden.

Besucherpräferenzen unterstützen drei lokale Bereiche:

  • Nur für diese Sitzung – der aktive Zustand liegt in sessionStorage
  • Auf diesem Gerät merken – der aktive Zustand liegt in localStorage
  • Benanntes Profil – bis zu zehn Profile mit 1 bis 40 Zeichen langen Namen, nachdem Leerzeichen am Anfang und Ende entfernt wurden; Speichern, Laden, Umbenennen und Löschen sind bewusste Aktionen

Auf dem Desktop stehen die kompakten Speicheroptionen und die Verwaltung benannter Profile in zwei gleichrangigen Bereichen nebeneinander; bei schmaler Toolbar werden sie zu einer gut bedienbaren Spalte. Profile verlassen niemals den Browser. Beim Wechsel zwischen Sitzungs- und Gerätespeicherung wird der aktuelle Zustand verschoben und der überholte aktive Datensatz im anderen Speicher entfernt. Das Laden eines benannten Profils ändert den gewählten Speicherbereich nicht. Beschädigte oder unbekannte gespeicherte Daten fallen sicher auf die Standardwerte zurück. Präferenzen aus dem früheren Toolbar-Zustand werden soweit möglich automatisch migriert. Rückgängig nach Alle zurücksetzen stellt sowohl den erfassten Präferenzzustand als auch seinen gewählten Speicherbereich wieder her.

Einstellungen für Administratoren

Die Toolbar-Einstellungen bestimmen, welche Werkzeuge Besucher sehen und wie Trigger und Panel aussehen. Die Verfügbarkeit ist in Kernwerkzeuge, Lesen und Fokus und Zusätzliche Werkzeuge gegliedert. Innerhalb jeder Gruppe richtet sich die Anordnung nach der tatsächlich verfügbaren Breite des Einstellungsbereichs: Sie bleibt für gut lesbare Bezeichnungen, Beschreibungen, Folgeoptionen und Schalter einspaltig und wechselt erst bei großzügigem Platz direkt in drei gleichwertige Spalten. Die kompakte Vorschau zeigt die Übersicht; die interaktive Vorschau verwendet die echte Frontend-Toolbar und aktualisiert sich sofort. Die Funktionskarte Vorlesen weist zusätzlich darauf hin, dass alle Stimmen vom Browser oder Betriebssystem des Besuchers bereitgestellt werden, eine gewählte Stimme den Text über einen Onlinedienst verarbeiten kann und die Vorlesefunktion von EZZE WCAG Pro weder die Vorleseanfrage noch den Seitentext an einen eigenen Cloud-Dienst überträgt.

Basis (Free):

  • Toolbar global aktivieren
  • Desktop- und Mobile-Anzeige getrennt steuern
  • Mobilen Breakpoint einstellen
  • Jedes Besucherwerkzeug einzeln ein- oder ausschalten
  • Die Lesemaske getrennt von der Leselinie anbieten und die Höhe ihres freien Lesefensters festlegen
  • Footer ausblenden, eine Barrierefreiheitserklärung verlinken oder EZZE-Branding bewusst aktivieren

Visuelle Anpassung (ab Basic):

  • Trigger-Position, Offset, Form, Radius, Schatten sowie Icon-, Hintergrund- und Rahmenfarbe
  • Panel-Position, Offset, Titel, Schließen-Button und Overlay
  • Festes helles oder dunkles Farbschema, Radius, Schatten und Typografie

Die Farbgebung der geöffneten Toolbar, der Toolbar-Meldungen und des kompakten Vorleseplayers ist in beiden Farbschemata festgelegt, kontrastgeprüft und an den Mockups ausgerichtet. Der schwebende Trigger bleibt separat anpassbar: Icon-, Hintergrund- und Rahmenfarbe werden in beiden Vorschauen und im Frontend identisch angewendet. Wähle Kombinationen mit mindestens 3:1 Kontrast zwischen Icon und Hintergrund sowie zwischen Button-Begrenzung und umgebender Seite. Die Besucherfunktion Farben bleibt davon unabhängig und verändert weiterhin ausschließlich Seiteninhalte, niemals die Toolbar selbst.

Score-Tooltip (ab Plus):

  • Zeigt beim Hover über den geschlossenen Trigger den gespeicherten Score des Barrierefreiheitstests; bei geöffneter Toolbar bleibt er ausgeblendet

Bei bestehenden Installationen bleiben die Trigger-Farben, das gewählte helle oder dunkle Farbschema, nichtfarbliche Designwerte sowie Medien- und Bildausnahmen erhalten. Frühere frei definierte Flächen-, Text-, Akzent-, interne Rahmen- und Overlayfarben der geöffneten Toolbar werden nicht mehr angewendet und bei der Migration aus der kanonischen Einstellung entfernt.

Besucheraktionen und Schließen

  • Ein erneuter Klick auf den Trigger schließt die geöffnete Toolbar.
  • Bei aktivem Overlay bleibt der Trigger darüber sichtbar und bedienbar.
  • Optionaler Schließen-Button, Klick außerhalb nach Konfiguration und Escape bieten klare Wege zum Schließen.
  • Die kompakte Aktion Toolbar-Button ausblenden befindet sich in der festen unteren Aktionszeile neben Alle zurücksetzen und Tastaturhilfe. Auf dem Handy wird sie platzsparend als beschriftetes Icon dargestellt; der zugängliche Name bleibt dabei vollständig erhalten. Sie verbirgt den Trigger für 24 Stunden, 7 Tage oder bis zur manuellen Wiederherstellung, und ihre Zeitoptionen öffnen sich über der Aktionszeile. Kurz erscheint Rückgängig. Tastaturnutzer können den Trigger mit Alt + Umschalt + A oder über die fokussierbare Wiederherstellungssteuerung zurückholen.
  • Der Footer-Link zur Barrierefreiheitserklärung kann eine WordPress-Seite oder eigene URL verwenden und im gleichen oder neuen Tab öffnen. Für einen neuen Tab erscheinen ein sichtbares Icon und ein Screenreader-Hinweis.

Hinweise zu Barrierefreiheit und Tests

Die Toolbar unterstützt persönliche Präferenzen für Farbnutzung, Kontrast, Reflow, Bewegung, Fokuswahrnehmung und Lesen. Sie ergänzt eine gute Umsetzung, ersetzt aber weder semantisches HTML, Beschriftungen, Tastaturzugang, Alternativtexte, Untertitel noch Korrekturen im Quellcode der Website.

Teste die konfigurierte Toolbar auf dem Desktop, bei 390 px und 320 px, im mobilen Querformat sowie bei 200 und 400 % Zoom. Prüfe reine Tastaturbedienung, sichtbaren Fokus, lange deutsche und französische Labels, reduzierte Bewegung, erzwungene Farben, 44-Pixel-Touchziele, alle Vorlesefunktionen, Profilspeicherung und dass keine Seitenpräferenz die Toolbar selbst umfärbt.

Verfügbar für: Alle Pläne Free

Visuelle Anpassung: ab Basic ab Basic

Score-Tooltip: ab Plus ab Plus

Fokussierte Leseansicht

Lesemodus