Barrierefreie Website für das Sorgentelefon Hameln e.V.
Projektart
Das Projekt war eine vollständige Erneuerung der Website des Sorgentelefons Hameln Pyrmont hin zu einer barrierefreien, modernen und verlässlichen Anlaufstelle. Ziel war es, Menschen in akuten Situationen einen schnellen, klaren und hindernisfreien Zugang zu Unterstützung zu ermöglichen.
Tools
WordPress, Elementor, Accessibility Testing
Zeitraum
08.2025 - 09.2025
Inhaltsverzeichnis
Welche Probleme lagen vor Beginn der Zusammenarbeit vor?
Schwache Zugänglichkeit
Die Website wies erhebliche Barrieren auf. Farbkontraste waren unzureichend, Gelb auf Weiß machte Texte und Buttons schwer lesbar.
Wichtige Telefonnummern waren im Notfall kaum erkennbar, was die Nutzbarkeit stark einschränkte.
Alternativtexte bei relevanten Bildern fehlten und Skip-Links für Screenreader Nutzer existierten nicht.
Wichtige Telefonnummern waren im Notfall kaum erkennbar, was die Nutzbarkeit stark einschränkte.
Alternativtexte bei relevanten Bildern fehlten und Skip-Links für Screenreader Nutzer existierten nicht.
Veraltetes Design und unklare Struktur
Das Design wirkte insgesamt veraltet und unübersichtlich. Telefonnummern waren seitlich platziert und gingen leicht unter.
Ein Kontaktformular war nicht eingebunden und die zentrale Seite „Mithelfen“ war kaum sichtbar, obwohl sie den Aufruf zu Spenden, Mitgliedschaft oder ehrenamtlicher Mitarbeit enthalten sollte.
Ein Kontaktformular war nicht eingebunden und die zentrale Seite „Mithelfen“ war kaum sichtbar, obwohl sie den Aufruf zu Spenden, Mitgliedschaft oder ehrenamtlicher Mitarbeit enthalten sollte.
Technische Defizite
Technisch zeigte die Website mehrere Lücken. Es fehlten Skip Links, wodurch Screenreader Nutzer die Navigation nicht überspringen konnten.
Das Blogsystem war nicht eingebunden und lieferte keine aktuelle oder strukturierte Darstellung von Beiträgen.
Eine Suchfunktion existierte nicht und ein Kontaktformular war ebenfalls nicht vorhanden.
Zusätzlich waren die Telefonnummern technisch und strukturell ungünstig platziert, sodass sie weder logisch auffindbar noch barrierefrei erreichbar waren.
Das Blogsystem war nicht eingebunden und lieferte keine aktuelle oder strukturierte Darstellung von Beiträgen.
Eine Suchfunktion existierte nicht und ein Kontaktformular war ebenfalls nicht vorhanden.
Zusätzlich waren die Telefonnummern technisch und strukturell ungünstig platziert, sodass sie weder logisch auffindbar noch barrierefrei erreichbar waren.
Welche Strategien/ Tools/ Techniken wurden eingesetzt, um diese Probleme zu lösen?
Barrierefreiheit
Alle Farbkontraste wurden korrigiert, Gelb abgemildert und Schriftfarben auf dunkelgrau bis schwarz gesetzt. Skip Links und Alternativtexte wurden ergänzt, semantische HTML-Elemente implementiert und die Tastaturbedienbarkeit verbessert. Die Seite wurde mit Screenreader Tests geprüft, ein Barrierefreiheitsoverlay ergänzt und weiche Animationen eingesetzt, um schnelle Bewegungen zu vermeiden.
Nutzerführung und Informationsarchitektur
Ein prominenter „Jetzt anrufen“ Button wurde oben platziert, gefolgt von einer klar strukturierten Informationssektion mit Telefonnummern und aktuellen Hinweisen. Am Ende der Seite wurde eine CTA Sektion für „Mithelfen“ eingefügt. Die Telefonnummer erscheint dauerhaft oberhalb der Navigation, zusätzlich wurde ein schwebendes Telefon Icon für direkte Anrufe ergänzt. Eine Suchfunktion erleichtert die Orientierung zusätzlich.
Design und Content
Die Website erhielt ein frisches, modernes Layout mit neuem Titelbild und einheitlichem visuellen Aufbau. Das Blogsystem wurde neu implementiert und optisch aufbereitet, der Besucherzähler im Footer integriert. Inhalte wurden verständlich und übersichtlich strukturiert, sodass die wichtigsten Informationen schnell erfassbar sind.
Technische Umsetzung
Die Umsetzung erfolgte mit WordPress und Elementor. Die Website wurde vom Entwicklungsserver auf die Live-Domain übertragen, inklusive neuer Datenbank. Das Kontaktformular wurde funktional mit der Vereinsadresse verbunden. Abschließend erfolgte eine Schulung des Vorstands zu Elementor, Blogpflege und barrierefreier Inhaltsgestaltung.
Welche Ergebnisse wurden erreicht und wie sah die Situation nach der Zusammenarbeit aus?
Verbesserte Zugänglichkeit
Die Website ist nun barrierefrei, sämtliche Telefonnummern sofort erkennbar und per Klick erreichbar. Screenreader Nutzer können Inhalte vollständig erfassen und navigieren.
Modernes, nutzerfreundliches Design
Die Seite wirkt frisch, einladend und klar strukturiert. Besucher finden schnell die zentralen Informationen, insbesondere den Weg zur Hilfe oder zur Unterstützung des Vereins.
Funktionale Verbesserungen
Kontaktformular, Blogsystem und Suchfunktion funktionieren zuverlässig. Ein schwebendes Telefon Icon und die prominenten CTA Buttons ermöglichen schnellen Zugriff auf Notrufnummern und Kontaktmöglichkeiten.
Nachhaltige Weiterentwicklung
Der Verein kann Inhalte eigenständig pflegen, zukünftige Beiträge veröffentlichen und barrierefreie Inhalte kontinuierlich umsetzen. Die Website ist technisch stabil und für zukünftige Erweiterungen vorbereitet.
Der Vorher-Nachher-Vergleich zeigt deutlich: Erhebliche Barrieren wie Kontrastfehler wurden behoben, Skip-Links ergänzt und eine übersichtlichere, moderne Website geschaffen. (Auf die Bilder klicken, um zu zoomen)