Toegankelijkheidsonderzoek

Rapport:
Audit digitale toegankelijkheid website Waternet


Onderzoeker
Kaylee, Swink; Yulia, Swink
Datum
16 mei 2023
Opdrachtgever
Waternet

Samenvatting onderzoeksresultaat

De website Waternet voldoet nog niet aan WCAG 2.1 niveau AA. Er zijn 24 van de 50 succescriteria waar één of meer fouten zijn gevonden. In dit document is vastgelegd in hoeverre de website voldoet aan de toegankelijkheidseisen die vastgelegd zijn in WCAG, de Web Content Accessibility Guidelines.

De website waternet.nl en subdomein awd.waternet.nl zijn onderzocht tussen 1 en 16 mei 2023. Het onderzoek is uitgevoerd aan de hand van de evaluatiemethode WCAG-EM. Doel van dit rapport is om te bepalen welke verbeteringen nodig zijn om dit digitaal kanaal toegankelijker te krijgen.

De belangrijkste bevindingen uit dit onderzoek zijn:

Het onderzoek richt zich specifiek op de toegankelijkheid van de website voor mensen met een functiebeperking, zoals mensen die blind, doof, laaggeletterd zijn of andere functieproblemen hebben. Voor hen is het van belang dat de website technisch en inhoudelijk zo is ingericht dat de site voor hen goed bruikbaar is. Een website optimaliseren voor toegankelijkheid heeft meer voordelen; het maakt de website beter bruikbaar voor iedereen (bijvoorbeeld ook voor mensen die op hun mobieltje kijken in een zonnige omgeving) en het maakt de site beter vindbaar in zoekmachines.

Scope van de evaluatie

Naam website Waternet
Scope van de website Binnen de scope van dit onderzoek vallen:
Buiten de scope van het onderzoekvallen:
  • Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
  • Alle externe systemen en websites waar via het onderzochte domein met een link naar wordt verwezen.
Conformiteitsdoel WCAG 2.1 niveau AA
Basisniveau van toegankelijkheid ondersteund Gangbare browsers en hulpsoftware

Overzicht toetsresultaat

Principe Voldoende Onvoldoende Onbekend
1 Waarneembaar 11 9 0
2 Bedienbaar 8 9 0
3 Begrijpelijk 7 3 0
4 Robuust 0 3 0
Totaal 26 24 0

Leeswijzer

Dit onderzoek is een momentopname. De website kan inmiddels veranderd zijn. De gevonden problemen zijn slechts voorbeelden. Ga daarom bij elk probleem de gehele website na of dit ook op andere plaatsen voorkomt. Dit onderzoek is slechts een steekproef van een aantal pagina's. Er zijn zo veel mogelijk verschillende type pagina's opgenomen in de sample om zo een goede indruk te krijgen van de toegankelijkheid. Let op! Bij het aanbrengen van verbeteringen of wijzigingen op de website/app kunnen nieuwe problemen ontstaan. Succescriteria gemarkeerd met "Niet aanwezig" worden automatisch goedgekeurd. Succescriteria gemarkeerd met "Onbekend" worden niet goedgekeurd.

Uitgebreide toetsresultaten


1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Alle niet-tekstuele content die aan de gebruiker wordt gepresenteerd, heeft een tekstalternatief dat een gelijkwaardig doel dient, behalve voor de hierna vermelde situaties.

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Uitkomst: Onvoldoende

Bevindingen: Op https://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 https://www.waternet.nl/en/.

Op onder andere https://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 https://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 https://www.waternet.nl/nieuws/2023/april/meer-drinkwater-nodig-aan-deze-oplossingen-werkt-waternet/ en https://www.waternet.nl/ons-water/rioolwater/100-jaar-schoon-water-in-amsterdam/afvalwater-bron-van-grondstoffen-en-energie/.

Op pagina https://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 https://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 https://awd.waternet.nl/ bij de afbeeldingen en links onder de kop 'Activiteiten' en op pagina https://awd.waternet.nl/bezoek/toegangskaarten/ bij de blokken zoals 'Dagkaart'.

Op pagina https://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 https://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 https://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 https://awd.waternet.nl/beleef/wandelroutes/detail/86 bij de koppen en afbeeldingen onder de kop 'Populaire routes'.

Op pagina https://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 https://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 https://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 https://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 https://www.waternet.nl/nieuws/2023/april/meer-drinkwater-nodig-aan-deze-oplossingen-werkt-waternet/ en op pagina https://www.waternet.nl/ons-water/rioolwater/100-jaar-schoon-water-in-amsterdam/afvalwater-bron-van-grondstoffen-en-energie/.

Op pagina https://www.waternet.nl/service-en-contact/verhuizen/aanmelden/#/nieuw-adres 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 https://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 https://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.


1.2 Op tijd gebaseerde media

1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen) (Niveau A)

Voor media met vooraf opgenomen louter-geluid en vooraf opgenomen louter-videobeeld is het volgende waar, behalve als de audio of video een media-alternatief voor tekst is en duidelijk als zodanig is gelabeld:

Informatie over succescriterium 1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen)

Uitkomst: Niet aanwezig


1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen) (Niveau A)

Er worden ondertitels voor doven en slechthorenden geleverd voor alle vooraf opgenomen audiocontent in gesynchroniseerde media, behalve als het mediabestand een media-alternatief voor tekst is en duidelijk als zodanig is gelabeld.

Informatie over succescriterium 1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen)

Uitkomst: Voldoende


1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen) (Niveau A)

Er wordt een alternatief geleverd voor op tijd gebaseerde media of audiodescriptie van de vooraf opgenomen videocontent geleverd voor gesynchroniseerde media, behalve als het mediabestand een media-alternatief voor tekst is en duidelijk als zodanig is gelabeld.

Informatie over succescriterium 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevindingen: In de video 'Met groengas op weg naar een duurzame toekomst' op pagina https://www.waternet.nl/ons-water/rioolwater/100-jaar-schoon-water-in-amsterdam/afvalwater-bron-van-grondstoffen-en-energie/ 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.


1.2.4 Ondertitels voor doven en slechthorenden (live) (Niveau AA)

Er worden ondertitels voor doven en slechthorenden geleverd voor alle live audiocontent in gesynchroniseerde media.

Informatie over succescriterium 1.2.4 Ondertitels voor doven en slechthorenden (live)

Uitkomst: Niet aanwezig


1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Er wordt een audiodescriptie geleverd voor alle vooraf opgenomen videocontent in gesynchroniseerde media.

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevindingen: In de video 'Met groengas op weg naar een duurzame toekomst' op pagina https://www.waternet.nl/ons-water/rioolwater/100-jaar-schoon-water-in-amsterdam/afvalwater-bron-van-grondstoffen-en-energie/ 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.


1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie, structuur en relaties overgebracht door presentatie kunnen door software bepaald worden of zijn beschikbaar in tekst.

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://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, https://www.acc.waternet.nl/mijn-waternet/belasting/#/ en het domein https://awd.waternet.nl/.

Op pagina https://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 https://awd.waternet.nl/bezoek/toegangskaarten/ bij de tekst 'Dagkaart ook te koop bij:' en op pagina https://www.waternet.nl/werken-bij/vacatures/projectleider-natuurbeheer/ bij de tekst 'Werken bij Waternet'.

Op pagina https://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 https://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 https://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 https://www.waternet.nl/actueel/ en https://www.waternet.nl/werken-bij/vacatures/projectleider-natuurbeheer/.

Op pagina https://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 https://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 https://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 https://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 https://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 https://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 https://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 https://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 https://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 https://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 https://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 https://www.waternet.nl/onderhoud-en-storingen/, https://www.waternet.nl/zakelijk/waterschapsbelasting-voor-bedrijven/kwijtschelding-kleine-ondernemers/ en https://www.waternet.nl/actueel/.

Advies: Pagina https://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 https://www.waternet.nl/contact/.

Advies: In de kaart op pagina https://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 https://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.


1.3.2 Betekenisvolle volgorde (Niveau A)

Als de volgorde waarin content wordt gepresenteerd van invloed is op zijn betekenis, kan een correcte leesvolgorde door software bepaald worden.

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Uitkomst: Voldoende


1.3.3 Zintuiglijke eigenschappen (Niveau A)

Instructies die geleverd worden om content te begrijpen en te bedienen zijn niet alleen afhankelijk van zintuiglijke eigenschappen van componenten zoals vorm, kleur, omvang, visuele locatie, oriëntatie of geluid.

Informatie over succescriterium 1.3.3 Zintuiglijke eigenschappen

Uitkomst: Voldoende


1.3.4 Weergavestand (Niveau AA)

De content beperkt de weergave en bediening niet tot een enkele presentatie-oriëntatie, zoals staand of liggend, tenzij een specifieke presentatie-oriëntatie essentieel is.

Informatie over succescriterium 1.3.4 Weergavestand

Uitkomst: Voldoende


1.3.5 Identificeer het doel van de input (Niveau AA)

Het doel van elk invoerveld waarmee informatie van de gebruiker wordt verzameld, kan door software bepaald worden wanneer:

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://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: https://www.w3.org/tr/wcag21/#input-purposes.
Op meerdere pagina's staan invoervelden die een autocomplete-attribuut nodig hebben, bijvoorbeeld pagina https://www.acc.waternet.nl/mijn-waternet/belasting/#/ staan de invoervelden 'Telefoonnummer' en 'E-mailadres' en op pagina https://awd.waternet.nl/bezoek/toegangskaarten/winkelwagen/bestellen staat het invoerveld 'E-mailadres'.


1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Kleur wordt niet als het enige visuele middel gebruikt om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden.

Informatie over succescriterium 1.4.1 Gebruik van kleur

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://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 https://awd.waternet.nl/beleef/wandelroutes/detail/86 bij onder andere de links 'GPS wandelroute' en 'Download PDF', en op https://awd.waternet.nl/bezoek/toegangskaarten/dagkaart bij de knop 'In winkelwagen'.


1.4.2 Geluidsbediening (Niveau A)

Als een geluidsweergave op een webpagina automatisch meer dan 3 seconden speelt, is er of een mechanisme beschikbaar om de geluidsweergave te pauzeren of te stoppen, of er is een mechanisme beschikbaar om het geluidsvolume onafhankelijk van het overall systeemvolume te regelen.

Informatie over succescriterium 1.4.2 Geluidsbediening

Uitkomst: Voldoende


1.4.3 Contrast (minimum) (Niveau AA)

De visuele weergave van tekst en afbeeldingen van tekst heeft een contrastverhouding van ten minste 4,5:1, behalve in de volgende gevallen:

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://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 https://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 https://www.waternet.nl/contact/.

Op pagina https://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 https://awd.waternet.nl/beleef/wandelroutes/detail/86 en https://www.waternet.nl/service-en-contact/verhuizen/.

Op pagina https://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 https://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 https://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 https://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 https://awd.waternet.nl/bezoek/toegangskaarten/winkelwagen/bestellen.

Op pagina https://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 https://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.


1.4.4 Herschalen van tekst (Niveau AA)

Behalve voor ondertitels voor doven en slechthorenden en afbeeldingen van tekst, kan tekst zonder hulptechnologie tot 200% geschaald worden zonder verlies van content of functionaliteit.

Informatie over succescriterium 1.4.4 Herschalen van tekst

Uitkomst: Voldoende


1.4.5 Afbeeldingen van tekst (Niveau AA)

Als de gebruikte technologieën de visuele weergave tot stand kunnen brengen, wordt tekst gebruikt in plaats van afbeeldingen van tekst om informatie over te brengen, behalve in de volgende gevallen:

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Uitkomst: Voldoende


1.4.10 Reflow (Niveau AA)

Content kan zonder verlies van informatie of functionaliteit en zonder te moeten scrollen in twee dimensies, worden weergegeven voor:

Met uitzondering van delen van de content die voor het gebruik of de betekenis een tweedimensionale lay-out vereisen.

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://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 https://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 https://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 https://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.


1.4.11 Contrast van niet-tekstuele content (Niveau AA)

De visuele weergave van het volgende heeft een contrastverhouding van ten minste 3:1 ten opzichte van aangrenzende kleuren:

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://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 https://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 https://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 https://www.waternet.nl/ons-water/rioolwater/100-jaar-schoon-water-in-amsterdam/afvalwater-bron-van-grondstoffen-en-energie/.


1.4.12 Tekstafstand (Niveau AA)

Bij content die wordt geïmplementeerd met opmaaktalen die de volgende stijleigenschappen voor tekst ondersteunen, is er geen sprake van verlies van content of functionaliteit door het instellen van alle volgende, en door het niet wijzigen van andere stijleigenschappen:

Uitzondering: Menselijke talen en scripts die geen gebruik maken van een of meer van deze stijleigenschappen voor tekst in schriftelijke tekst, kunnen voldoen aan de eisen door alleen gebruik te maken van de eigenschappen die bestaan voor de betreffende combinatie van taal en script.

Informatie over succescriterium 1.4.12 Tekstafstand

Uitkomst: Voldoende


1.4.13 Content bij hover of focus (Niveau AA)

Wanneer aanvullende content zichtbaar wordt en daarna weer verborgen, door het gebruik van hover met de aanwijzer of focus met het toetsenbord, gelden de volgende zaken:

Uitzondering: De visuele weergave van de aanvullende content wordt beheerd door de user agent en wordt niet aangepast door de auteur.

Informatie over succescriterium 1.4.13 Content bij hover of focus

Uitkomst: Voldoende


2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Alle functionaliteit van de content is bedienbaar via een toetsenbordinterface zonder dat afzonderlijke toetsaanslagen aan tijd gebonden zijn, behalve als de onderliggende functie een invoer vereist die afhangt van het pad dat de gebruiker aflegt en niet alleen van de eindpunten.

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevindingen: Als bezoekers op pagina https://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 https://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 https://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.


2.1.2 Geen toetsenbordval (Niveau A)

Als de toetsenbordfocus met de toetsenbordinterface verplaatst kan worden naar een component van de pagina, dan kan de focus ook met alleen de toetsenbordinterface weer van dat component weg worden bewogen. En, als er meer nodig is dan de standaard pijl- of tabtoetsen of andere standaard methoden om de focus te verplaatsen, dan wordt de gebruiker geïnformeerd over de manier waarop de focus kan worden verplaatst.

Informatie over succescriterium 2.1.2 Geen toetsenbordval

Uitkomst: Voldoende


2.1.4 Enkel teken sneltoets (Niveau A)

Wanneer een sneltoets in content wordt geïmplementeerd door alleen letters (inclusief hoofdletters en kleine letters), leestekens, cijfers of symbolen te gebruiken, geldt ten minste één van de volgende zaken:

Informatie over succescriterium 2.1.4 Enkel teken sneltoets

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://www.waternet.nl/ons-water/rioolwater/100-jaar-schoon-water-in-amsterdam/afvalwater-bron-van-grondstoffen-en-energie/ 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.


2.2 Genoeg tijd

2.2.1 Timing aanpasbaar (Niveau A)

Voor elke tijdslimiet die door de content wordt ingesteld, geldt ten minste één van de volgende zaken:

Informatie over succescriterium 2.2.1 Timing aanpasbaar

Uitkomst: Voldoende


2.2.2 Pauzeren, stoppen, verbergen (Niveau A)

Voor alle bewegende, knipperende, scrollende of automatisch actualiserende informatie gelden alle volgende zaken:

Informatie over succescriterium 2.2.2 Pauzeren, stoppen, verbergen

Uitkomst: Voldoende


2.3 Toevallen en fysieke reacties

2.3.1 Drie flitsen of beneden drempelwaarde (Niveau A)

Webpagina's bevatten niets wat meer dan drie keer flitst in enige periode van één seconde of de flits is beneden de algemene flits- en rodeflitsdrempelwaarden.

Informatie over succescriterium 2.3.1 Drie flitsen of beneden drempelwaarde

Uitkomst: Voldoende


2.4.1 Blokken omzeilen (Niveau A)

Er is een mechanisme beschikbaar om blokken content die op meerdere webpagina's worden herhaald te omzeilen.

Informatie over succescriterium 2.4.1 Blokken omzeilen

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://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.


2.4.2 Paginatitel (Niveau A)

Webpagina's hebben titels die het onderwerp of doel beschrijven.

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevindingen: De PDF https://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'.


2.4.3 Focus volgorde (Niveau A)

Als een webpagina sequentieel genavigeerd kan worden en de navigatiesequenties hebben invloed op de betekenis of het gebruik, dan krijgen focusbare componenten de focus in de juiste volgorde waardoor betekenis en bedienbaarheid behouden blijft.

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevindingen: Op onder ander https://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 https://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 https://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 https://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 https://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 https://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 https://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 https://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 https://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 https://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 https://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.


Het linkdoel kan bepaald worden uit enkel de linktekst of uit de linktekst samen met zijn door software bepaalde linkcontext, behalve daar waar het doel van de link een dubbelzinnige betekenis zou kunnen hebben voor gebruikers in het algemeen.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevindingen: Wanneer de uitklapbare knoppen op pagina https://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 https://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 https://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 https://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 https://awd.waternet.nl/beleef/wandelroutes/detail/86 en bij de blokken onder de koppen 'Nieuws' en 'Storingen' op pagina https://www.waternet.nl/actueel/.


2.4.5 Meerdere manieren (Niveau AA)

Er is meer dan één manier beschikbaar om een webpagina binnen een verzameling webpagina's te vinden, behalve wanneer de webpagina het resultaat is van, of een stap in, een proces.

Informatie over succescriterium 2.4.5 Meerdere manieren

Uitkomst: Onvoldoende

Bevindingen: Alle pagina's op het domein https://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.


2.4.6 Koppen en labels (Niveau AA)

Koppen en labels beschrijven het onderwerp of doel.

Informatie over succescriterium 2.4.6 Koppen en labels

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.waternet.nl/ons-water/rioolwater/100-jaar-schoon-water-in-amsterdam/afvalwater-bron-van-grondstoffen-en-energie/ 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 https://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 https://www.waternet.nl/zakelijk/waterschapsbelasting-voor-bedrijven/kwijtschelding-kleine-ondernemers/.


2.4.7 Focus zichtbaar (Niveau AA)

Elke gebruikersinterface die met een toetsenbord te bedienen is, heeft een bedieningswijze waarbij de indicator van de toetsenbordfocus zichtbaar is.

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://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 https://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 https://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 https://www.acc.waternet.nl/mijn-waternet/belasting/#/aanslagen met de knop 'Bekijk details'.

Wanneer de knop 'Inloggen' op pagina https://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 https://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 https://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 https://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.


2.5 Input modaliteiten

2.5.1 Aanwijzergebaren (Niveau A)

Alle functionaliteit waarmee bij de bediening gebruik wordt gemaakt van meerpunts- of padgebaseerde gebaren, kan worden bediend met een enkele aanwijzer zonder een padgebaseerd gebaar, tenzij een meerpunts- of padgebaseerd gebaar essentieel is.

Informatie over succescriterium 2.5.1 Aanwijzergebaren

Uitkomst: Niet aanwezig


2.5.2 Aanwijzerannulering (Niveau A)

Voor functionaliteit die kan worden bediend met een enkele aanwijzer, geldt ten minste één van de volgende zaken:

Informatie over succescriterium 2.5.2 Aanwijzerannulering

Uitkomst: Voldoende


2.5.3 Label in naam (Niveau A)

Bij componenten van de gebruikersinterface met labels die tekst of afbeeldingen van tekst bevatten, bevat de naam de tekst die visueel wordt weergegeven.

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Voldoende


2.5.4 Bewegingsactivering (Niveau A)

Functionaliteit die kan worden bediend door de beweging van een apparaat of beweging van een gebruiker, kan ook worden bediend met componenten van de gebruikersinterface. De reactie op de beweging kan worden uitgeschakeld om onbedoelde activering te voorkomen, behalve wanneer:

Informatie over succescriterium 2.5.4 Bewegingsactivering

Uitkomst: Niet aanwezig


3. Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina (Niveau A)

De standaard menselijke taal van elke webpagina kan door software bepaald worden.

Informatie over succescriterium 3.1.1 Taal van de pagina

Uitkomst: Voldoende


3.1.2 Taal van onderdelen (Niveau AA)

De menselijke taal van elke passage of zin in de content kan door software bepaald worden, behalve waar het gaat om eigennamen, technische termen, woorden uit een onbepaalde taal en woorden of zinsdelen die deel zijn gaan uitmaken van het jargon van de onmiddellijk omringende tekst.

Informatie over succescriterium 3.1.2 Taal van onderdelen

Uitkomst: Onvoldoende

Bevindingen: Wanneer bezoekers op pagina https://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 https://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.


3.2 Voorspelbaar

3.2.1 Bij focus (Niveau A)

Als een component van de gebruikersinterface de focus krijgt, dan veroorzaakt dat geen contextwijziging.

Informatie over succescriterium 3.2.1 Bij focus

Uitkomst: Voldoende


3.2.2 Bij input (Niveau A)

Verandering van de instelling van een component van de gebruikersinterface veroorzaakt niet automatisch een contextwijziging, tenzij de gebruiker geïnformeerd is over het gedrag vóór het gebruik van de component.

Informatie over succescriterium 3.2.2 Bij input

Uitkomst: Voldoende


3.2.3 Consistente navigatie (Niveau AA)

Navigatiemechanismen, die op meerdere webpagina's binnen een verzameling webpagina's herhaald worden, komen elke keer dat ze worden herhaald in dezelfde relatieve volgorde voor, tenzij een verandering wordt geïnitieerd door de gebruiker.

Informatie over succescriterium 3.2.3 Consistente navigatie

Uitkomst: Voldoende


3.2.4 Consistente identificatie (Niveau AA)

Componenten die dezelfde functionaliteit hebben binnen een verzameling webpagina's worden consistent geïdentificeerd.

Informatie over succescriterium 3.2.4 Consistente identificatie

Uitkomst: Voldoende


3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Als een invoerfout automatisch ontdekt wordt, dan wordt het onderdeel waar de fout zit geïdentificeerd en wordt de fout tekstueel aan de gebruiker meegedeeld.

Informatie over succescriterium 3.3.1 Foutidentificatie

Uitkomst: Onvoldoende

Bevindingen: Wanneer bezoekers de contactgegevens op pagina https://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 https://www.waternet.nl/service-en-contact/verhuizen/aanmelden/#/nieuw-adres bij de stap 'Wanneer krijgt u de sleutel?'.

Wanneer bezoekers op pagina https://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.


3.3.2 Labels of instructies (Niveau A)

Als de content gebruikersinvoer vereist, dan worden labels of instructies geleverd.

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://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 https://www.waternet.nl/contact/.
Dit probleem komt ook voor bij andere invoervelden, bijvoorbeeld op pagina https://www.waternet.nl/onderhoud-en-storingen/ bij het invoerveld met de placeholdertekst 'Postcode of adres'.

Op pagina https://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 https://www.waternet.nl/service-en-contact/verhuizen/aanmelden/#/ staat ook een combobox zonder visueel label, en op pagina https://www.waternet.nl/service-en-contact/verhuizen/aanmelden/#/gegevens bij de stap 'Wat is uw geboortedatum?'.


3.3.3 Foutsuggestie (Niveau AA)

Als een invoerfout automatisch ontdekt wordt en suggesties voor verbetering bekend zijn, dan worden de suggesties aan de gebruiker geleverd, tenzij dit de beveiliging of het doel van de content in gevaar zou brengen.

Informatie over succescriterium 3.3.3 Foutsuggestie

Uitkomst: Voldoende


Voor webpagina's die wettelijke verplichtingen of financiële transacties voor de gebruiker uitvoeren, die, door de gebruiker te beheren gegevens in gegevensopslagplaatsen verwijderen of wijzigen, of die antwoorden van de gebruiker verzenden, geldt minstens één van de volgende zaken:

  1. Omkeerbaar: Verzendingen kunnen ongedaan gemaakt worden.
  2. Gecontroleerd: Door de gebruiker ingevoerde gegevens worden gecontroleerd op invoerfouten en de gebruiker wordt de mogelijkheid gegeven om ze te verbeteren.
  3. Bevestigd: Er is een mechanisme beschikbaar voor het beoordelen, bevestigen en verbeteren van informatie voordat de verzending wordt voltooid.

Informatie over succescriterium 3.3.4 Foutpreventie (wettelijk, financieel, gegevens)

Uitkomst: Voldoende


4. Robuust

4.1 Compatibel

4.1.1 Parsen (Niveau A)

In content die geïmplementeerd is met opmaaktalen hebben elementen volledige begin- en eindtags, zijn elementen genest volgens hun specificatie, bevatten elementen geen dubbele attributen en zijn alle ID's uniek, behalve waar de specificatie deze eigenschappen toelaat.

Informatie over succescriterium 4.1.1 Parsen

Uitkomst: Onvoldoende

Bevindingen: In de chatfunctie op pagina https://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 https://www.waternet.nl/contact/ en https://www.waternet.nl/voldoen-we-aan-de-webrichtlijnen/.

Op pagina https://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 https://www.waternet.nl/zakelijk/waterschapsbelasting-voor-bedrijven/kwijtschelding-kleine-ondernemers/ en op https://www.waternet.nl/service-en-contact/verhuizen/.

Op pagina https://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 https://www.waternet.nl/bestaatniet/ en https://www.waternet.nl/zoek/?q=verhuizen bij verschillende id's.


4.1.2 Naam, rol, waarde (Niveau A)

Voor alle componenten van de gebruikersinterface (inclusief, maar niet uitsluitend voor formulierelementen, links en door scripts gegenereerde componenten), kunnen de naam (name) en rol (role) door software bepaald worden; toestanden (states), eigenschappen (properties) en waarden (values) die door de gebruiker ingesteld kunnen worden, kunnen door software ingesteld worden; en kennisgeving van veranderingen in deze items is beschikbaar voor user agents, met inbegrip van hulptechnologieën.

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevindingen: Op onder andere https://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 https://www.waternet.nl/mijn-waternet/#/ en https://www.waternet.nl/zoek/?q=verhuizen.

Op pagina https://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 https://www.waternet.nl/mijn-waternet/#/ en https://www.waternet.nl/bestaatniet/.

Wanneer bezoekers op pagina https://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 https://www.waternet.nl/zoek/?q=verhuizen en https://www.waternet.nl/service-en-contact/verhuizen/.

Als bezoekers op pagina https://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 https://www.waternet.nl/service-en-contact/verhuizen/aanmelden/#/nieuw-adres en pagina https://www.waternet.nl/# bij de link 'Mijn Waternet'.

Op pagina https://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 https://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 https://www.waternet.nl/service-en-contact/verhuizen/ staan ook twee comboboxen zonder toegankelijke naam, en op pagina https://www.waternet.nl/service-en-contact/verhuizen/aanmelden/#/ staat ook een combobox zonder toegankelijke naam.

Op pagina https://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 https://awd.waternet.nl/bezoek/toegangskaarten/winkelwagen/controleren.

Bovenaan pagina https://www.waternet.nl/service-en-contact/verhuizen/aanmelden/#/nieuw-adres 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 https://www.waternet.nl/service-en-contact/verhuizen/aanmelden/#/nieuw-adres 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 https://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 https://www.waternet.nl/ons-water/rioolwater/100-jaar-schoon-water-in-amsterdam/afvalwater-bron-van-grondstoffen-en-energie/ 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 https://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 https://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 https://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 https://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 https://www.waternet.nl/service-en-contact/verhuizen/aanmelden/#/nieuw-adres met de sluitknop.


4.1.3 Statusberichten (Niveau AA)

In content die is geïmplementeerd met opmaaktalen kunnen statusberichten door software bepaald worden met behulp van rol (role) of eigenschappen (properties), zodat hulptechnologieën de berichten aan de gebruiker kunnen presenteren zonder dat ze de focus krijgen.

Informatie over succescriterium 4.1.3 Statusberichten

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://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 https://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 https://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 https://www.waternet.nl/contact/.

Onderbouwing van de evaluatie

Het onderzoek is uitgevoerd op basis van de evaluatiemethode van het W3C, WCAG-EM. Dit gebeurt grotendeels handmatig door een steekproef te nemen. Voor een quickscan geldt dat we slechts delen uit deze methodiek gebruiken. Ondanks alle zorgvuldigheid en ervaring van de onderzoeker kan het voorkomen dat een probleem niet gesignaleerd is. Houd er rekening mee dat in een volgend onderzoek bepaalde onderdelen anders worden beoordeeld omdat technologieën en hulpsoftware worden doorontwikkeld. Bij het handmatig onderzoek wordt gebruik gemaakt van tools.

Steekproef getoetste webpagina's

Ondersteunende technieken

Webbrowsers (useragents) en andere software

Bij dit onderzoek is de volgende software gebruikt:

Bronnen

Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.

Bron: toegankelijkheidsrapport.swink.nl/waternet.nl/audit/
Geprint: 2024-12-26 17:35:22 v2.4-011