72 Stunden Zeit, ein Projekt und die Aufgabe, „die Welt ein Stückchen besser zu machen“: Das ist die Idee der 72-Stunden-Aktion des Bundes der Deutschen Katholischen Jugend (BDKJ) und seiner Jugendverbände. Gruppen aus ganz Deutschland legen dabei gleichzeitig los – sie legen Gärten an, bauen Spielplätze, gestalten Nachmittage im Seniorenheim oder setzen sich mit Geflüchteten für ihr Viertel ein. Wer mag, plant sein Projekt selbst („Do it!“); wer sich überraschen lassen will, erfährt seine Aufgabe erst zum Startschuss („Get it!“). Mitmachen kann jede Gruppe, ob im Verband organisiert oder nicht.
Bei der letzten Aktion 2024 waren rund 80.000 Kinder, Jugendliche und junge Erwachsene in 2.720 Gruppen dabei und haben mehr als 170.000 Menschen erreicht. Die nächste Aktion findet vom 10. bis 13. Juni 2027 statt – und dafür haben wir die Website 72stunden.de neu entwickelt.
Eine Website für sehr unterschiedliche Menschen
Auf 72stunden.de informieren sich Jugendliche und Gruppenleitungen, Eltern, Pfarreien und Kooperationspartner, Presse und Förderer. Viele kommen über das Smartphone, manche nutzen einen Screenreader oder brauchen große Schrift. Daraus ergaben sich drei Schwerpunkte: Datensparsamkeit, Barrierefreiheit und eine Darstellung, die auf jedem Bildschirm funktioniert.
Technische Grundlage ist TYPO3 13 LTS mit einem eigens entwickelten Site-Package. Die Anmeldung der Aktionsgruppen und die Teilnehmendenverwaltung stammen ebenfalls von uns – sie stellen wir in einem eigenen Beitrag vor.
Datensparsam von Anfang an
Wer 72stunden.de aufruft, verbindet sich zunächst nur mit 72stunden.de. Schriften, Grafiken und Skripte liegen auf dem eigenen Server – es gibt keine Google Fonts, kein eingebundenes Tracking und keine Verbindungen zu Dritten im Hintergrund. Alles, was darüber hinausgeht, startet erst nach Einwilligung:
- Besucherstatistik: Die Website nutzt Matomo statt Google Analytics – ohne Cookies, mit gekürzten IP-Adressen und erst, wenn Besucher:innen zugestimmt haben.
- Karte: Die Karte der Aktionsgruppen basiert auf offenen Kartendaten von OpenFreeMap statt auf Google Maps. Sie lädt erst nach Zustimmung. Der Hinweis steht direkt an der Karte und erklärt in einem Satz, was passiert: Die IP-Adresse geht an OpenFreeMap. Wer die Zustimmung später widerruft, sieht die Karte sofort wieder als Platzhalter – ohne die Seite neu zu laden.
- Videos: Auch YouTube-Videos laden erst nach Klick. Selbst die Vorschaubilder kommen über den eigenen Server, damit schon beim Seitenaufruf keine Daten an YouTube gehen.
Das klingt selbstverständlich, war es technisch aber nicht: Die Karte ist kein eingebettetes Fenster, das ein Cookie-Tool einfach blockieren könnte, sondern eine interaktive Anwendung. Wir haben deshalb eine eigene Einwilligungsschicht gebaut, die mit dem Cookie-Dialog der Website zusammenarbeitet und bestehende Entscheidungen – etwa zu Videos – nicht überschreibt.
Aktionsgruppen in der Nähe finden
Herzstück der Startseite ist die Karte mit allen angemeldeten Aktionsgruppen. Besucher:innen geben eine Postleitzahl oder einen Ort ein, wählen einen Umkreis zwischen 5 und 50 Kilometern und sehen sofort, welche Gruppen in der Nähe aktiv sind. Zusätzlich lässt sich nach Gruppennamen, Jugendverband, Bistum und Bundesland filtern. Farben zeigen die Aktionsform – „Do it!“, „Get it!“ oder Gemeinschaftsprojekt –, nah beieinanderliegende Gruppen werden zu Zahlen zusammengefasst.
Die Filter arbeiten vollständig im Browser und reagieren deshalb ohne Wartezeit. Nur der eingegebene Ortsname wird an den Suchdienst von OpenStreetMap geschickt, um ihn in Koordinaten zu übersetzen. Auf dem Smartphone bewegt man die Karte mit zwei Fingern – so bleibt das Scrollen durch die Seite mit einem Finger möglich, ohne dass man in der Karte hängen bleibt.
Barrierefreiheit: eingebaut statt nachgerüstet
Maßstab für 72stunden.de sind die Web Content Accessibility Guidelines (WCAG 2.1, Stufe AA). Eine gesetzliche Pflicht dazu besteht für die Aktion nicht – der BDKJ wollte trotzdem, dass alle jungen Menschen auch digital teilhaben können.
Einstellungen für alle. Über das Symbol oben rechts passen Besucher:innen die Website ihren Bedürfnissen an: hoher Kontrast, große Schrift, reduzierte Animationen, unterstrichene Links, mehr Abstand im Text, eine schmalere Lesespalte, eine besonders gut lesbare Schriftart und größere Bedienflächen. Die Auswahl merkt sich nur der eigene Browser – auf dem Server wird nichts gespeichert.
Lesbar auch im normalen Design. Der Kontrastmodus ist ein Zusatzangebot – auch die grüne Gestaltung selbst muss gut lesbar sein. Das helle Grün der Aktion erreicht auf Weiß aber nur einen Kontrast von 2,4 : 1, zu wenig für Text. Für Links und Schaltflächen im Inhalt nutzen wir deshalb einen dunkleren Ton aus derselben Farbfamilie mit 4,8 : 1; Zusatztexte wie Bildunterschriften haben wir ebenfalls kräftiger gesetzt.
Bedienbar ohne Maus. Ein Sprunglink führt direkt zum Inhalt, der Tastaturfokus ist überall sichtbar, Menüs schließen mit der Escape-Taste. Alle Bedienelemente sind echte Schaltflächen und Links, die Bereiche der Seite sind für Screenreader benannt. Formulare haben Beschriftungen, Fehlermeldungen werden angesagt, und der Browser darf Name und E-Mail-Adresse wieder automatisch ausfüllen.
Ehrliche Bestandsaufnahme. Wir haben die Website in einer Selbstbewertung Kriterium für Kriterium geprüft und die meisten Funde direkt behoben. Was noch fehlt, steht offen in der Erklärung zur Barrierefreiheit – zum Beispiel, dass die Kartenmarkierungen derzeit nur per Maus erreichbar sind.
Die Redaktion gehört dazu. Barrierefreiheit endet nicht beim Code: Ein fehlender Alternativtext oder ein Video ohne Untertitel lässt sich technisch nicht verhindern. Deshalb gibt es im TYPO3-Backend den Bereich „Inhalte für alle“ – einen kurzen Leitfaden, der der Redaktion direkt im Arbeitsalltag zeigt, worauf es bei Bildern, Links, Überschriften und Videos ankommt.
Auf jedem Bildschirm zu Hause
Die Website passt sich vom großen Monitor bis zum Smartphone an und lässt sich bis auf 200 Prozent vergrößern, ohne dass Inhalte verloren gehen.
Auf dem Handy bleibt die Kopfzeile mit Suche, Barrierefreiheits-Einstellungen und Menü immer erreichbar.
Die Suche: Ergebnisse schon beim Tippen
Die Suche durchsucht Seiten, Meldungen, Materialien, häufige Fragen sowie Aktionsgruppen, Diözesanverbände und Koordinierungskreise – und zeigt Ergebnisse schon während der Eingabe, sortiert nach Kategorien und filterbar. Ein Treffer in den häufigen Fragen öffnet auf der Zielseite direkt die passende Antwort. Die Suche läuft vollständig auf dem eigenen Server, ein externer Suchdienst ist nicht im Spiel.
Die Technik im Überblick
- TYPO3 13 LTS mit eigenem Site-Package und PHP 8.4
- Frontend mit TypeScript und Vite
- Karte mit MapLibre und offenen Kartendaten von OpenFreeMap, Ortssuche über OpenStreetMap
- Statische Zwischenspeicherung der Seiten für kurze Ladezeiten
- Einwilligungen über den cf_cookiemanager, ergänzt um eine eigene Einwilligungsschicht für die Karte
- Statische Code-Analyse, automatische Prüfung vor jedem Commit und Veröffentlichung neuer Versionen per Deployment-Skript
Und die Anmeldung?
Gruppen melden sich für die Aktion über ein eigenes Verwaltungsportal an, pflegen dort ihre Gruppendaten und Projekte und können ein Anmeldeformular für ihre Teilnehmenden bereitstellen. Auch dieses System haben wir entwickelt – es ist die Datenquelle für Karte und Gruppenseiten. Wir stellen es in einem eigenen Beitrag vor.
Ihre Website – für alle
Sie planen eine Kampagnen- oder Verbandswebsite und möchten, dass sie für alle Menschen funktioniert und mit den Daten Ihrer Besucher:innen sorgsam umgeht? Sprechen Sie uns an – mehr zu unserem Ansatz finden Sie auch unter Barrierefreiheit und Webdesign. Sie erreichen uns telefonisch unter 06131/636669-0 oder per E-Mail an kontakt@visualtech.de.
