Barrierefreiheit im Zentrum – HAMBURG WASSER mit zeitgemäßem Webauftritt
Der Anbieter für Trink- und Abwasser für Hamburg und Umgebung hat seinen Webauftritt modernisiert. Als öffentliche Stelle und Dienstleister für alle Bürger*innen stand die Barrierefreiheit des Online-Angebots im Zentrum der Neukonzeption und -programmierung. So wird sichergestellt, dass auch Menschen mit Einschränkungen die Seite benutzen können.
Webpräsenz war in die Jahre gekommen
HAMBURG WASSER hatte eine Website auf Basis von TYPO3, die optisch in die Jahre gekommen und nicht mehr zeitgemäß war. Da das TYPO3-System veraltet war und upgedatet hätte werden müssen, entschied sich HAMBURG WASSER dafür, den Webauftritt komplett neu aufzubauen und zu gestalten – Design und Programmierung. Dabei sollte das neue Corporate Design umgesetzt werden, um die Marke zu schärfen.
Der zentrale Fokus bei der Neugestaltung lag dabei auf der Barrierefreiheit der Webpräsenz: Sie sollte im Einklang mit den Bestimmungen des Hamburgischen Behindertengleichstellungsgesetzes (HmbBGG) und der Hamburgischen Barrierefreien Informationstechnik-Verordnung (HmbBITVO) zur Umsetzung der Richtlinie (EU) 2016/2102 barrierefrei gestaltet werden. So können auch Menschen mit unterschiedlichen Formen von Behinderung, seien es Sehschwäche oder eingeschränkte Möglichkeiten, eine Maus zu bewegen, die Website nutzen.
Die Medienwerft entschied die Ausschreibung für sich:
Vom Kickoff bis zum Launch nahm das Projekt knapp 2 Jahre in Anspruch.
Um die angestrebte Barrierefreiheit zu erreichen, wurde die Richtlinie WCAG 2.1. für barrierefreies Webdesign umgesetzt – mit der Mindestanforderung, die Konformitätsstufe A zu erreichen, besser aber die Stufe AAA zu erzielen. Hier greifen verschiedene Kriterien für Konzeption, Gestaltung und Umsetzung. Es müssen zum Beispiel bestimmte Kontrastwerte für Schriften vor Hintergründen erreicht werden, und die Schriftgrößen benötigen eine gewisse Größe, um besser lesbar zu sein. Die Seiten sollen informativ, aber nicht überladen sein. Auf Animationen wurde größtenteils verzichtet, da sie mit Sehbehinderungen schwierig wahrzunehmen sind. Die Seite muss außerdem nur über die Tastatur nutzbar sein und darüber zu allen Interaktionselementen springen können. Bilder müssen für Screenreader mit Unterschriften und Alternativ-Texten ausgestattet sein.
Ein wichtiger Teil der Barrierefreiheit ist der Einsatz von semantischem HTML in der Entwicklung: Es sieht eine klare Struktur mit einer Überschriftenhierarchie vor. Dieser strukturierte Aufbau führt zu einer höheren Konformitätsstufe der Barrierefreiheit, ist aber auch für die Pflege und Weiterentwicklung des Webauftritts wichtig. Der Code wird schlanker, und auch die Suchmaschinenoptimierung profitiert davon. Nicht zuletzt wird die User Experience mit übersichtlichen Seiten verbessert, die ein leichtes Scannen ermöglichen.
HAMBURG WASSER ist damit seiner Zeit voraus: Denn ab 2025 soll es für Unternehmen und Online-Shops verpflichtend werden, Barrierefreiheit in ihre Websites zu integrieren. Elektronische Dienstleistungen müssen dann barrierefrei sein.
Die Projektphasen und ihre Umsetzung
Die erste Phase des Relaunches der Website war die Konzeption: In Workshops wurden die Anforderungen aufgenommen. Eine Besonderheit stellte die Zielgruppe dar: Als Wasseranbieter für das Bundesland Hamburg und den Umkreis zählt HAMBURG WASSER alle Bürgerinnen und Bürger zu seinen Kunden. Es konnte also keine klar definierte Nutzer*innengruppe umrissen werden, vielmehr sollten alle angesprochen werden – über alle Altersklassen hinweg, B2B wie B2C. Die Medienwerft teilte die Zielgruppe in drei Kategorien ein: Menschen, die etwa Ablesedaten von ihren Wasserständen erheben oder Informationen über Trinkwasserqualität oder Tipps zum Wassersparen suchen. Potenzielle neue Mitarbeiter*innen, die HAMBURG WASSER als modernes Unternehmen mit anspruchsvollen Jobangeboten ansprechen will. Sowie Geschäftskund*innen, die zum Beispiel eine Wasserversorgung in den Umlandgemeinden betreiben und für den Aufbau von Entwässerungsstrukturen die Expertise von HAMBURG WASSER nutzen wollen.
Dem schloss sich eine tiefere Konzeptionsphase mit dem Aufbau der Informationsarchitektur an. In mehreren Workshops wurde die Struktur der einzelnen Seitenbereiche erarbeitet. Danach wurden alle relevanten Seitentypen aufgebaut, die notwendigen Informationen und Anforderungen integriert.
Parallel dazu erfolgte die Entwicklung des Designs: Die neue Corporate Identity von Hamburg Wasser war bis dato nur für Printprodukte eingesetzt worden. Die Medienwerft verlängerte sie nun für die digitale Nutzung auf Websites und Smartphones, so dass HAMBURG WASSER als Marke besser wahrgenommen werden kann. Dafür wurde der Styleguide für Printprodukte mit Farben, Schriften und Bildsprache für digitale Anwendungen adaptiert und weiterentwickelt; Schriftarten und -größen zum Beispiel für digitale Geräte optimiert und sichergestellt, dass die Kontraste groß genug sind. Man folgte dabei dem Ansatz von „mobile first“.
Die Medienwerft konzipierte und gestaltete so alle Seitentypen wie Start, Service, Magazin und Presse und bereitete sie für die Entwicklung auf. Eine Komponentenbibliothek kam zum Einsatz, um einen effizienten Aufbau in TYPO3 zu gewährleisten. Konzept, Design und Entwicklung nach der Maßgabe der Barrierefreiheit stellte für die Medienwerft keinen Mehraufwand dar, die Tests gestalteten sich dagegen aufwändiger, da nicht nur visuell getestet wurde, sondern auch mit Vorlesefunktion und ausschließlicher Nutzung der Tastatur. Im November 2022 wurde der Webauftritt von HAMBURG WASSER gelauncht.
Aktuell läuft die zweite Phase des Projekts, und die Seite wird in einem agilen Prozess weiter aufgebaut – mit Optimierungen und Anforderungen, die sinnvoll sind, aber in der ersten Phase keine Priorität hatten: Im Pressebereich sollen zum Beispiel Videos heruntergeladen werden, ein Übersetzungsservice wurde integriert, und im Magazinbereich können Themen mit einer Stichwortsuche gefiltert werden. HAMBURG WASSER ist sehr zufrieden mit der Umsetzung.
Es gibt immer wieder neue Anforderungen, etwa TYPO3 zu aktualisieren, Sicherheitslücken zu schließen oder Anforderungen aus dem Kundenservice zu erfüllen.
Was der neue Webauftritt für die User*innen bedeutet
HAMBURG WASSER verfügt nun über einen modernen Webauftritt, der schnell lädt und die Anforderungen der Zielgruppe erfüllt. Die Gesellschaft kann ihren Markenkern gezielter kommunizieren und sich als moderner wie innovativer Arbeitgeber präsentieren. Damit ist die Website eine wichtige Visitenkarte, um für Bewerber interessant zu sein. Durch das Contentmanagement-System können Inhalte einfach eingepflegt und Seiten aufgebaut werden. Die Nutzung des Backends für die Redakteur*innen hat sich stark vereinfacht.
Die Website ist nachhaltig konzipiert und ermöglicht eine agile Weiterentwicklung: In Backend und Contentmanagement können Neuanforderungen ohne grundlegende Änderungen integriert werden.
Fazit
Die neue Website des Hamburger Dienstleisters für Wasser und Abwasser HAMBURG WASSER spricht verschiedene Zielgruppen – Privatpersonen wie Unternehmen – an. Sie hält ausführliche Informationen zu Wasserqualität, Umweltschutz und Services bereit, zeigt aber auch das Portfolio des Konzerns und setzt ihn als Arbeitgeber für potenzielle neue Mitarbeiter*innen in Szene. Die Corporate Identity wurde umgesetzt, um den Markenkern zu transportieren, und die Website zeigt sich technisch auf dem neuesten Stand.
Barrierefreiheit im Zentrum – Hamburger Wasserdienstleister mit zeitgemäßem Webauftritt
Jetzt mehr über das Projekt erfahren
Über Hamburg Wasser
HAMBURG WASSER ist der Anbieter für Trink- und Abwasser in Hamburg und Umgebung. Zur Gesellschaft gehören die Hamburger Wasserwerke (HWW) und die Hamburger Stadtentwässerung (HSE). HAMBURG WASSER ist einerseits Dienstleister für Bürger und bietet andererseits wasserwirtschaftliche Lösungen für Behörden, Ämter sowie öffentliche und private Unternehmen an. Dazu gehören unter anderem Hochwasserschutz, Betrieb und Sanierung von Abwasseranlagen, Grundwassermonitoring und Altlastensanierung. HAMBURG WASSER berät in Sachen Wasser, Abwasser und Energie, bietet aber auch Laborleistungen wie eine akkreditierte Trinkwasseranalytik an. Das Unternehmen versorgt täglich mehr als zwei Millionen Menschen mit Trinkwasser. Rund 300000 Kubikmeter (300 Millionen Liter) werden jeden Tag zu Trinkwasser aufbereitet, der tiefste Brunnen reicht 429 Meter in die Tiefe.
UNSERE KUNDEN
MEHR ÜBER UNS?
Alles Wichtige über die Medienwerft – seit über 25 Jahren Experten in Sachen Customer Experience & E-Commerce IT – erfahren Sie hier:
Über unsMEDIENWERFT NEWS FREI HAUS!
Trends, Innovationen, Perspektiven & Erfahrungsberichte: Unser Newsletter!
KONTAKT
„Was können wir erreichen? Wie können wir uns weiterentwickeln? Wie können wir besser am Markt agieren? Wenn Sie für eine besondere Herausforderung herausragende digitale Lösungen suchen, sprechen Sie uns an. Sie wissen ja: Erfolgreiche Beziehungen beginnen immer mit dem ersten Gespräch.“
New Business
SÖNKE BAUMANN
Tel.: 040 / 31 77 99-0
E-Mail: info@medienwerft.de