← zurück zur Übersicht

Baukasten: interaktive Komponenten

Zehn Bausteine, die auf dieser Website eingesetzt werden können, jeder hier wirklich bedienbar und nicht nur abgebildet. Alle laufen ohne fremde Bibliothek: nichts wird von einem fremden Server geladen, es gibt keinen Build-Schritt, und ohne JavaScript bleibt jeder Baustein lesbar.

Unter jedem Baustein steht, wo er auf dieser Seite hingehört, womit er gebaut ist und was für die Bedienung per Tastatur und Vorlesesoftware gilt. Wer „weniger Doodle, mehr Bedienen" will, sucht sich hier aus, was in die Entwürfe wandert.

1Reiter (Tabs) Für Inhalte, die gleichrangig nebeneinanderstehen und die niemand alle lesen will. Auf dieser Seite: „Was heißt das für uns" (Verein · Eltern · Kind), Tagesablauf nach Altersgruppe, Beiträge nach Betreuungsform.

Träger sind die Eltern, nicht die Stadt

Der Kindergarten gehört dem Verein, und im Verein sind die Familien. Was hier entschieden wird, entscheiden Menschen, die ihre Kinder jeden Morgen selbst bringen.

Technik: Knöpfe mit role="tab", 30 Zeilen Javascript. Ohne Javascript sind alle Felder sichtbar untereinander. Tastatur: Pfeiltasten wechseln, Pos1 und Ende springen an den Rand. Ansage der aktiven Auswahl über aria-selected.
2Aufklapper, sich gegenseitig schließend Für Fragen und Ämter: viel Text, der selten alle interessiert. Auf dieser Seite: häufige Fragen, „Wer macht was im Vorstand", Schließzeiten.
Vorstand

Vertritt den Verein nach außen, führt die Geschäfte und wird in der Mitgliederversammlung gewählt.

Elternrat

Gewählte Elternvertretung, Bindeglied zwischen Familien und Team.

Dienste im Alltag

Einkaufen, Wäsche, kleine Reparaturen, Begleitung bei Ausflügen. Wer was übernimmt, wird gemeinsam verteilt.

Technik: nativ, ohne eine Zeile Javascript: <details name="…"> schließt die Geschwister von selbst. Seit 2024 in allen Browsern. Tastatur: von Haus aus fokussierbar, Leertaste klappt auf. Vorlesesoftware sagt „eingeklappt/ausgeklappt" an, ohne dass man etwas dafür tut.
3Zeitstrahl, der beim Scrollen mitläuft Für alles mit Reihenfolge: Vereinsgeschichte seit 1991, der Weg zum Platz in vier Schritten, der Tagesablauf.
1991Aus einer Spielgruppe wird ein KindergartenEltern in Meiderich gründen, was es sonst nicht gab.
1992Gemeinnütziger VereinAus der Gruppe wird ein eingetragener Träger.
1993Anerkannter Träger der freien JugendhilfeSeither arbeitet der Verein auf eigener Grundlage.
heuteGetragen von den FamilienBis zu 27 Kinder, ein Team, viele Hände.
Technik: ein Beobachter meldet, welcher Punkt im Bild ist; die Linie füllt sich entsprechend. Ohne Javascript steht der Strahl vollständig gefüllt da. Bewegung: Bei „weniger Bewegung" in den Systemeinstellungen füllt sich die Linie ohne Übergang.
4Zahlen, die beim Erscheinen hochzählen Für das Zahlen-Band: Gründungsjahr, Gruppengröße, Alter, Öffnungszeiten. Der Blick bleibt hängen, ohne dass etwas blinkt.
1991gegründet
27Kinder
3–6Jahre
35 JahreErfahrung
Technik: der Endwert steht im HTML und wird nur beim ersten Sichtbarwerden animiert. Wer die Seite ohne Javascript liest, sieht sofort die richtige Zahl. Bewegung: Bei „weniger Bewegung" wird nicht gezählt. Die Zahl ist ein <output>, damit Vorlesesoftware nicht bei jedem Zwischenschritt spricht.
5Schieberegler, der etwas ausrechnet Für die härteste Frage der Eltern: „Was kommt auf mich zu?" Stunden im Monat, Beitrag je Kind, Betreuungszeit.
3 Stunden im Monat, das sind 36 im Jahr.

Achtung, Platzhalter: Die Zahl aus der Beitragsordnung 2025/2026 (drei Stunden je Familie und Monat) ist vom Verein noch nicht bestätigt. Der Baustein steht hier für die Technik, nicht für die Angabe.

Technik: ein <input type="range">, zehn Zeilen Javascript. Ohne Javascript bleibt der Regler ein Regler und der Ausgangswert steht da. Tastatur: Pfeiltasten verstellen den Wert, das Ergebnis wird über aria-describedby mitgesprochen.
6Erklärblase am Wort Für Fachwörter, die Eltern nicht kennen müssen: „teiloffen", „situationsorientiert", „Elternstunden", „KiBiz". Erklärung genau dort, wo das Wort steht.

Wir arbeiten , und die Gruppe bleibt trotzdem der feste Hafen jedes Kindes.

Teiloffen
Jedes Kind gehört zu einer festen Gruppe, darf aber in andere Bereiche wechseln, wenn es dort etwas entdecken will.
Technik: die Popover-Schnittstelle des Browsers plus Ankerpositionierung, beides seit 2025 überall verfügbar. Kein Javascript, kein Fremdcode. Wo der Browser es nicht kennt, steht die Erklärung als normaler Text darunter. Tastatur: mit Tabulator erreichbar, Esc schließt. Der Browser übernimmt Fokusführung und Ansage.
7Filter-Chips Für Listen mit Arten: Termine (Fest, Elternabend, Schließtag), Downloads (Formular, Konzept, Satzung), Aktivitäten.
15.08.Sommerfest
02.09.Elternabend
11.11.St. Martin
20.11.Mitgliederversammlung
Technik: Radioknöpfe und Geschwisterselektoren, ohne Javascript. Die Liste selbst kommt weiter aus dem Verwaltungsbereich. Achtung: Filtern darf nichts verstecken, was es sonst nirgends gibt. „Alle" bleibt deshalb der Ausgangszustand.
8Karte, die sich umdreht Für Personen und Ämter: vorne Name und Rolle, hinten der Satz dazu. Auf dieser Seite: Team, Vorstand, „Wer macht was".
Technik: CSS-Drehung, am Zeiger über :hover, per Tastatur über :focus-visible, am Telefon über Antippen. Achtung: Nichts Wichtiges darf nur hinten stehen. Bei „weniger Bewegung" wird umgeschaltet statt gedreht.
9Stehende Bühne, laufender Text Für eine Erzählung in drei Schritten: „Ein Tag bei uns", „So wird aus einer Anfrage ein Platz", der Verein in drei Sätzen.
Die Eltern geben Stunden

Die Eltern geben Stunden

Jede Familie bringt sich im Monat ein. Das hält den Kindergarten in Gang.

Der Verein trägt sich

Was Eltern selbst tun, muss niemand bezahlen. Der Verein bleibt handlungsfähig.

Die Kinder merken es

Sie sehen ihre Eltern im Haus, beim Fest, beim Reparieren. Das prägt mehr als jedes Konzept.

Technik: position: sticky plus ein Beobachter, der den Titel wechselt. Auf schmalen Schirmen wird daraus eine normale Abfolge. Achtung: Nur für Inhalte, die wirklich aufeinander aufbauen. Sonst ist es ein Effekt ohne Aussage.
10Umschalter zwischen zwei Ansichten Für dieselbe Sache in zwei Auflösungen: Woche und Jahr, Beitrag monatlich und jährlich, kurze und ausführliche Fassung.
Montag bis Freitag, 7:30 bis 14:30 Uhr.
Bringzeit bis 9:00 Uhr, erste Abholung ab 13:00 Uhr.
Feste und Ausflüge übers Jahr.
Sommerfest, St. Martin, Plätzchenbacken, Kinderflohmarkt.
Technik: Radioknöpfe, ohne Javascript. Aussehen wie ein Schalter, Bedienung wie eine Auswahl. Tastatur: Pfeiltasten wechseln, weil es echte Radioknöpfe sind. Kein eigener Code, keine eigenen Fehler.

Was hier bewusst fehlt: Karussells (verstecken Inhalt hinter Bewegung), automatisch laufende Bildwechsel, Zähler, die bei jedem Scrollen neu starten, und alles, was ohne Javascript verschwindet. Die Regel für diese Seite bleibt: ohne Javascript lesbar, mit Javascript angenehmer.