Accessibility at the center – Hamburg Wasser service provider with contemporary website

The provider of drinking water and wastewater for Hamburg and the surrounding area has modernized its website. As a public agency and service provider for all citizens, the accessibility of the online offering was the focus of the redesign and programming. This ensures that people with disabilities can also use the site.

Our Clients ‐ 16. August 2023

Web presence was in the years

HAMBURG WASSER had a website based on TYPO3 that was visually outdated and no longer up to date. Since the TYPO3 system was outdated and should have been updated, HAMBURG WASSER decided to completely rebuild and redesign the website – design and programming. The new corporate design was to be implemented in order to sharpen the brand.

The central focus of the redesign was on the accessibility of the website: It was to be designed barrier-free in accordance with the provisions of the Hamburg Equal Opportunities for Persons with Disabilities Act (HmbBGG) and the Hamburg Barrier-Free Information Technology Ordinance (HmbBITVO) implementing Directive (EU) 2016/2102. This means that people with various forms of disability, be it visual impairment or limited ability to move a mouse, can also use the website.

Medienwerft won the tender:

From kickoff to launch, the project took about 2 years to complete.

In order to achieve the desired accessibility, the WCAG 2.1. guideline for accessible web design was implemented – with the minimum requirement to achieve compliance level A, but better to achieve level AAA. Here, various criteria for conception, design and implementation take effect. For example, certain contrast values must be achieved for fonts in front of backgrounds, and font sizes require a certain size to be more legible. The pages should be informative, but not overloaded. Animations were largely avoided, as they are difficult to perceive with visual impairments. The page must also be usable only via the keyboard and be able to jump to all interaction elements via it. Images must have captions and alternative text for screen readers.

An important part of accessibility is the use of semantic HTML in development: it provides for a clear structure with a hierarchy of headings. This structured design leads to a higher accessibility compliance level, but it is also important for the maintenance and further development of the website. The code becomes leaner, and search engine optimization also benefits. Last but not least, the user experience is improved with clear pages that allow easy scanning.

Thus, HAMBURG WASSER is ahead of its time: Because from 2025, it will become mandatory for companies and online stores to integrate accessibility into their websites. Electronic services will then have to be barrier-free.

The project phases and their implementation

The first phase of the website relaunch was the conception: requirements were recorded in workshops. One special feature was the target group: As a water provider for the federal state of Hamburg and the surrounding area, HAMBURG WASSER counts all citizens among its customers. Therefore, it was not possible to outline a clearly defined user group, but rather to address everyone – across all age groups, B2B as well as B2C. Medienwerft divided the target group into three categories: People who, for example, collect meter reading data from their water levels or are looking for information on drinking water quality or tips on saving water. Potential new employees, whom HAMBURG WASSER wants to address as a modern company with challenging job offers. As well as business customers who, for example, operate a water supply in the surrounding communities and want to use the expertise of HAMBURG WASSER for the development of drainage structures.

This was followed by a deeper conception phase with the development of the information architecture. The structure of the individual page areas was developed in several workshops. Then all relevant page types were built up, and the necessary information and requirements were integrated.

In parallel, the design was developed: Hamburg Wasser’s new corporate identity had previously only been used for print products. Medienwerft now extended it for digital use on websites and smartphones, so that HAMBURG WASSER can be better perceived as a brand. To do this, the style guide for print products with colors, fonts and imagery was adapted and further developed for digital applications; fonts and sizes, for example, were optimized for digital devices and it was ensured that the contrasts were large enough. The „mobile first“ approach was followed.

Medienwerft thus conceived and designed all page types such as Start, Service, Magazine and Press and prepared them for development. A component library was used to ensure an efficient structure in TYPO3. The concept, design and development in accordance with accessibility requirements did not involve any additional work for Medienwerft, but the tests proved to be more complex, as tests were not only carried out visually, but also with a read-aloud function and exclusive use of the keyboard. The HAMBURG WASSER website was launched in November 2022.

Currently, the second phase of the project is underway, and the site continues to be built in an agile process – with optimizations and requirements that make sense but were not a priority in the first phase: For example, videos are to be downloaded in the press section, a translation service has been integrated, and topics can be filtered with a keyword search in the magazine section. HAMBURG WASSER is very satisfied with the implementation.

There are always new requirements, such as updating TYPO3, closing security gaps or meeting customer service requirements.

Adrian Stern

CX Expert Support Intro Adrian

What the new website means for users

HAMBURG WASSER now has a modern website that loads quickly and meets the requirements of the target group. The company can communicate its brand essence in a more targeted manner and present itself as a modern and innovative employer. This makes the website an important business card for attracting applicants. The content management system makes it easy to add content and build pages. The use of the backend for editors has been greatly simplified.

The website is designed to be sustainable and allows for agile further development: New requirements can be integrated into the backend and content management without fundamental changes.


The new website of HAMBURG WASSER, the Hamburg-based service provider for water and wastewater, appeals to various target groups – private individuals and companies alike. It provides detailed information on water quality, environmental protection and services, but also shows the Group’s portfolio and presents it as an employer for potential new employees. The corporate identity was implemented to convey the brand essence, and the website is technically up-to-date.

Hamburg Wasser Case - Crossteaser

Accessibility at the center – Hamburg water service provider with contemporary website

Learn more about the project now

To the Case

Farbenspiel Hintergrundbild

About Hamburg Wasser

HAMBURG WASSER is the provider of drinking water and wastewater in Hamburg and the surrounding area. The company includes Hamburger Wasserwerke (HWW) and Hamburger Stadtentwässerung (HSE). HAMBURG WASSER is on the one hand a service provider for citizens and on the other hand offers water management solutions for authorities, agencies as well as public and private companies. These include flood protection, operation and rehabilitation of wastewater facilities, groundwater monitoring and remediation of contaminated sites. HAMBURG WASSER provides advice on water, wastewater and energy, and also offers laboratory services such as accredited drinking water analysis. The company supplies more than two million people with drinking water every day. Around 300,000 cubic meters (300 million liters) are treated into drinking water every day, with the deepest well reaching 429 meters into the ground.



Find out everything important about Medienwerft – experts in brands & ecommerce for over 25 years – here:

About us


„What can we achieve? How can we progress? How can we operate better in the market? If you’re looking for outstanding digital solutions for a particular challenge, talk to us about it. After all, you know that successful relationships always begin with the first conversation.“

Sönke Baumann

New Business

Tel: +49 40 / 31 77 99-0