← Design & Entwicklung
Design & Entwicklung · läuft lokal

Barrierefreier CSS-Kippschalter-Generator

Erstellen Sie einen responsiven, auf Kontrollkästchen basierenden Umschalter mit stimmiger Geometrie von Schiene und Schieber, aktiven Farben und einer per Tastatur sichtbaren Fokusbehandlung.

Fertig. Ihre Arbeitsdaten bleiben in diesem Browser.

Warum dieses Tool nützlich ist

Gestalten Sie eine Ein-/Aus-Einstellung als vertrauten Schalter, während für Formulare, Bildschirmleseprogramme und die Tastaturbedienung ein echtes Kontrollkästchen erhalten bleibt.

So funktioniert es

Die Abmessungen von Spur und Daumen werden zusammen validiert, der Weg des Daumens wird aus ihrer Differenz berechnet und die Live-Beispieldatei bleibt im aktuellen Browser-Tab.

Praxisbeispiel

Erstellen Sie einen 56 x 30 Pixel großen Benachrichtigungsschalter, dessen grüner aktivierter Zustand den 24-Pixel-Daumen genau 26 Pixel über die Schiene bewegt.

Validierung

Die Berechnung ist deterministisch und erklärt Validierungsfehler, anstatt ungültige Eingaben stillschweigend zu ändern.

Datenschutzgrenze

Eingabe und Ausgabe bleiben in diesem Tab. Kopieren und Herunterladen erfolgen über Browser-APIs ohne Server-Upload.

Ergebnispass

Jeder Durchlauf meldet seinen Werkzeugmodus, Zeitstempel sowie Eingabe-/Ausgabegröße, damit transformierte Daten geprüft werden können.