Zum Inhalt springen
Conword Accessibility Widget

Accessibility Widget: kostenlos, mit einem Script-Tag.

Eine Werkzeugleiste für bessere Lesbarkeit: Ihre Besucherinnen und Besucher stellen Schriftgröße, Kontrast und Abstände selbst ein oder lassen sich Texte vorlesen. Sie fügen dafür eine Zeile in Ihre Website ein.

  • Kostenlos und Open Source unter MIT-Lizenz
  • Kein Konto, kein Backend: Einstellungen speichert der Browser der Besucher
  • Oberfläche vollständig auf Deutsch und Englisch
Das geöffnete Menü des Accessibility Widgets auf einer Beispielseite: Vorlesen, Lesehilfe, Animationen stoppen, großer Cursor, Schriftgröße.
Was das Widget kann

Was Besucher mit dem Widget einstellen

Jede Einstellung gilt nur im Browser der Person, die sie wählt. Ihre Seite und Ihre Inhalte bleiben unverändert.

Schrift

Schriftgröße, Schriftstärke, Zeilenhöhe und Zeichenabstand anpassen. Eine Dyslexie-Schrift für Menschen mit Leseschwäche.

Orientierung

Überschriften und Links hervorheben, Lesehilfe, großer Cursor. Animationen auf der Seite stoppen.

Farben und Kontrast

Dunkler, heller oder hoher Kontrast. Monochrom, niedrige oder hohe Farbsättigung.

Vorlesen

Liest Texte der Seite mit der Sprachausgabe des Browsers vor: Wiedergabe, Pause, Tempo und Stimme wählbar.

Das Widget ist eine Hilfe zum Lesen. Es ersetzt keine Hilfstechnik wie einen Screenreader und keine barrierefreie Umsetzung Ihrer Website.

Einbinden

So binden Sie das Widget ein

Stellen Sie Position, Größe und Farben ein. Das Widget unten links auf dieser Seite zeigt jede Änderung sofort. Den fertigen Code fügen Sie vor dem schließenden </body>-Tag Ihrer Website ein.

Konfigurator

Alle data-asw-*-Angaben, die das Widget heute versteht. Jede Änderung zeigt das Widget dieser Seite sofort.

Verhalten

Grundparameter für Position, Größe, Sprache und Abstände.

data-asw-lang

Leer lässt das Widget Sprache aus Seite bzw. Browser ableiten.

data-asw-position

Legt die Ecke fest, in der der Launcher erscheint.

data-asw-offset

Horizontaler Abstand in Pixeln.

data-asw-offset

Vertikaler Abstand in Pixeln.

data-asw-size

Launcher-Größe in Pixeln.

Basisfarben

Die Grundfarben bestimmen Branding und abgeleitete Theme-Werte.

data-asw-color-primary

Primäre Aktionen, Titel und starke Hervorhebungen.

data-asw-color-accent

Sparsame Akzentfarbe für kleine markante Signale.

data-asw-color-secondary

Unterstützende Zustände, Fokus und Selektion.

data-asw-color-neutral-light

Subtile Flächen und ruhige Hintergründe.

data-asw-color-base

Grundfläche und Gegenfarbe auf dunklen Bereichen.

Semantische Theme-Farben

Optionale Overrides. Leer bedeutet: aus den Basisfarben ableiten.

data-asw-color-text-primary

Primäre Schrift- und Icon-Farbe.

data-asw-color-text-inverse

Textfarbe auf dunklen Flächen.

data-asw-color-surface

Standardfläche für Karten und Menüs.

data-asw-color-surface-subtle

Ruhigere Sekundärflächen.

data-asw-color-border

Normale Rahmen und Trennlinien.

data-asw-color-border-strong

Betontere Rahmen und Outline-Zustände.

data-asw-color-focus

Fokus-Ringe und relevante Fokusmarkierungen.

data-asw-color-selected

Aktive bzw. ausgewählte Zustände.

Ihr Code

Kopieren und vor </body> einfügen.

Gut zu wissen

  • Der Code enthält nur Angaben, die vom Standard abweichen.
  • Ohne Angaben erscheint das Widget unten links, in der Sprache Ihrer Seite oder sonst des Browsers.
  • Das Script lädt mit defer und hält den Seitenaufbau nicht auf.
So sieht es aus

Das Widget auf einer Website

Aufnahmen des echten Widgets auf einer Beispielseite.

Schrift auf 120 % vergrößert, Überschriften und Links hervorgehoben.

Beispielseite mit Schriftgröße 120 Prozent, Überschriften und Links sind blau umrahmt; links das geöffnete Menü.

Dunkler Kontrast: Texte erscheinen weiß auf Schwarz. Unten links der Button, der das Menü öffnet.

Beispielseite im dunklen Kontrast: Texte weiß auf schwarzem Grund; unten links der runde Button des Widgets.
FAQ

Häufige Fragen

Erfüllt das Widget automatisch WCAG- oder ADA-Anforderungen?

Nein. Kein Overlay und kein Accessibility-Widget kann eine barrierefreie Umsetzung Ihrer Website ersetzen. Das Widget kann Besucherinnen und Besuchern helfen, ersetzt aber keine inhaltliche, technische und semantische Arbeit an der Barrierefreiheit.

Was ist der Haken, wenn es dauerhaft kostenlos ist?

Kein Haken. Conword stellt das Widget unter der MIT-Lizenz bereit, weil Werkzeuge für Barrierefreiheit nicht künstlich knapp sein sollten.

Ist das Widget auf Performance ausgelegt?

Ja. Das Script lädt mit defer und ist so gebaut, dass es den ersten Seitenaufbau möglichst wenig verzögert.

Kann ich Farben und Button-Position anpassen?

Ja. Über data-asw-*-Angaben am Script-Tag stellen Sie Farben, Position, Abstand, Größe und Sprache ein. Der Konfigurator oben erzeugt den passenden Code.

Accessibility Widget jetzt einbinden.

Kostenlos, ohne Konto, mit einem Script-Tag.