9592 Solutions
Alle Arbeiten

Demonstrator / Arbeitsprobe

Eine barrierearme, selbstaktualisierende Angebotskarte für ein bundesweites Beratungsnetzwerk

Ein bereitgestellter Prototyp, den Sie im Browser testen können. Es ist eine Arbeitsprobe, kein Kundenprojekt und kein Produkt.

Ausgangslage

Ein bundesweites Beratungsnetzwerk betreibt eine interaktive Karte mit weit über tausend regionalen und bundesweiten Unterstützungsangeboten. Die Aktualität hing an einer manuellen Strecke: Eintragende füllten ein Formular aus, das Team prüfte jeden Eintrag von Hand, und das Ergebnis wurde in eine Tabelle überführt, die die Karte speiste.

Bei dieser Menge skalierte die Kette nicht mehr. Jede Aktualisierung kostete redaktionelle Zeit, und auf der öffentlichen Karte stand zeitweise der Hinweis, dass sich Aktualisierungen verzögern.

Vorgehen

  • Datenpfad neu gebaut: An die Stelle der Tabelle trat ein dokumentiertes relationales Schema, automatisiertes Geocoding und eine Eingabemaske, in der Eintragende Datensätze direkt anlegen und ändern.
  • Karte zugänglich und mobile-first: eine externe Single-Page-Anwendung, per iframe eingebunden, Kartendarstellung auf OpenStreetMap-Kacheln ohne US-Cloud-Bindung, mit clientseitiger Filterung nach Kategorie, Unterkategorie, Thema und Umkreis.
  • Orientierung an WCAG 2.1 AA: per Tastatur bedienbare, beschriftete Filter und die Ergebnisliste als gleichwertiger Zugang zur Karte für Screenreader-Nutzende. Nachweis über automatisierte Barrierefreiheits-Prüfungen und ein Mobile-Performance-Gate.
  • Interaktive Angebotskarte von Deutschland mit gebündelten Standort-Markern; jeder Cluster zeigt die Anzahl der enthaltenen Angebote.
    Bundesweite Karte mit kategorienbewusster Bündelung der Marker.
  • Angebotskarte mit der Filterleiste, in der Modalitäts- und Zielgruppen-Filter aktiv sind; die Cluster aktualisieren sich auf die gefilterte Teilmenge.
    Filter nach Modalität und Zielgruppe grenzen die Karte live ein.
  • Angebotskarte mit Umkreissuche nach Postleitzahl: ein 50-Kilometer-Suchradius um ein Stadtzentrum mit den darin liegenden Markern.
    Umkreissuche nach Postleitzahl mit sichtbarem Suchradius.
  • Angebotskarte mit geöffnetem Listen-Panel daneben, das dieselben Ergebnisse als tastatur- und screenreader-zugängliche Liste darstellt.
    Barrierearme Listenansicht als gleichwertige Alternative zur Karte.
  • Die Angebotskarte auf einem Smartphone-Bildschirm: die Filtersteuerung stapelt sich vertikal über der Karte.
    Responsives mobiles Layout: die Filtersteuerung stapelt sich über der Karte.

Was der Demonstrator zeigt

Der Demonstrator bildet die öffentliche Hälfte des Systems ab: Datenmodell, Such- und Filter-UX, Kartendarstellung mit kategorienbewusster Bündelung, Umkreissuche und die barrierearme Listenansicht. Alles ist im Browser unmittelbar testbar.