Zum Hauptinhalt wechseln
farbenmeer Logo
farbenmeer Logo×Logo von Gynformation handgeschrieben
Case Study

Weil Aufklärung nicht nur barrierefrei sein sollte, sondern auch leicht auffindbar

Informationen können Leben retten. Solch wichtige Informationen wurden bspw. Schwangeren lange Zeit durch den Paragrafen 219a vorenthalten. Dieser untersagte Gynäkolog:innen, auf deren Websites für Schwangerschaftsabbrüche zu "werben". Eine absurde Formulierung, die aber zur Folge hatte, dass sie auf ihren Websites auch keine aufklärenden Informationen teilen durften.

mobile Screens von gynformation

Die Geburtsstunde von Gynformation

Die Debatte um die Paragrafen 218 und 219a wurde seit Jahren immer wieder laut. 2019 gründete sich das Kollektiv Gynformation, um auf ihrer Website über Schwangerschaftsabbrüche aufzuklären. Daraus entwickelte sich über die Zeit deren aktuelles Angebot: eine Datenbank mit gynäkologischen Praxen für verschiedene Personengruppen mit spezifischen Bedürfnissen.

desktop screens

Geteilte Erfahrungen können vor Diskriminierung schützen

Gerade marginalisierte Gruppen wie zum Beispiel trans Personen oder Migrant:innen erleben selbst in Räumen, die eigentlich als sicher gelten sollten, diskriminierendes Verhalten. Bei Gynformation können sich Patient:innen eine, so die Idee, diskriminierungsfreie Praxis in ihrer Nähe suchen. In der Datenbank gelistet ist nur, wer von anderen Patient:innen empfohlen wurde.

Fontübersicht
mobile Screens von gynformation
Farbübersicht

Die Anforderungen: mehr Content, mehr Fokus und auf gar keinen Fall Datensätze verlieren

Nach 5 Jahren Gynformation war es an der Zeit für ein Revamp der Website, bei dem wir uns auf Barrierefreiheit und mobile Nutzung fokussierten.

Wer die Seite besucht, soll die Funktion und Vorteile schneller vermittelt bekommen. Wer eine Praxis empfehlen möchte, soll sich nicht mehr durch unzählige Formulare kämpfen müssen. Und wer die Formulare auswertet, soll dies schneller und effizienter machen können. 

Das Design

Das Logo sowie die bisherigen Farben und Illustrationen sollten beibehalten werden, also war das unser Startpunkt. Um dennoch ein Gefühl von Rebranding aufkommen zu lassen, wählten wir eine andere Typo und erweiterten das Farbspektrum. Letzteres nicht nur aus ästhetischen Gründen, sondern um die Seite barrierefreier zu gestalten. 

Zudem haben wir die Struktur der Startseite komplett neu gedacht und konzipiert: Wir wollen die Besuchenden durch eine direkte Ansprache nicht nur abholen, sondern vermitteln: Hier ist ein safer space. Zudem ermöglichen die Kacheln einen schnellen Überblick über alle relevanten Informationen und das Glossar soll eventuelle Hürden abbauen – weil für uns auch leicht verständliche Sprache eine Art Barrierefreiheit darstellt. 

screens Desktop von der Suche und der Suchdetailseite

Die Technik

Wie oben erwähnt, war das Sichern der bisherigen Daten eines der wichtigsten Ziele. So haben wir beim Aufsetzen des neuen Datenbankschemas ganz genau darauf geachtet, dass die Strukturen kompatibel mit denen der bereits existierenden Fragebögen und Profile sind. Wie schon in der alten Version nutzen wir eine Postgres Datenbank zum Speichern ebendieser Daten und Prisma, um die Daten abzurufen oder einzutragen. Zur inhaltlichen Pflege nutzen wir DatoCMS, welches mit unserem Frontend-Stack aus Next.js, React und Tailwind besonders kompatibel ist und eine ideale Performance und User Experience der Seite gewährleistet. Mithilfe eines Skripts haben wir vor dem Relaunch der neuen Website alle Fragebögen, Profile sowie dazugehörige Metadaten übertragen. 

mobiler Fragebogen

Barrierefreiheit ist auch ein technisches Thema

Nicht nur beim Erstellen des Konzeptes, auch beim Entwickeln versuchen wir nach bestem Wissen und Gewissen auf Barrierefreiheit zu achten. Wir nutzen dafür das Eslint Plugin „jsx-a11y“, um zunächst die statischen Seiten zu überprüfen. So werden beispielsweise fehlende alt-Texts für Bilder oder Clickevents bei Buttons angezeigt. Um den gerenderten DOM noch genauer zu untersuchen, nutzen wir zudem @axe-core/react. Während der Laufzeit zeigt es auf der Konsole an, ob zum Beispiel Kontraste hoch genug sind. Es überprüft auch wichtige Voraussetzungen für die Verständlichkeit der Seite mittels Screenreader, unter anderem ob die Reihenfolge der Überschriften stimmig ist und ob allen HTML-Tags eine klare Rolle zugewiesen wurde. Wir haben noch nicht alle Mängel behoben und sind weiterhin auf dem Weg, die Seite komplett barrierefrei zu gestalten. 

Portrait mit Merle
"

Die Vision ist, eine barrierefreie Seite grundsätzlich als Standard zu haben und nicht als Add-on zu sehen und nachrangig implementieren.

Merle Baake

Das Ziel? Transparenz, Sicherheit und geteiltes Wissen durch Open Source

Gynformation ist ein kollektives Projekt und dieser kollektive Ansatz soll über die Seite hinausgedacht werden. Daher werden wir den Code auf Open Source stellen. Zum einen für Transparenz und Sicherheit, da Personen den Code selbst auf Schwachstellen und Hintertüren untersuchen können. Aber auch, um unser Wissen zu teilen, damit andere Gruppen oder Kollektive ein ähnliches Projekt aufbauen können. Dafür wollen wir allerdings erstmal eine geeignete Lizenz wählen, einen Code of Conduct erstellen, um einen freundlichen Umgangston sicherzustellen, und außerdem den Code besonders sauber dokumentieren, so dass sich andere Entwickler:innen dort gut zurechtfinden.

Admin Bereich Dashboard

Ermöglicht durch den Farbenmeer-Freitag

Er ist mehr als eine fancy Alliteration: Der Farbenmeer-Freitag ist der Tag in der Woche, an dem wir frei über unsere Zeit verfügen können. Wir nutzen diesen Tag für Weiterbildungen, die uns interessieren, Themen, in die wir uns längst schon einmal einarbeiten wollten oder aber für Projekte, die nicht auf unserer Payroll landen. Man könnte sagen, es ist unser Ehrenamt als Agentur. Denn soziale Projekte werden oft von Ehrenamtlichen getragen. Daher fehlen gerade sozialen Projekten leider oft die finanziellen Mittel, um sich professionelle Unterstützung leisten zu können. Gynformation ist ein solches Pro-bono-Projekt – ihr Engagement im Kampf gegen soziale Ungerechtigkeit wollen wir unbedingt unterstützen. 

Du möchtest mehr über dieses Projekt erfahren?

Branche
  • Behandlungen in der Gynäkologie
Zeitraum
  • 2024
Formate
  • Projekt Team
Portrait von Merle
Ansprechpartnerin

Merle Baake, Softwareentwicklungmerle@farbenmeer.de

Du hast Lust mit uns zu sprechen?