Toegankelijke campagnewebsite voor Waterklaar

Waterklaar zocht een partner die hun Figma-ontwerp zorgvuldig kon vertalen naar een snelle, gebruiksvriendelijke en volledig toegankelijke website. De website moest ontwikkeld worden in Craft CMS, zodat inhoud eenvoudig te beheren is door verschillende betrokken redacteuren. Daarnaast was er behoefte aan een robuust fundament voor SEO, privacy en snelheid, en een grote mate van flexibiliteit voor campagnes en doorontwikkeling. Een belangrijk onderdeel van de opdracht was het realiseren van de nieuwe Waterklaar-check: een interactieve tool die inwoners helpt om snel passende oplossingen en eventuele subsidiemogelijkheden te vinden. Omdat Waterklaar onder de semi-overheid valt, moest de hele website voldoen aan WCAG 2.2 AA.

Doelstelling

De centrale doelstelling was het neerzetten van een snelle, toegankelijke en toekomstbestendige website die Limburgers helpt bij het vinden van concrete wateroplossingen. Daarbij moest de redactie zelfstandig kunnen werken, zonder afhankelijk te zijn van developers. Alle onderdelen, van oplossingen en succesverhalen tot themapagina’s en filters, moesten dynamisch zijn, logisch gestructureerd en naadloos aansluiten op het campagneverhaal van Waterklaar.

Onze aanpak

We startten met een uitgebreide inventarisatie van alle ontwerpbestanden, technische wensen en functionele eisen. De Figma-ontwerpen waren leidend voor de vormgeving; onze rol was om deze pixel-precies te vertalen naar toegankelijke, schaalbare componenten binnen Craft CMS. We ontwikkelden een flexibel en logisch inhoudsmodel waarin oplossingen, succesverhalen, thema’s, gemeenten en filter onderwerpen centraal beheerd kunnen worden. Hierdoor ontstaat een structuur die jarenlang meegaat en eenvoudig uitbreidbaar is.

Voor de contenttypen “oplossingen” en “succesverhalen” hebben we uitgebreide detailpagina’s ontwikkeld met dynamische tags, korte intro’s, afbeeldingen, inhoudssecties en gerelateerde items. Hierdoor ontstaat een consistente en gebruiksvriendelijke navigatie, waarin bezoekers altijd kunnen doorstappen naar relevante informatie. Nieuwe oplossingen en succesverhalen verschijnen automatisch in het juiste overzicht, alfabetisch of op datum, afhankelijk van het type.

De Waterklaar-check

Een essentieel onderdeel van de website is de nieuwe Waterklaar-check: een korte vragenflow die gebruikers leidt naar oplossingen die passen bij hun woning, omgeving en eventuele subsidiemogelijkheden. We ontwikkelden een drie-stappen flow waarin bezoekers hun gemeente, woontype en relevante woonsituaties selecteren. De antwoorden worden gekoppeld aan CMS-data, waardoor automatisch een overzicht ontstaat met passende oplossingen. Eerst toont de website oplossingen mét subsidie, daarna de overige alternatieven. De flow bevat duidelijke navigatie, verbeterde kleurcontrasten, heldere selectie-states en een toegankelijke laad-animatie. Hierdoor is de tool niet alleen praktisch, maar ook volledig WCAG-proof.

Digitale toegankelijkheid

Omdat Waterklaar wettelijk moet voldoen aan de richtlijnen voor digitale toegankelijkheid, hebben we alle componenten ontworpen en ontwikkeld met WCAG 2.2 AA als uitgangspunt. We verbeterden tientallen onderdelen uit het ontwerp, waaronder knoppen, links, contrastwaarden, focus indicaties en status iconen. Linkteksten werden duidelijker en betekenisvoller, kaarten werden volledig klikbaar en semantische HTML-structuren zijn zorgvuldig opgebouwd. Na de acceptatie versie heeft Accessible Minds een uitgebreid toegankelijkheidsonderzoek uitgevoerd. Alle technische bevindingen zijn door ons opgelost; content matige punten hebben we teruggekoppeld aan de redactie. Na een hercontrole voldeden alle succescriteria en is een goedgekeurd toegankelijkheidsrapport opgesteld.

Van acceptatie tot livegang

Op een aparte acceptatieomgeving konden Waterklaar en hun partners de website testen, inhoud invoeren en feedback geven. Parallel richtten wij het CMS volledig in, inclusief SEO-instellingen met SEOmatic, consent-mode, privacybeheer, sitemaps, robots.txt en koppelingen met Google Analytics, Tag Manager en Search Console. Na akkoord hebben we de website gemigreerd naar de live omgeving, inclusief redirects, DNS-wijzigingen en een laatste technische controle op snelheid, veiligheid en dataverkeer.

Het resultaat

De nieuwe website van Waterklaar vormt nu het digitale hart van hun campagne en meerjarenstrategie. Inwoners vinden sneller concrete oplossingen die passen bij hun woning en omgeving, en subsidies worden duidelijk en laagdrempelig gepresenteerd. De Waterklaar-check helpt gebruikers direct op weg met relevante keuzes, terwijl succesverhalen inspireren en aanzetten tot actie. Dankzij het flexibele CMS-fundament kan het team de website volledig zelf beheren en uitbreiden. De website is snel, toegankelijk, makkelijk te beheren en volledig voorbereid op toekomstige campagnes en doorontwikkeling.