Rapport:
Audit digitale toegankelijkheid website Waternet

Uitkomst: Onvoldoende

Bevindingen: Op www.waternet.nl/ staan onder de kop 'Nieuws en artikelen' afbeeldingen en koppen. Deze afbeeldingen hebben een alternatieve tekst die hetzelfde is als de bijbehorende kop, de alternatieve tekst omschrijft de afbeelding niet. Dit kan verwarrend zijn voor bezoekers die het scherm niet kunnen zien en een screenreader gebruiken, dezelfde tekst wordt namelijk twee keer voorgelezen. De afbeeldingen waar het hier om gaat zijn decoratief en hebben geen alternatieve tekst nodig. Een mogelijk oplossing voor dit probleem is daarom om de afbeeldingen een leeg alt-attribuut te geven, of geef de afbeelding een alternatieve tekst die de afbeelding wel omschrijft.
Dit probleem komt ook voor op pagina www.waternet.nl/en/.

Op onder andere www.waternet.nl/ staat het logo van Waternet in de header. Deze afbeelding is ook opgemaakt als een link, via het aria-label op het a-element heeft het logo de alternatieve tekst 'Waternet home' ontvangen. In deze alternatieve tekst ontbreekt tekst dat wel op het logo te zien is. Het gaat hier om de tekst 'waterschap amstel gooi en vecht gemeente amsterdam'. Zorg ervoor dat alle tekst op het logo ook voorkomt in de alternatieve tekst.

Op pagina www.waternet.nl/voldoen-we-aan-de-webrichtlijnen/ staan iconen achter verschillende links. Deze iconen geven aan dat een link verwijst naar een externe pagina en brengen dus visueel informatie over. De iconen hebben geen alternatieve tekst. Ook zijn de iconen via CSS op de pagina geplaatst. Hierdoor kan het mogelijk voorkomen dat sommige bezoekers de iconen niet zien als de CSS niet (goed) wordt geladen of wanneer zij een eigen CSS stijl gebruiken. Gebruik CSS alleen om decoratieve content op de pagina te plaatsen. Een mogelijk oplossing voor dit probleem is om de iconen via een img- of svg-element op de pagina te plaatsen en het een tekstalternatief te geven.
Dit icoon komt ook voor op andere pagina's, bijvoorbeeld op pagina www.waternet.nl/nieuws/2023/april/meer-drinkwater-nodig-aan-deze-oplossingen-werkt-waternet/ en www.waternet.nl/ons-water/rioolwater/100-jaar-schoon-water-in-amsterdam/afvalwater-bron-van-….

Op pagina www.waternet.nl/mijn-waternet/ staan twee decoratieve afbeeldingen met de alternatieve tekst 'Drinkwater'. Deze afbeeldingen zijn in een button-element geplaatst. Bij de knop 'Inloggen voor belasting' is de alternatieve tekst 'Drinkwater' meegenomen in de toegankelijke naam van de knop. Hierdoor is het voor sommige bezoekers verwarrend of zij met de knop kunnen inloggen op belasting of op drinkwater. Los dit probleem bijvoorbeeld op door deze afbeeldingen een leeg alt-attribuut te geven.

In het navigatiemenu op pagina www.acc.waternet.nl/mijn-waternet/belasting/ staan decoratieve afbeeldingen bij elke menu-item, bijvoorbeeld bij 'Gegevens' en 'English'. Deze decoratieve afbeeldingen hebben dezelfde alternatieve tekst als de visuele tekst van het menu-item, hierdoor wordt tekst van een menu-item dubbel voorgelezen. Dit kan vervelend zijn voor screenreadergebruikers. Geef de afbeeldingen daarom een leeg alt-attribuut zodat deze genegeerd worden door hulpsoftware.
Een soortgelijk probleem komt ook voor op pagina awd.waternet.nl/ bij de afbeeldingen en links onder de kop 'Activiteiten' en op pagina awd.waternet.nl/bezoek/toegangskaarten/ bij de blokken zoals 'Dagkaart'.

Op pagina awd.waternet.nl/ staat boven de tekst 'Volg het werkt van onze boswachters' een Twitter icoon. Dit icoon geeft aan dat de link verwijst naar een Twitter-account. Deze informatie is niet beschikbaar voor bezoekers die het scherm niet kunnen zien omdat het icoon geen alternatieve tekst heeft. Zorg ervoor dat het icoon een alternatieve tekst krijgt, bijvoorbeeld door gebruik te maken van een screenreader-only tekst.

Op pagina awd.waternet.nl/ staan iconen van hartjes en gesprekswolken om aan te geven hoeveel likes en reacties een foto heeft gekregen. Voor deze iconen is geen alternatieve tekst, hierdoor weten bezoekers die het scherm niet kunnen zien niet wat de getallen achter deze iconen betekenen. Ook zijn de iconen op de pagina geplaatst met CSS. Informatieve iconen mogen niet met CSS op de pagina worden geplaatst. Het kan namelijk voorkomen dat de CSS niet goed wordt geladen of dat bezoekers een eigen CSS stijl toepassen, in deze gevallen kunnen de iconen niet op de pagina staan. Zorg er daarom voor dat de iconen via HTML op de pagina worden geplaatst, bijvoorbeeld met een img- of svg-element, en geeft deze een tekstalternatief.

Op pagina awd.waternet.nl/ hebben de afbeeldingen onder de kop 'NU in de AWD' dezelfde alternatieve tekst als de koppen waar de afbeeldingen bij staan. Wanneer afbeeldingen een alternatieve tekst hebben moet deze de afbeelding omschrijven of dezelfde informatie overbrengen als dat de afbeelding visueel doet. Dat is hier niet het geval. Omdat deze afbeeldingen decoratief zijn is het voldoende om ze te verbergen voor hulpsoftware. Los dit probleem op door de afbeeldingen een beschrijvende alternatieve tekst te geven, of verberg de afbeeldingen door ze een leeg alt-attribuut te geven.
Dit probleem komt ook voor op pagina awd.waternet.nl/beleef/wandelroutes/detail/86 bij de koppen en afbeeldingen onder de kop 'Populaire routes'.

Op pagina awd.waternet.nl/beleef/wandelroutes/detail/86 staan iconen voor de teksten '4 km', '1.30 uur' en 'Ingang Oranjekom/ Oase'. Deze iconen geven betekenis aan de achterstaande teksten en hebben daarom een alternatieve tekst nodig. Daarnaast zijn de iconen met CSS op de pagina geplaatst. In het geval dat de CSS niet goed wordt geladen of bezoekers een eigen CSS stijl gebruiken, kunnen de iconen mogelijk niet zichtbaar zijn. Gebruik CSS daarom niet om informatieve iconen op de pagina te plaatsen. Een mogelijke oplossing voor dit probleem is om de iconen via HTML en met een tekstalternatief op de pagina te plaatsen, of maak gebruik van een screenreader-only tekst.

Op pagina awd.waternet.nl/bezoek/toegangskaarten/winkelwagen/bestellen zijn verplichten invoervelden aangegeven met een stip. Voor deze stip is geen alternatieve tekst aanwezig. Hierdoor weten bezoekers die het scherm niet kunnen zien niet welke velden verplicht zijn. Los dit probleem bijvoorbeeld op door het required-attribuut te plaatsen op de verplichte velden.

Als bezoekers in het formulier op pagina awd.waternet.nl/bezoek/toegangskaarten/winkelwagen/bestellen een fout maken, bijvoorbeeld het invullen van twee verschillende e-mailadressen, verschijnt er een foutmelding op de pagina in de vorm van een rood kruis. Voor dit icoon is geen alternatieve tekst aanwezig. Hierdoor weten blinde bezoekers niet wanneer zijn een fout hebben gemaakt. Los dit probleem op door een tekstuele foutmelding toe te voegen.

Op pagina www.waternet.nl/actueel/ hebben de decoratieve afbeeldingen onder de kop 'Nieuws' alternatieve teksten die de afbeeldingen niet omschrijven. Hierdoor krijgen bezoekers die het scherm niet kunnen zien verkeerde informatie mee. Omdat deze afbeeldingen ook in een a-element zijn geplaatst wordt de alternatieve tekst van de afbeelding ook meegenomen in de linktekst. Het is daarom beter om deze decoratieve afbeeldingen een leeg alt-attribuut te geven.
Op andere pagina's staan ook decoratieve afbeeldingen met een alternatieve tekst die de afbeelding niet omschrijft, bijvoorbeeld op pagina www.waternet.nl/nieuws/2023/april/meer-drinkwater-nodig-aan-deze-oplossingen-werkt-waternet/ en op pagina www.waternet.nl/ons-water/rioolwater/100-jaar-schoon-water-in-amsterdam/afvalwater-bron-van-….

Op pagina www.waternet.nl/service-en-contact/verhuizen/aanmelden/ bij de stap 'Kies uw adres' staat svg-elementen die role=img hebben. Afbeeldingen hebben altijd een alternatieve tekst nodig, of ze moeten verborgen zijn voor hulpsoftware. De beste optie is hier om de afbeeldingen te verbergen voor hulpsoftware door deze een leeg alt-attribuut te geven, of aria-hidden op het svg-element te plaatsen.

Op pagina www.waternet.nl/werken-bij/vacatures/projectleider-natuurbeheer/ staat een afbeelding van 'Daphne Huyser'. Deze afbeelding heeft op het img-element geen alt-attribuut. Geef de afbeelding een leeg alt-attribuut zodat deze genegeerd kan worden door hulpsoftware.

Op pagina 2 van de PDF awd.waternet.nl/content/routes/86-6428489f6dc1b-waterwandeling-35-km.pdf staat een kaart die met een figure-tag in de codelaag is geplaatst. Wanneer een figure-tag in de codelaag staat heeft deze een alternatieve tekst nodig zodat het element correct wordt voorgelezen door voorleessoftware. Geef de kaart daarom een alternatieve tekst.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de video 'Met groengas op weg naar een duurzame toekomst' op pagina www.waternet.nl/ons-water/rioolwater/100-jaar-schoon-water-in-amsterdam/afvalwater-bron-van-… komen teksten in beeld te staan, bijvoorbeeld de naam en functie van de spreker rond 0:06. Voor bezoekers die het scherm niet kunnen zien is er geen media-alternatief voor deze informatie. Daarom moet de video een media-alternatief, zoals een transcript, hebben waarin alle informatie in de video in voorkomt. Ook mag gebruik worden gemaakt van een audiodescriptie, waarmee ook gelijk wordt voldaan aan succescriterium 1.2.5. Het is overigens beter om zowel een transcript als audiodescriptie toe te voegen aan de video, mensen die zowel auditieve als visuele beperkingen hebben zijn afhankelijke van een transcript.
In de video 'Een nieuwe rioolwaterzuivering in Weesp' op dezelfde pagina komen ook teksten in beeld te staan die niet voorkomen in het audiospoor.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: In de video 'Met groengas op weg naar een duurzame toekomst' op pagina www.waternet.nl/ons-water/rioolwater/100-jaar-schoon-water-in-amsterdam/afvalwater-bron-van-… komen teksten in beeld te staan, bijvoorbeeld de naam en functie van de spreker rond 0:06. Bezoekers die het scherm niet kunnen zien en afhankelijk zijn van audio krijgen deze informatie niet mee als zij de video afspelen. Voeg daarom een audiodescriptie toe aan de video, of laat alle teksten in beeld uitspreken door een voice-over.
In de video 'Een nieuwe rioolwaterzuivering in Weesp' op dezelfde pagina komen ook teksten in beeld te staan die niet voorkomen in het audiospoor.

Uitkomst: Onvoldoende

Bevindingen: Op pagina www.waternet.nl/contact/ wordt in het navigatiemenu aangegeven op welke pagina de bezoeker zich bevindt doordat de link 'Contact' is onderstreept. Deze informatie is visueel beschikbaar, maar is niet beschikbaar voor bezoekers die het scherm niet kunnen zien. Zorg ervoor dat visueel informatie ook in de code of in tekst aanwezig is. Een mogelijke oplossing voor dit probleem is om aria-current=page te plaatsen op de link van de huidige pagina in het navigatiemenu.
Dit probleem komt op meerdere plaatsen voor op het domein waternet.nl, www.acc.waternet.nl/mijn-waternet/belasting/ en het domein awd.waternet.nl/.

Op pagina www.acc.waternet.nl/mijn-waternet/belasting/ staan dikgedrukte teksten die koppen zijn voor onderstaande content, bijvoorbeeld de kop 'Geboortedatum' en 'Adres'. In de code zijn deze koppen opgemaakt met een p-element, hierdoor kan hulpsoftware niet aangeven dat dit koppen zijn. Los dit probleem op door de koppen op te maken met een kop-element.
Dit probleem komt ook voor op andere pagina's, bijvoorbeeld op pagina awd.waternet.nl/bezoek/toegangskaarten/ bij de tekst 'Dagkaart ook te koop bij:' en op pagina www.waternet.nl/werken-bij/vacatures/projectleider-natuurbeheer/ bij de tekst 'Werken bij Waternet'.

Op pagina awd.waternet.nl/ staat de tekst 'Openingstijden Van zonsopgang tot zonsondergang'. In de code zijn deze teksten opgemaakt als een lijst en is de tekst 'Openingstijden' in een strong-element geplaatst. Dit komt niet overeen met de visuele weergave van de tekst. Visueel lijkt de tekst 'Openingstijden' een kop te zijn voor de onderstaande content. Daarom moet deze tekst zijn opgemaakt met een kop-element. Verwijder het strong-element van de tekst en maak dit op met een kop-element.

Op pagina awd.waternet.nl/beleef/wandelroutes/detail/86 staan onder de kop 'Route' een aantal zichtbare stappen. Visueel is alleen stap 1 tot en met 4 te zien, maar in de HTML code zijn de stappen 1 tot en met 7 geplaatst. Alle stappen worden voorgelezen door voorleessoftware, wat verwarrend kan zijn voor ziende screenreadergebruikers omdat iets wordt voorgelezen dat niet op het scherm staat. Los dit op door content wat visueel niet zichtbaar is ook te verbergen voor hulpsoftware, bijvoorbeeld met aria-hidden, of maak alle stappen zichtbaar op de pagina.

Op pagina awd.waternet.nl/bezoek/toegangskaarten/ staan dikgedrukte teksten die koppen zijn voor onderstaande content, bijvoorbeeld de tekst 'Bezoekerscentrum De Oranjekom'. In de code zijn deze koppen alleen opgemaakt met het strong-element. Hiervoor is het strong-element niet geschikt, het heeft een andere semantische betekenis dan een kop-element. Het element geeft aan dat een tekst belangrijk is en mag alleen worden gebruikt op één of enkele woorden. Los dit probleem op door het strong-element van de teksten te verwijderen en deze op te maken met een kop-element.
Dit probleem komt ook voor op andere pagina's, bijvoorbeeld op www.waternet.nl/actueel/ en www.waternet.nl/werken-bij/vacatures/projectleider-natuurbeheer/.

Op pagina awd.waternet.nl/bezoek/toegangskaarten/dagkaart staan drie comboboxen met het bijschrift 'Datum van bezoek'. Dit bijschrift is niet gekoppeld aan de comboboxen. Zorg ervoor dat het bijschrift gekoppeld is aan de comboboxen door bijvoorbeeld gebruik te maken van een fieldset en legend combinatie.

Op pagina www.waternet.nl/onderhoud-en-storingen/ staat voor de kop 'Storingen' het getal 115. Visueel is duidelijk dat het getal en de kop bij elkaar horen. In de code is deze koppeling niet aanwezig. Los dit probleem op door het getal in het kop-element van 'Storingen' te plaatsen.

Onder andere de tekst 'Wij vragen onze nieuwe medewerkers om een geldige Verklaring Omtrent het Gedrag. Een assessment kan onderdeel uitmaken van de sollicitatieprocedure. ' op pagina www.waternet.nl/werken-bij/vacatures/projectleider-natuurbeheer/ is opgemaakt met het em-element. Het em-element is bedoeld om nadruk te geven aan één of enkele woorden en mag niet worden gebruikt op hele zinnen. Gebruik hiervoor het i-element of maak de tekst op met CSS.

Op pagina www.waternet.nl/werken-bij/vacatures/projectleider-natuurbeheer/ staat onder de kop 'Sollicitatieprocedure'. Visueel is dit een geordende lijst, maar in de code is dit niet opgemaakt als een lijst. Zorg ervoor dat deze content in de code wordt opgemaakt met een ol-element.

Op pagina www.waternet.nl/zakelijk/drinkwater-voor-bedrijven/kosten-met-watermeter/ staat onder de kop 'Op welke manieren kan ik betalen?' visueel één lijst, maar in de code is deze lijst opgemaakt met twee ul-elementen. Zorg ervoor dat deze lijst wordt opgemaakt met één ul-element.

De PDF awd.waternet.nl/content/routes/86-6428489f6dc1b-waterwandeling-35-km.pdf heeft in de codelaag geen Document-tag als bron-tag. Net als bij HTML moeten alle tags in een PDF codelaag zijn geplaatst in een bron-tag. Los dit op door alle tags in de codelaag te plaatsen in een Document-tag.

In de codelaag van de PDF awd.waternet.nl/content/routes/86-6428489f6dc1b-waterwandeling-35-km.pdf zijn koppen niet geplaatst in koppentags. Hierdoor kan hulpsoftware niet bepalen wat koppen zijn. Zorg ervoor dat alle visuele koppen in het bestand in een kop-tag worden geplaatst.

In de codelaag van de PDF awd.waternet.nl/content/routes/86-6428489f6dc1b-waterwandeling-35-km.pdf is een lege Table-tag geplaatst. Hierdoor wordt er door hulpsoftware aangegeven dat er een tabel in het document staat terwijl dit niet zo is. Verwijder daarom de lege Table-tag.

Op pagina 2 van de PDF www.waternet.nl/siteassets/zakelijk/waterschapsbelasting/verzoek-om-kwijtschelding-ondernemers.pdf staat een tabel. In de codelaag is in deze tabel een leeg TH-tag geplaatst. Tabellen mogen geen lege TH-tags bevatten omdat dit koppen zijn voor andere cellen. Verwijder de lege TH-tag of vervang deze voor een TD-tag.

Advies: In de PDF awd.waternet.nl/content/routes/86-6428489f6dc1b-waterwandeling-35-km.pdf staan in de codelaag een aantal lege P-tags. Deze worden door hulpsoftware voorgelezen als 'Leeg'. Dit kan vervelend zijn voor gebruikers van hulpsoftware. Het is daarom beter om lege P-tags uit de codelaag te verwijderen.

Advies: Op pagina www.waternet.nl/contact/ komen meerdere H1 koppen voor. Dit kan verwarrend zijn voor bezoekers die gebruikmaken van een koppenlijst, bijvoorbeeld screenreadergebruikers. Een H1 kop geeft altijd het hoofdonderwerp van de pagina aan, bij meerdere H1 koppen kan het moeilijk te achterhalen zijn wat het hoofdonderwerp van de pagina is. Het is daarom beter om één H1 kop op een pagina te gebruiken.
Dit komt ook voor op andere pagina's, bijvoorbeeld op pagina www.waternet.nl/onderhoud-en-storingen/, www.waternet.nl/zakelijk/waterschapsbelasting-voor-bedrijven/kwijtschelding-kleine-ondernemers/ en www.waternet.nl/actueel/.

Advies: Pagina www.waternet.nl/ begint met een H1 kop die wordt opgevolgd door een H3 kop. Het is beter voor de toegankelijkheid van een pagina om gebruik te maken van een logische koppenstructuur. Een logische koppenstructuur begint bij een H1 kop voor de titel van de pagina, gevolgd door H2 koppen voor de koppen, H3 koppen voor de tussenkoppen, etc.
Dit komt ook voor op pagina www.waternet.nl/contact/.

Advies: In de kaart op pagina www.waternet.nl/onderhoud-en-storingen/ staan element die te bedienen zijn met de muisaanwijzer. Deze elementen zijn niet te bedienen met het toetsenbord, maar er is een toegankelijk alternatief aanwezig. Wel worden deze klikbare elementen voorgelezen als 'klikbaar' door voorleessoftware. Dit kan erg verwarrend zijn voor screenreadergebruikers, zij verwachten namelijk dat klikbare elementen ook te bedienen zijn met het toetsenbord. Overweeg om een functie aan de pagina toe te voegen waarmee bezoekers de kaart kunnen overslaan, bijvoorbeeld een skiplink.

Advies: De PDF www.waternet.nl/siteassets/zakelijk/waterschapsbelasting/verzoek-om-kwijtschelding-ondernemers.pdf is niet digitaal invulbaar. Op de pagina waar de PDF te downloaden is, is ook geen andere mogelijkheid om dit formulier digitaal in te vullen. Veel mensen hebben er baat bij wanneer een formulier digitaal in te vullen is, bijvoorbeeld als zij blind zijn of moeite hebben met schrijven. Het is mogelijk om aan een PDF invoervelden toe te voegen. Overweeg om het formulier digitaal invulbaar te maken.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina www.waternet.nl/mijn-waternet/ staat een formulier waar de bezoeker onder andere het eigen e-mailadres en wachtwoord kan invullen. Het doel van deze en een aantal andere velden moet programmatisch kunnen worden bepaald, zodat velden automatisch kunnen worden ingevuld of extra hulp kan worden geboden bij het invullen. Dit kan door het autocomplete-attribuut aan de input-elementen toe te voegen. Bijvoorbeeld voor e-mailadres autocomplete="email".
Een overzicht van de velden waarvoor het autocomplete-attribuut van toepassing is en de waarde die nodig is in dit attribuut, staat op de pagina: www.w3.org/tr/wcag21/.
Op meerdere pagina's staan invoervelden die een autocomplete-attribuut nodig hebben, bijvoorbeeld pagina www.acc.waternet.nl/mijn-waternet/belasting/ staan de invoervelden 'Telefoonnummer' en 'E-mailadres' en op pagina awd.waternet.nl/bezoek/toegangskaarten/winkelwagen/bestellen staat het invoerveld 'E-mailadres'.

Uitkomst: Onvoldoende

Bevindingen: Op pagina www.waternet.nl/voldoen-we-aan-de-webrichtlijnen/ kunnen bezoekers de vraag 'Vond u deze informatie nuttig?' beantwoorden door de keuzerondjes 'Ja' of 'Nee' te selecteren. Wanneer een van deze keuzerondjes is geselecteerd verschijnt de knop 'Verzenden' op de pagina. Wanneer deze knop focus heeft is dat alleen te zien door een kleurverandering van de knop. Sommige mensen kunnen deze kleurverandering niet zien. Daarom moet focus op deze knop ook worden aangegeven op een andere manier, bijvoorbeeld door een focusrand te gebruiken.
Dit probleem komt ook voor op andere pagina's, bijvoorbeeld op awd.waternet.nl/beleef/wandelroutes/detail/86 bij onder andere de links 'GPS wandelroute' en 'Download PDF', en op awd.waternet.nl/bezoek/toegangskaarten/dagkaart bij de knop 'In winkelwagen'.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina www.waternet.nl/ staan blokken content onder de kop 'Nieuws en artikelen'. Als bezoekers met de muisaanwijzer over deze blokken heengaan verandert de tekstkleur van de kop van zwart naar blauw (HEX #2D8AB6). Op de witte achtergrond heeft deze tekst een te laag contrast. De contrastverhouding is hier 3.8:1, waar dat minimaal 4,5:1 moet zijn. Dit probleem doet zich zowel op de gewone versie als de hoog contrast versie van de pagina voor.

Op pagina www.waternet.nl/ staat onderaan een knop waarmee bezoekers de chat/digitale assistent kunnen openen. Wanneer dit venster is geopend is een invoerveld met de placeholdertekst 'Stel hier uw vraag aan Berry' te zien. Het contrast van deze grijze placeholdertekst (HEX #CCCCCC) op de witte achtergrond is te laag. De contrastverhouding is hier 1,6:1, waar dat minimaal 4,5:1 moet zijn.
Dit contrastprobleem komt ook voor op pagina www.waternet.nl/contact/.

Op pagina www.acc.waternet.nl/mijn-waternet/belasting/ staan de link 'Aanslagen' en de knoppen 'Aanpassen'. Wanneer bezoekers met de muisaanwijzer over deze elementen gaan verandert de tekstkleur naar een lichter blauw (HEX #2D8AB6). Deze kleur heeft te weinig contrast op de witte achtergrond. De contrastverhouding is hier 3,7:1, waar dat minimaal 4,5:1 moet zijn. Zorg ervoor dat teksten altijd voldoende contrast hebben, ook als bezoekers hier overheen gaan met de muisaanwijzer.
Dit contrastprobleem bij hover komt ook voor op andere pagina's, bijvoorbeeld bij links op pagina awd.waternet.nl/beleef/wandelroutes/detail/86 en www.waternet.nl/service-en-contact/verhuizen/.

Op pagina awd.waternet.nl/ staat de witte tekst 'Volg het werkt van onze boswachters' voor een afbeelding met een zandkleurige achtergrond (HEX #E5DABC). Het contrast is hier te laag. De contrastverhouding is hier 1,4:1, waar dat minimaal 4,5:1 moet zijn. Let goed op met het plaatsen van teksten over afbeeldingen. Het komt vaak voor dat de tekst niet overal voldoende contrast heeft vanwege lichte plekken in de afbeelding.

Op pagina awd.waternet.nl/beleef/wandelroutes/detail/86 staan blauwe teksten (HEX #01A5F0) op een witte achtergrond. Deze teksten hebben een te laag contrast. De contrastverhouding is hier 2,7:1, waar dat minimaal 4,5:1 moet zijn.

Op pagina awd.waternet.nl/bezoek/toegangskaarten/dagkaart staat de blauwe tekst 'Let op!' (HEX #01A5F0) op een grijze achtergrond (HEX #F8F8F8). Deze tekst heeft een te laag contrast. De contrastverhouding is hier 2,6:1, waar dat minimaal 4,5:1 moet zijn.

Op pagina awd.waternet.nl/bezoek/toegangskaarten/winkelwagen staat de grijze tekst 'Verwijder' (HEX #CECCCC) op een witte achtergrond. Het contrast is hier te laag. De contrastverhouding is hier 1,6:1, waar dat minimaal 4,5:1 moet zijn.
Dit contrastprobleem komt ook voor bij de placeholderteksten op pagina awd.waternet.nl/bezoek/toegangskaarten/winkelwagen/bestellen.

Op pagina awd.waternet.nl/bezoek/toegangskaarten/winkelwagen/bestellen staat de blauwe tekst 'Bestellen' (HEX #00AAEE) op een achtergrond (HEX #F8F8F8). Deze tekst heeft te weinig contrast. De contrastverhouding is hier 2,4:1, waar dat minimaal 4,5:1 moet zijn.

In de PDF op pagina awd.waternet.nl/content/routes/86-6428489f6dc1b-waterwandeling-35-km.pdf wordt gebruik gemaakt van een blauwe introductietekst (HEX #00A0EF) op een witte achtergrond. Deze kleurencombinatie heeft een te laag contrast. De contrastverhouding is hier 2,8:1, waar dat minimaal 4,5:1 moet zijn.

Wanneer bezoekers inzoomen tot 400% bij een schermbreedte van 1280x1024px, verdwijnt het navigatiemenu bij 125% achter een knop. Wanneer focus wordt geplaatst op deze menu knop verandert de tekstkleur en achtergrondkleur. Het contrast van de blauwe tekst (HEX #006FA2) op de blauwe achtergrond (HEX #2D8AB6) is te laag. De contrastverhouding is hier 1,4:1, waar dat minimaal 4,5:1 moet zijn. Dit probleem doet zich zowel op de gewone versie als de hoog contrast versie van de pagina voor.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina www.acc.waternet.nl/mijn-waternet/belasting/ worden teksten afgekapt wanneer bezoekers inzoomen tot 400% bij een schermbreedte van 1280x1024x. Het gaat hier om de teksten 'Kies voor automatische incasso' en 'Kies voor aanslag per e-mail'. Zorg ervoor dat teksten leesbaar blijven als bezoekers inzoomen op een pagina.

Wanneer bezoekers inzoomen tot 400% bij een schermbreedte van 1280x1024px op pagina www.waternet.nl/onderhoud-en-storingen/, is de lijst met alle storingen niet meer zichtbaar. De lijst is nog wel aanwezig, het is namelijk mogelijk om met het toetsenbord hier focus op te plaatsen. Zorg ervoor dat de lijst met storingen visueel zichtbaar blijft als bezoekers inzoomen op de pagina.

Wanneer bezoekers inzoomen tot 400% bij een schermbreedte van 1280x1024px op pagina www.waternet.nl/nieuws/2023/april/meer-drinkwater-nodig-aan-deze-oplossingen-werkt-waternet/, verdwijnt vanaf 175% het broodkruimelpad op de pagina. Content en functionaliteiten mogen niet verdwijnen wanneer bezoekers inzoomen op een pagina.

Wanneer bezoekers inzoomen tot 400% bij een schermbreedte van 1280x1024px op pagina www.waternet.nl/zakelijk/drinkwater-voor-bedrijven/kosten-met-watermeter/, verschijnt een horizontale scrollbalk over de hele pagina omdat de tabel buiten de schermweergave valt. Tabellen zijn een uitzondering en mogen inderdaad buiten de schermweergave vallen en met een scrolbalk zichtbaar worden gemaakt. Echter, hierbij is het de bedoeling dat de scrollbalk op de tabel wordt geplaatst en niet op de hele pagina.

Uitkomst: Onvoldoende

Bevindingen: Op pagina awd.waternet.nl/ staat een link die als visueel label een winkelwagentje heeft. Het contrast van dit blauwe icoon (HEX #01A5F0) op de witte achtergrond is te laag. De contrastverhouding is hier 2,7:1, waar dat minimaal 3:1 moet zijn.

Op pagina awd.waternet.nl/bezoek/toegangskaarten/winkelwagen staat een link gelabeld met een potlood-icoon (HEX #CECCCC). Dit icoon heeft een te laag contrast op de witte achtergrond. De contrastverhouding is hier 1,6:1, waar dat minimaal 3:1 moet zijn.

Op pagina www.waternet.nl/zakelijk/waterschapsbelasting-voor-bedrijven/kwijtschelding-kleine-ondernemers/ wordt in het subnavigatiemenu aangegeven op welke pagina de bezoeker zich bevindt met een grijze balk (HEX #EEEEEE). Deze balk heeft onvoldoende contrast op de witte achtergrond. De contrastverhouding is hier 1,1:1, waar dat minimaal 3:1 moet zijn. Dit contrastprobleem doet zich alleen voor op de hoog contrast versie van de pagina. Het komt ook voor op pagina www.waternet.nl/ons-water/rioolwater/100-jaar-schoon-water-in-amsterdam/afvalwater-bron-van-….

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Als bezoekers op pagina www.waternet.nl/mijn-waternet/ verkeerde inloggegevens invullen bij 'Inloggen voor Drinkwater' verschijnt er een foutmelding boven het inlogformulier. Deze foutmelding heeft een sluitknop die niet te bedienen is met het toetsenbord. Het is namelijk niet mogelijk om focus te plaatsen op de knop. Een oorzaak hiervoor is mogelijk dat de knop is opgemaakt met een a-element zonder href-attribuut. Zorg ervoor dat de knop te bedienen is met het toetsenbord, bijvoorbeeld door deze op te maken met een button-element.

Wanneer op pagina awd.waternet.nl/bezoek/toegangskaarten/winkelwagen/bestellen het selectievakje 'Gebruik de gegevens uit MijnAWD' is geselecteerd, verschijnt de link 'Login om uw gegevens te gebruiken' op de pagina. Deze link is niet te bedienen met het toetsenbord.

Advies: Op pagina www.waternet.nl/onderhoud-en-storingen/ kunnen bezoekers het veld 'Postcode of adres' invullen. De enige manier op de invoer in dit veld te verzenden in door op de enterknop op het toetsenbord te drukken. Niet alle bezoekers hebben deze mogelijkheid, bijvoorbeeld wanneer zij gebruik maken van één knop om de website te bedienen. Overweeg om een knop toe te voegen waarmee bezoekers de invoer in dit veld kunnen verzenden.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de pagina www.waternet.nl/ons-water/rioolwater/100-jaar-schoon-water-in-amsterdam/afvalwater-bron-van-… wordt gebruikgemaakt van de videospeler van YouTube. Deze videospeler maakt gebruik van bediening door enkele tekentoetsen, bijvoorbeeld f voor fullscreen. Deze functionaliteit is iets wat mensen die afhankelijk zijn van voorleessoftware in de weg kan staan. Deze mensen zijn juist afhankelijk van die korte commando's om met voorleessoftware hun computer te bedienen. Los dit op door de embedcode van de YouTube video aan te passen zodat de bediening met tekentoetsen uit staat. De eigenschap die toegevoegd moet worden aan de embedcode is 'disablekb=1'. Met deze aanpassing zorg je ervoor dat je voldoet aan dit succescriterium.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina awd.waternet.nl/ is geen mechanisme aanwezig waarmee bezoekers herhalende blokken content kunnen overslaan. Het navigatiemenu komt bijvoorbeeld voor op meerdere pagina's van het domein awd.waternet.nl. Zorg ervoor dat als content op meerdere pagina's wordt herhaald bezoekers dit kunnen overslaan. Een mogelijk oplossing voor dit probleem is het toevoegen van een skiplink aan de website.

Uitkomst: Onvoldoende

Bevindingen: De PDF awd.waternet.nl/content/routes/86-6428489f6dc1b-waterwandeling-35-km.pdf heeft geen documenttitel. Een documenttitel is belangrijk voor gebruikers van hulpsoftware, het geeft aan wat het hoofdonderwerp van het document is. Ook kunnen lezers het bestand herkennen aan de documenttitel wanneer meerdere PDF's openstaan. Voeg daarom een documenttitel toe aan de documenteigenschappen. Zorg er ook voor dat bij openen van het bestand de documenttitel wordt getoond en niet de bestandsnaam, dit kan worden ingesteld bij de documenteigenschappen onder 'Weergave bij openen'.

Uitkomst: Onvoldoende

Bevindingen: Op onder ander www.waternet.nl/ staan in de header twee navigatiemenu's: één die bovenaan de pagina staat met onder andere de link 'Zakelijk' en één die onder het eerste menu staat met daarin de links 'Service' en Storingen'. Het tweede navigatiemenu krijgt na de skiplink als eerst focus wanneer bezoekers met het toetsenbord over de pagina navigeren. Pas na de link 'Mijn Waternet' krijgt de link 'Zakelijk' en de rest van het eerste menu focus. Dit is geen logische focusvolgorde. De focus volgorde moet de leesvolgorde van de pagina aanhouden (tenzij afwijking van de leesvolgorde nodig is voor het bedienen van de pagina). Zorg ervoor dat de toetsenbordfocus bovenaan de pagina begint en daarna op elk bedienbaar element wordt geplaatst en daarbij de leesvolgorde aanhoudt.
Dit probleem komt voor op alle pagina's waarop deze navigatiemenu's op staan.

Bezoekers kunnen op onder andere pagina www.waternet.nl/ een venster openen met de link 'Mijn Waternet'. Wanneer dit venster is geopend is de achterliggende pagina slecht zichtbaar doordat deze donker is gemaakt. Voor toetsenbordgebruikers is het mogelijk om focus te plaatsen op de achterliggende pagina terwijl dit venster openstaat. Dit is vervelend voor ziende toetsenbordgebruikers, ook voor screenreadergebruikers omdat focus wordt geplaats op de link 'Service' en dat is niet een logische volgorde. Los dit probleem op door ervoor te zorgen dat focus binnen het venster blijft tot de bezoekers het afsluit, of dat het venster automatisch inklapt wanneer focus hieruit wordt gehaald en dat focus verder gaat vanaf de link 'Mijn Waternet'.

Op onder andere pagina www.waternet.nl/ staat onderaan een knop waarmee de chat/digitale assistent kan worden geopend. Deze knop krijgt met het toetsenbord focus na de laatste link onder de kop 'Nieuws en artikelen' en voor de link 'Service' (in de footer). Dit is geen logische focus volgorde en kan verwarrend zijn voor ziende toetsenbordgebruikers. Omdat de knop onderaan de pagina staat is het de verwachting dat de knop ook als laatst op de pagina focus krijgt.
Dit probleem komt voor op meerdere pagina’s.

Als bezoekers op pagina www.waternet.nl/mijn-waternet/ verkeerde inloggegevens invullen bij 'Inloggen voor Drinkwater' verschijnt er een foutmelding boven het inlogformulier zonder dat de pagina ververst. De toetsenbordfocus blijft op de knop ‘Inloggen’ staan wanneer deze foutmelding verschijnt. Om de bediening van de pagina niet in de weg te zitten moet de focus geplaatst worden op de foutmelding zodra deze verschijnt, of plaatst de foutmelding onder de knop 'Inloggen'.

Als bezoekers met het toetsenbord over pagina www.waternet.nl/onderhoud-en-storingen/ navigeren is het mogelijk om focus te plaatsen op de verbogen link 'Sneltoetsen' (bij de kaart). Ziende toetsenbordgebruikers hebben niets aan deze verbogen link omdat zij niet kunnen zien dat deze link focus heeft. Ook kunnen zij hierdoor niet het sneltoetsenvenster openen. Een mogelijke oplossing voor dit probleem is het zichtbaar maken van deze link.
In deze kaart staan ook andere links die visueel niet zichtbaar zijn maar wel focus krijgen.

Als pagina www.waternet.nl/service-en-contact/verhuizen/aanmelden/ voor het eerst wordt geladen staat de toetsenbordfocus automatisch op de link 'Start mijn aanmelding'. Hierdoor kunnen bezoekers die het scherm niet kunnen zien de informatie dat boven deze link staat missen. Zorg ervoor dat de focus bovenaan de pagina begint als deze wordt geladen.
Dit probleem komt voor in meerdere stappen in dit proces.

Wanneer toetsenbordgebruikers met de tabtoets over pagina www.waternet.nl/service-en-contact/verhuizen/aanmelden/ navigeren, wordt focus geplaatst op een niet bedienbaar element na de knop 'Sluiten'. Ook is het hier niet zichtbaar waar focus op wordt geplaatst. Dit kan verwarrend zijn voor ziende toetsenbordgebruikers. Zorg ervoor dat focus alleen op zichtbare elementen die bedienbaar zijn wordt geplaatst.

Wanneer bezoekers op pagina www.waternet.nl/ inzoomen tot 400% bij een schermbreedte van 1280x1024px, verdwijnt het navigatiemenu bij 125% achter een knop. Wanneer bezoekers die de website bedienen met het toetsenbord het menu openen, is het voor hen mogelijk om focus te plaatsen op de achterliggende pagina terwijl het menu openstaat. Dit is vervelend voor ziende toetsenbordgebruikers, de achterliggende pagina is door het menu namelijk niet goed zichtbaar. Zorg ervoor dat focus in het menu blijft tot de bezoekers deze afsluit, of zorg ervoor dat het menu automatisch afsluit zodra focus uit het menu wordt gehaald.

Wanneer bezoekers inzoomen tot 400% bij een schermbreedte van 1280x1024px op pagina www.waternet.nl/, verdwijnt het navigatiemenu bij 125% achter een knop. Als dit menu is geopend is een sluitknop zichtbaar. Als focus is geplaatst in het menu en bezoekers met de tab en shift combinatie terug navigeren wordt focus niet geplaatst op de sluitknop. In plaats daarvan wordt focus geplaatst op het Waternet logo. De focus volgorde moet ook logisch zijn wanneer bezoekers met de tab en shift combinatie terug navigeren.

Wanneer bezoekers op pagina www.acc.waternet.nl/mijn-waternet/belasting/ inzoomen tot 400% bij een schermbreedte van 1280x1024px, verdwijnt vanaf 125% het navigatiemenu achter een knop. Als toetsenbordgebruikers dit menu openen gaat de focus eerst verder op de achterliggende pagina voordat deze in het menu terecht komt. Hierdoor weten ziende toetsenbordgebruikers niet welk element focus heeft op dat moment. Zorg ervoor dat na het openen van het menu focus hierin komt te staat en dat de focus in het menu blijft tot de bezoeker deze afsluit.

Wanneer bezoekers op pagina awd.waternet.nl/ bij een schermbreedte van 1280x1024px inzoomen tot 400%, verdwijnt het navigatiemenu vanaf 175% achter een knop. Wanneer het menu openstaat is het voor toetsenbordgebruikers mogelijk om focus te plaatsen op de achterliggende pagina. Hierdoor weten ziende toetsenbordgebruikers niet welke elementen focus hebben. Een mogelijk oplossing voor dit probleem is om ervoor te zorgen dat focus in het menu blijft tot de bezoeker het afsluit, of laat het menu automatisch inklappen wanneer focus uit het menu wordt gehaald.

Uitkomst: Onvoldoende

Bevindingen: Wanneer de uitklapbare knoppen op pagina www.waternet.nl/service-en-contact/verhuizen/ zijn uitgeklapt zijn meerdere links met de linktekst 'Lees meer' zichtbaar. Deze links verwijzen allemaal naar een andere pagina maar hebben dezelfde linktekst. Een bezoeker die het scherm niet kan zien en/of gebruikmaakt van een linklijst, kan het verschil tussen deze links niet zien. Daarom is het belangrijk dat wanneer links dezelfde linktekst hebben deze naar dezelfde pagina verwijzen. Los dit probleem op door bijvoorbeeld de linktekst aan te vullen met de naam van de pagina waar de link naar verwijst.
Dit probleem komt ook voor op pagina www.waternet.nl/werken-bij/vacatures/projectleider-natuurbeheer/ bij de twee links met de linktekst 'LinkedIn'.

Wanneer de knop 'I cannot submit my yearly meter reading because I'm on holiday. What happens now?' op pagina www.waternet.nl/en/questions/water-meter/ is uitgeklapt is een link zonder toegankelijke naam zichtbaar (zie ook succescriterium 4.1.2). Hierdoor is de link niet goed te bedienen met hulpsoftware. Zorg ervoor dat de link een toegankelijke naam krijgt, bijvoorbeeld door het pijltje waarmee de link is gelabeld een alternatieve tekst te geven. Onder de knop 'Where can I find my meter reading notification number?' op deze pagina staat ook een link zonder toegankelijke naam.

Advies: Op pagina www.waternet.nl/ staan blokken content onder de kop 'Nieuws en artikelen'. Deze blokken zijn opgemaakt als link, alle elementen binnen het blok zijn genest in een a-element. Hierdoor is de linktekst van deze links erg lang, omdat de alternatieve tekst van de afbeelding, de kop en onderstaande tekst hier allemaal onderdeel van zijn. Dit kan vervelend zijn voor screenreadergebruikers, want hierdoor is het linkdoel mogelijk niet duidelijk. Een oplossing hiervoor is om alleen de kop in deze blokken op te maken met het a-element. Daarna kan het klikgebied van de link worden vergroot met JavaScript.
Dit komt ook voor op andere pagina's, bijvoorbeeld bij de blokken onder de kop 'Populaire routes' op pagina awd.waternet.nl/beleef/wandelroutes/detail/86 en bij de blokken onder de koppen 'Nieuws' en 'Storingen' op pagina www.waternet.nl/actueel/.

Uitkomst: Onvoldoende

Bevindingen: Alle pagina's op het domein awd.waternet.nl/ zijn maar op één manier te vinden, dat is via de link naar de pagina. Er moeten minstens twee manieren zijn waarop alle pagina's binnen het domein gevonden kunnen worden, bijvoorbeeld met een sitemap of zoekfunctie op de website.

Uitkomst: Onvoldoende

Bevindingen: Op pagina www.waternet.nl/ons-water/rioolwater/100-jaar-schoon-water-in-amsterdam/afvalwater-bron-van-… staat een iframe-element dat via het title-attribuut het label 'YouTube video player' heeft gekregen. Dit label omschrijft de inhoud van het iframe niet. Het is voldoende om de titel van de video, 'Met groengas op weg naar een duurzame toekomst', in het title-attribuut te plaatsen.

Advies: Op pagina awd.waternet.nl/beleef/wandelroutes/detail/86 staat de link 'Download PDF'. Deze link verwijst naar een pagina waar de PDF op staat en laat de PDF niet downloaden wanneer bezoekers de link activeren. Dit kan mogelijk verwarrend zijn voor sommige bezoekers. Zij kunnen verwachten dat de PDF automatisch download na het activeren van deze link. Overweeg om een andere linktekst te gebruiken voor deze link.
Dit geldt ook voor de linktekst 'Download formulier kwijtschelding voor ondernemers (pdf, 1,6 MB)' op pagina www.waternet.nl/zakelijk/waterschapsbelasting-voor-bedrijven/kwijtschelding-kleine-ondernemers/.

Uitkomst: Onvoldoende

Bevindingen: Op pagina www.waternet.nl/mijn-waternet/ staat het invoerveld 'Wachtwoord'. In dit veld staat een knop waarmee het wachtwoord kan worden getoond. Wanneer deze knop focus heeft is dat niet zichtbaar. Zorg ervoor dat focus altijd wordt aangegeven met een visuele indicator, bijvoorbeeld door een focusrand te gebruiken.

Op pagina www.waternet.nl/mijn-waternet/ staan de knoppen 'Inloggen voor Drinkwater' en 'Inloggen voor Belasting'. Als deze knoppen zijn uitgeklapt en deze met het toetsenbord focus krijgen, wordt dit niet aangegeven met een focusrand. Zorg ervoor dat focus altijd wordt aangegeven met een indicator zoals een focusrand, ook als elementen zijn uitgeklapt.

Op pagina www.acc.waternet.nl/mijn-waternet/belasting/ staat twee keer de knop 'Aanpassen'. Wanneer deze knoppen focus hebben wordt dit niet aangegeven met een visuele indicator. Hierdoor is het voor ziende bezoekers lastig om te bepalen welke elementen focus hebben. Gebruik een focusrand om dit probleem op te lossen.
Wanneer deze knoppen geactiveerd worden verschijnt er een venster in beeld. In dit venster wordt de focus ook niet aangegeven met een visuele indicator op de sluitknop. Dit komt ook voor in het venster dat kan worden geopend op pagina www.acc.waternet.nl/mijn-waternet/belasting/ met de knop 'Bekijk details'.

Wanneer de knop 'Inloggen' op pagina awd.waternet.nl/ focus heeft is dat niet zichtbaar. Zorg ervoor dat de focus hier wordt aangegeven met een visuele indicator, bijvoorbeeld een focusrand. Ook de social media links op deze pagina krijgen geen zichtbare focus.

In de kaart op pagina www.waternet.nl/onderhoud-en-storingen/ staan verschillende knoppen die geen zichtbare focus krijgen. Zorg ervoor dat focus op deze knoppen wordt aangegeven met een focusrand.

Wanneer bezoekers op pagina awd.waternet.nl/ bij een schermbreedte van 1280x1024px inzoomen tot 400%, verschijnt vanaf 150% een carrousel onder de kop 'Nu in de AWD'. In deze carrousel staan twee knoppen om de vorige en volgende slide te tonen. Wanneer deze knoppen toetsenbordfocus hebben is dat niet zichtbaar. Zorg ervoor dat focus wordt aangegeven met een visuele indicator, bijvoorbeeld een focusrand.
Dit probleem komt ook voor bij de andere carrousel die op de pagina verschijnt.

Wanneer bezoekers op pagina awd.waternet.nl/ bij een schermbreedte van 1280x1024px inzoomen tot 400%, verdwijnt het navigatiemenu vanaf 175% achter een knop. Wanneer focus is geplaats op deze knop is dat niet zichtbaar. Zorg ervoor dat de focus wordt aangeven met een visuele indicator, bijvoorbeeld een focusrand.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Wanneer bezoekers op pagina awd.waternet.nl/ bij een schermbreedte van 1280x1024px inzoomen tot 400%, verschijnt vanaf 150% een carrousel onder de kop 'Nu in de AWD'. In deze carrousel staan twee knoppen om de vorige en volgende slide te tonen. De toegankelijke namen van deze knoppen zijn 'Next' en 'Previous'. Wanneer elementen een toegankelijke naam hebben in een andere taal dan de hoofdtaal van de pagina moet hierop een taalwissel zijn aangegeven. Geef daarom een taalwissel aan, of vertaal de toegankelijke namen naar het Nederlands. Het is overigens beter als elementen op een Nederlandse pagina ook een Nederlandse toegankelijke naam hebben.
Dit probleem komt ook voor bij de andere carrousel die op de pagina verschijnt.

Opmerking: Op pagina www.waternet.nl/ staat de link 'English'. Het is beter om op een link naar een Engelstalige pagina een taalwissel aan te geven. Zo spreekt hulpsoftware de link goed uit.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Wanneer bezoekers de contactgegevens op pagina www.acc.waternet.nl/mijn-waternet/belasting/ aanpassen is het invoerveld 'E-mailadres' te zien. Wanneer dit invoerveld leeg is staat hierbij de foutmelding 'Dit is een verplicht veld'. Dit is geen goede foutmelding, het geeft namelijk niet aan welke fout de bezoeker heeft gemaakt. De gemaakte fout is hier dat het veld leeg is. Zorg ervoor dat een foutmelding altijd aangeeft welke fout de bezoeker heeft gemaakt.
Deze foutmelding verschijnt ook op www.waternet.nl/service-en-contact/verhuizen/aanmelden/ bij de stap 'Wanneer krijgt u de sleutel?'.

Wanneer bezoekers op pagina awd.waternet.nl/bezoek/toegangskaarten/winkelwagen/bestellen een fout maken bij het invullen van de twee e-mailadressen, verschijnt er een foutmelding in de vorm van een rood kruis bij het tweede e-mailadres invoerveld. Als een fout in een formulier automatisch ontdekt wordt moet de foutmelding in tekst worden aangegeven. Voeg een tekstuele foutmelding toe om dit probleem op te lossen.

Uitkomst: Onvoldoende

Bevindingen: Op pagina www.waternet.nl/ staat onderaan een knop waarmee bezoekers de chat/digitale assistent kunnen openen. Wanneer dit venster is geopend is een invoerveld met de placeholdertekst 'Stel hier uw vraag aan Berry' zichtbaar. Invoervelden hebben altijd een visueel label nodig dat buiten het veld staat, een placeholdertekst is niet geschikt als visueel label omdat deze verdwijnt bij invoer. Zorg ervoor dat het invoerveld een label krijgt dat buiten het veld staat en blijft staan als bezoekers iets invoeren in het veld.
Hetzelfde invoerveld komt ook voor op pagina www.waternet.nl/contact/.
Dit probleem komt ook voor bij andere invoervelden, bijvoorbeeld op pagina www.waternet.nl/onderhoud-en-storingen/ bij het invoerveld met de placeholdertekst 'Postcode of adres'.

Op pagina awd.waternet.nl/bezoek/toegangskaarten/dagkaart staan drie comboboxen die geen eigen label hebben. Deze comboboxen hebben een label nodig dat aangeeft wat bezoekers hier moeten invullen, bijvoorbeeld 'Dag', 'Maand' en 'Jaar'. Geef elke combobox een eigen label en koppel deze aan de combobox met for- en id-attributen.
Op pagina www.waternet.nl/service-en-contact/verhuizen/aanmelden/ staat ook een combobox zonder visueel label, en op pagina www.waternet.nl/service-en-contact/verhuizen/aanmelden/ bij de stap 'Wat is uw geboortedatum?'.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de chatfunctie op pagina www.waternet.nl/ is gebruik gemaakt van het alt-attribuut op een button- en input-element. Het alt-attribuut werkt niet op deze elementen en mag daarom niet op deze manier worden gebruikt. Verwijder de alt-attributen van deze elementen.
Deze chatfunctie komt ook voor op andere pagina's, bijvoorbeeld op www.waternet.nl/contact/ en www.waternet.nl/voldoen-we-aan-de-webrichtlijnen/.

Op pagina www.waternet.nl/contact/ komen meerdere </p> voor zonder openingstags voor. Dit kan problemen opleveren voor hulpsoftware. Plaatst een <p> op de juiste plek of verwijder de losse </p>.
Dit probleem komt ook voor in de code van andere pagina's, bijvoorbeeld op www.waternet.nl/zakelijk/waterschapsbelasting-voor-bedrijven/kwijtschelding-kleine-ondernemers/ en op www.waternet.nl/service-en-contact/verhuizen/.

Op pagina www.waternet.nl/contact/ zijn dezelfde id's gebruikt voor verschillende elementen. Het gaat hierbij om de id's:

• 'iChatConversation'
• 'iChatLinesAndTyping'
• 'iChatLines'
• 'iChatTyping'
• 'iChatInput'
• 'iChatForm'
• 'iChatInputPrefix'
• 'iChatInputField'
• 'iChatInputLargeField'
• 'iChatSend'
• 'iChatExtraInfo'

Elke element moet een unieke id hebben. Wanneer dezelfde id's zijn gebruikt voor verschillende elementen kan dit problemen opleveren voor hulpsoftware.

Dit probleem komt ook voor op pagina's www.waternet.nl/bestaatniet/ en www.waternet.nl/zoek/ bij verschillende id's.

Uitkomst: Onvoldoende

Bevindingen: Op onder andere www.waternet.nl/ staat de knop 'Contrast' waarmee bezoekers een hoog contrast versie van de website kunnen inschakelen. Visueel is duidelijk wanneer deze knop ingedrukt is, omdat de kleur van de knop verandert. In de code is deze informatie niet beschikbaar. Maak gebruik van aria-pressed of maak van de knop een toggle knop om dit probleem op te lossen.
Deze knop komt voor op meerdere pagina's, bijvoorbeeld op www.waternet.nl/mijn-waternet/ en www.waternet.nl/zoek/.

Op pagina www.waternet.nl/ staan een knop waarmee de chat/digitale assistent kan worden geopend. Deze knop geeft geen toegankelijke naam. Hierdoor is de knop moeilijk te bedienen voor bezoekers die gebruikmaken van hulpsoftware. Op het button-element is wel een aria-label geplaatst, maar dit attribuut heeft geen waarde. Zorg ervoor dat de knop een toegankelijke naam krijgt.
Deze knop komt voor op meerdere pagina's, bijvoorbeeld op www.waternet.nl/mijn-waternet/ en www.waternet.nl/bestaatniet/.

Wanneer bezoekers op pagina www.waternet.nl/ op de knop 'Zoeken' drukken, opent een venster met een zoekveld. In dit venster staat een sluitknop en een zoekknop zonder toegankelijke naam. Hierdoor zijn de knoppen moeilijk te bedienen met hulpsoftware. Zorg ervoor dat deze knoppen een goede toegankelijke naam krijgen, bijvoorbeeld door gebruik te maken van aria-label.
Een knop zonder toegankelijke naam komt voor op meerdere pagina's, bijvoorbeeld op www.waternet.nl/zoek/ en www.waternet.nl/service-en-contact/verhuizen/.

Als bezoekers op pagina www.waternet.nl/mijn-waternet/ verkeerde inloggegevens invullen bij 'Inloggen voor Drinkwater' verschijnt er een foutmelding boven het inlogformulier. In deze foutmelding staat een sluitknop die is opgemaakt met een a-element. Hierdoor komt deze knop bijvoorbeeld voor linklijsten van screenreaders. Dit kan verwarrend zijn voor bezoekers. Zorg ervoor dat elementen altijd de juiste rol hebben die overeenkomt met de functie; knoppen voeren een actie uit en links verwijzen bezoekers door naar een andere pagina of plek op de pagina.
Dit probleem komt meerdere keren voor op de website, bijvoorbeeld op pagina www.waternet.nl/service-en-contact/verhuizen/aanmelden/ en pagina www.waternet.nl/# bij de link 'Mijn Waternet'.

Op pagina awd.waternet.nl/ staat een link die visueel gelabeld is met een winkelwagentje. Deze link heeft geen toegankelijke naam. Hierdoor is de link moeilijk te bedienen met hulpsoftware. Zorg ervoor dat de link een toegankelijke naam krijgt, bijvoorbeeld door gebruik te maken van aria-label.

Op pagina awd.waternet.nl/bezoek/toegangskaarten/dagkaart staan comboboxen zonder toegankelijke naam. Hierdoor zijn deze comboboxen niet goed te bedienen met hulpsoftware. Zorg ervoor dat deze comboboxen een toegankelijke naam krijgen, bijvoorbeeld door elke combobox een eigen label te geven en deze aan de combobox te koppelen met for en id-attributen.
Op pagina www.waternet.nl/service-en-contact/verhuizen/ staan ook twee comboboxen zonder toegankelijke naam, en op pagina www.waternet.nl/service-en-contact/verhuizen/aanmelden/ staat ook een combobox zonder toegankelijke naam.

Op pagina awd.waternet.nl/bezoek/toegangskaarten/winkelwagen staat een link gelabeld met een potlood-icoon. Deze link heeft geen toegankelijke naam. Hierdoor is de link moeilijk te bedienen met hulpsoftware. Zorg ervoor dat de link een toegankelijke naam krijgt, bijvoorbeeld door gebruik te maken van aria-label.
Hetzelfde icoon komt ook zonder toegankelijke naam voor op pagina awd.waternet.nl/bezoek/toegangskaarten/winkelwagen/controleren.

Bovenaan pagina www.waternet.nl/service-en-contact/verhuizen/aanmelden/ staat een div-element dat is opgemaakt met role=progressbar. Deze voortgangsbalk heeft een toegankelijke naam nodig. Maak gebruik van aria-label of een soortgelijke methode om dit probleem op te lossen.

Bij de stap 'Kies uw adres' op pagina www.waternet.nl/service-en-contact/verhuizen/aanmelden/ is een lijst keuzerondjes opgemaakt met ul- en li-elementen. Op het ul-element is role=radiogroup geplaatst, hierdoor zijn de li-element niet correct genest in een ul-element. Een mogelijke oplossing voor dit probleem is om role=radiogroup te verwijderen van het ul-element.

Op onder andere pagina www.waternet.nl/ staat de link 'Mijn Waternet' waarmee bezoekers een venster kunnen openen. Visueel is duidelijk wanneer dit venster is uitgeklapt maar de informatie is niet aanwezig in de code. Zorg ervoor dat in de code wordt aangegeven wanneer deze link is uitgeklapt, bijvoorbeeld door gebruik te maken van aria-expanded.

Op pagina www.waternet.nl/ons-water/rioolwater/100-jaar-schoon-water-in-amsterdam/afvalwater-bron-van-… staat een iframe-element zonder title-attribuut. Hierdoor heeft het iframe geen toegankelijke naam. Het is voldoende om de naam van de video ('Een nieuwe rioolwaterzuivering in Weesp') in het title-attribuut te plaatsen.

Op pagina www.waternet.nl/en/questions/water-meter/ staan links zonder een toegankelijke naam. Geef deze links een goede toegankelijke naam. Zie ook succescriterium 2.4.4.

Wanneer bezoekers inzoomen tot 400% bij een schermbreedte van 1280x1024px op pagina www.waternet.nl/, verdwijnt het navigatiemenu bij 125% achter een knop. Visueel is duidelijk wanneer deze knop is uitgeklapt, maar deze informatie is niet beschikbaar in de code. Zorg ervoor dat in de code wordt aangegeven wanneer de knop in- en uit is geklapt, bijvoorbeeld door gebruik te maken van aria-expanded.
Dit probleem komt ook voor bij de knop 'Zoeken' op dezelfde pagina.
Dit probleem komt voor op meerdere pagina's binnen het domein waternet.nl.

Wanneer bezoekers op pagina awd.waternet.nl/ bij een schermbreedte van 1280x1024px inzoomen tot 400%, verdwijnt het navigatiemenu vanaf 175% achter een knop. Deze knop heeft geen toegankelijke naam. Ook niet wanneer de knop in een sluitknop verandert wanneer het menu is geopend. Zorg ervoor dat deze knop een toegankelijke naam krijgt die de functie van de knop aangeeft. Wanneer de knop in een sluitknop verandert moet de toegankelijke naam mee veranderen.

Wanneer bezoekers inzoomen tot 400% bij een schermbreedte van 1280x1024px op pagina awd.waternet.nl/bezoek/toegangskaarten/winkelwagen, verdwijnt de tekst 'Verwijderen' en bestaat de link alleen uit een vuilnisbak-icoon. In dit geval heeft de link geen toegankelijke naam. Zorg ervoor dat de link een toegankelijke naam krijgt.
Een soortgelijk probleem komt ook voor op pagina www.waternet.nl/service-en-contact/verhuizen/aanmelden/ met de sluitknop.

Uitkomst: Onvoldoende

Bevindingen: Op pagina www.waternet.nl/voldoen-we-aan-de-webrichtlijnen/ krijgen bezoekers de melding 'Bedankt voor uw feedback!' te zien nadat zij het formulier 'Vond u deze informatie nuttig?' hebben opgestuurd. Deze melding wordt niet opgemerkt door voorleessoftware. Hierdoor missen bezoekers die het scherm niet kunnen zien deze informatie. Zorg ervoor dat de melding wordt opgemerkt door voorleessoftware, bijvoorbeeld door gebruik te maken van aria-live.

Op pagina www.acc.waternet.nl/mijn-waternet/belasting/ krijgen bezoekers een melding voordat zij worden automatisch worden uitgelogd. Deze melding wordt niet opgemerkt door voorleessoftware, hierdoor kunnen bezoekers die het scherm niet kunnen zien deze melding missen. Zorg ervoor dat de melding wordt opgemerkt voor voorleessoftware, bijvoorbeeld door gebruik te maken van aria-live.

Opmerking: Op pagina www.waternet.nl/ staat een knop waarmee de chat/digitale assistent kan worden geopend. In deze chat kunnen bezoekers berichten ontvangen. De ontvangen berichten worden voorgelezen door een screenreader. Echter, elke keer wanneer de bezoeker een nieuw bericht ontvangen worden alle berichten in de chat voorgelezen. Dit kan irritant zijn voor screenreadergebuikers. Het is beter om ervoor te zorgen dat alleen de nieuw ontvangen berichten worden voorgelezen door screenreaders.
Deze chat komt ook voor op pagina www.waternet.nl/contact/.