Toegankelijkheidsonderzoek

Issues:
Quickscan digitale toegankelijkheid website Waternet

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Stichting Waternet
Scope van de website Alle pagina's op www.waternet.nl/
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 1: Op pagina www.waternet.nl/ heeft het logo van Waternet geen alternatieve tekst.
Dit geldt ook voor de social media iconen onderaan de pagina.
En ook voor het logo van Waternet direct voor de link 'Privacy en Cookies'.
Dit komt op alle pagina's voor.

Bevinding 2: Op pagina www.waternet.nl/ staan onder 'Ik ben al klant' een viertal iconen. Deze missen een alt-attribuut. Een afbeelding heeft altijd een alt-attribuut nodig. Het alt-attribuut mag wel leeg blijven (alt="") omdat het om een decoratieve afbeelding gaat.
Dit geldt ook voor de afbeelding rechts van de chatbox op pagina www.waternet.nl/contact/ .
En de afbeelding naast 'Verhuizen' op www.waternet.nl/service-en-contact/verhuizen/ .

Bevinding 3: De afbeelding 'Berrybot' op pagina www.waternet.nl/contact/ hoeft geen alt-tekst te hebben, maar kan als decoratief worden beschouwd.

Bevinding 4: Op pagina www.waternet.nl/voldoen-we-aan-de-webrichtlijnen/ staat twee links met een icoon dat aangeeft dat er naar een externe pagina wordt gelinkt (WCAG en toegankelijkheidsverklaring). Dit icoon heeft een tekstalternatief nodig. Dit kan bereikt worden door (in verborgen tekst of aan het title-attribuut) iets als '(externe link)' toe te voegen aan de link.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 5: Op pagina www.waternet.nl/service-en-contact/ heeft het invoerveld 'Zoekt u iets anders?' in de code geen label dat aan dit invoerveld gekoppeld is. Een title-attribuut is bedoeld voor aanvullende tekst, en geldt niet als label.
Dit geldt ook voor het zoekveld op elke pagina (via de zoekknop).

Bevinding 6: Op pagina www.waternet.nl/service-en-contact/help-ons-verbeteren/… staat de link 'Help ons verbeteren'. Deze vormt een kop voor de links eronder en moet als koptekst gecodeerd worden.

Bevinding 7: Op pagina www.waternet.nl/service-en-contact/help-ons-verbeteren/… is het label 'Aanhef' niet programmatisch gekoppeld aan de radiobuttons. Dit kan worden bereikt door een fieldset/legend combinatie te gebruiken.

Bevinding 8: Onderstaande zijn adviezen:
Op pagina www.waternet.nl/ staat in de code een <h2> "1,5". Deze lijkt overbodig en kan beter uit de code worden verwijderd, omdat het anders voor kan verwarring zorgen bij gebruikers van voorleessoftware.

Bevinding 9: Op pagina www.waternet.nl/contact/ staan meerdere <h1> elementen. Dit zorgt voor een onduidelijke structuur. Het beste is om alleen de kop 'Contact met onze klantenservice' een <h1> te laten zijn.
Dit komt ook op andere pagina's voor, zoals www.waternet.nl/service-en-contact/ .

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Uitkomst: Onvoldoende

Bevinding 10: Op pagina www.waternet.nl/nieuws/2020/juli/coronavirus-opsporen-in-… staat de datum boven de titel van het artikel. In de code moet deze onder de titel geplaatst worden, zodat de relatie duidelijk is. Visueel mag deze wel boven de titel staan.

Bevinding 11: Op pagina www.waternet.nl/contact/ staan rechts van het chatvenster drie lijstitems (Direct antwoord/Altijd beschikbaar/70% meteen geholpen) . Het is logischer als deze in de code direct volgen op de kop, in plaats van op het chatvenster. Zo is de relatie met de chatfunctionaliteit duidelijker.

1.3.5 Identificeer het doel van de input (Niveau AA)

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Uitkomst: Onvoldoende

Bevinding 12: In het proces op pagina www.waternet.nl/service-en-contact/verhuizen/aanmelden/ staan verschillende invoervelden die het autocomplete attribuut nodig hebben. Het gaat bijvoorbeeld om de velden postcode, huisnummer en e-mailadres.
Zie www.w3.org/TR/WCAG21/ voor een overzicht van de velden die het attribuut nodig hebben, en de bijbehorende waarden.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Uitkomst: Onvoldoende

Bevinding 13: Op pagina www.waternet.nl/contact/ is de link 'online aanmelden' onder de knop 'Ik ben verhuisd...' enkel waarneembaar als link door een kleurverschil. Dit is toegestaan als de kleur van de link een contrastwaarde heeft van 3:1 met de kleur van de omliggende tekst, wat hier het geval is, en de link een extra visuele hint krijgt, zoals onderstreping. Dit laatste is wel toegepast, maar niet zichtbaar door de focusrand die over de onderstreping valt. Dit moet wel zichtbaar zijn.
Dit komt op meerdere pagina's voor, bijvoorbeeld op www.waternet.nl/service-en-contact/ en www.waternet.nl/voldoen-we-aan-de-webrichtlijnen/ .

Bevinding 14: In het proces op www.waternet.nl/service-en-contact/verhuizen/aanmelden/ is de focus op de link 'Terug naar vorige stap' enkel met een kleurverschil weergegeven.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 15: Op pagina www.waternet.nl/ heeft de kleur #01A5F0 in hoogcontrastmodus nog steeds een te lage contrastwaarde met de witte teksten (2,8:1).

Bevinding 16: Op pagina www.waternet.nl/ worden de links 'Meer nieuws' en 'Lees hier meer over Waternet' onleesbaar doordat deze een te laag contrast met de achtergrond hebben, wanneer deze de focus ontvangen. Dit gebeurt zowel in gewone modus als hoogcontrast modus (1,4:1 en 1,0:1 respectievelijk).

Bevinding 17: Op pagina www.waternet.nl/service-en-contact/ heeft de placeholdertekst 'Zoekt u iets anders?' een contrast van 2,1:1 met de achtergrond.

Bevinding 18: Op pagina www.waternet.nl/service-en-contact/verhuizen/ hebben de teksten 'Kies oude woonplaats' en 'Kies nieuwe woonplaats' een te lage contrastwaarde van 3,9:1.
De knop 'Verhuizing doorgeven' verandert van kleur wanneer het de focus krijgt. De contrastwaarde is dan 3,9:1.

Bevinding 19: Op pagina www.waternet.nl/service-en-contact/verhuizen/aanmelden/ heeft de tekst 'Postcode' een te lage contrastwaarde van 4,4:1.

Bevinding 20: Wanneer een link in de lopende tekst de focus krijgt, verandert de kleur van de link en krijgt het een contrastwaarde van 3,9;1. Zie bijvoorbeeld www.waternet.nl/contact/ . Dit komt op meerdere pagina's voor.

Bevinding 21: In het proces op www.waternet.nl/service-en-contact/verhuizen/aanmelden/ verandert de kleur op de link 'Terug naar vorige stap' on hover/wanneer het de focus ontvangt. De contrastwaarde is dan 3,7:1.

Bevinding 22: In het proces op www.waternet.nl/service-en-contact/verhuizen/aanmelden/ heeft de placeholdertekst 'DD-MM-JJJJ' een contrast van 1,3:1.

Bevinding 23: NB: Op pagina www.waternet.nl/service-en-contact/verhuizen/aanmelden/ is geen hoogcontrastknop aanwezig. Het logo heeft hier een te laag contrast, logo's vallen onder de uitzondering, maar op de andere pagina's met een contrastknop is de kleur wel aangepast.

1.4.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Uitkomst: Niet getest

Bevinding 24: Dit criterium is niet onderzocht in de quickscan

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Niet getest

Bevinding 25: Dit criterium is niet onderzocht in de quickscan

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 26: De blauwe focusrand heeft vrijwel overal een te lage contrastwaarde (rond de 2,0:1 icm met de witte, grijze of blauwe achtergrond).
Let op: de focus staat ook best wel strak om de teksten heen. Hierdoor zijn de teksten minder goed leesbaar. Bijvoorbeeld 'Actueel' in de header, of 'Kosten drinkwater' op www.waternet.nl/service-en-contact/ . Het is beter om een ruimer kader te gebruiken, zodat de tekst goed leesbaar is.

Bevinding 27: Op pagina www.waternet.nl/service-en-contact/verhuizen/ heeft het Twitter-icoon ook in hoogcontrastmodus een contrastwaarde van 2,2:1 met de achtergrond.

Bevinding 28: Op pagina www.waternet.nl/service-en-contact/help-ons-verbeteren/… hebben de randen van de keuzerondjes 'Dhr.' en 'Mevr.' een te lage contrastwaarde (1,5:1).

Bevinding 29: Op pagina www.waternet.nl/service-en-contact/verhuizen/aanmelden/ heeft de rand van het invoerveld een te laag contrast met de witte binnenkant (1,2:1 in default staat en 2,7:1 in gefocuste staat).

1.4.12 Tekstafstand (Niveau AA)

Informatie over succescriterium 1.4.12 Tekstafstand

Uitkomst: Niet getest

Bevinding 30: Dit criterium is niet onderzocht in de quickscan

1.4.13 Content bij hover of focus (Niveau AA)

Informatie over succescriterium 1.4.13 Content bij hover of focus

Uitkomst: Niet getest

Bevinding 31: Dit criterium is niet onderzocht in de quickscan

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.2 Geen toetsenbordval (Niveau A)

Informatie over succescriterium 2.1.2 Geen toetsenbordval

Uitkomst: Voldoende

Bevinding 32: Let op:
Op pagina www.waternet.nl/service-en-contact/verhuizen/ staan de elementen 'Kies oude/nieuwe woonplaats'. Wanneer met de tabtoets naar dit element wordt genavigeerd, blijft de focus steken op dit element. Er kan niet verder over de pagina worden genavigeerd.
Omdat met shift-tab wel terug kan worden genavigeerd en zo in omgekeerde volgorde de rest van de pagina bereikt kan worden, is er geen sprake van een toetsenbordval, maar het is niet erg gebruiksvriendelijk.

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Uitkomst: Onvoldoende

Bevinding 33: Op alle pagina's staat een skiplink. Deze werkt niet.

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 34: De pagina's www.waternet.nl/service-en-contact/verhuizen/aanmelden/ en www.waternet.nl/service-en-contact/verhuizen/aanmelden/ hebben beide als titel 'Aanmelden voor drinkwater'. Omdat dit twee aparte pagina's zijn, hebben ze ook verschillende titels nodig.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 35: Op elke pagina verschijnt een cookiemelding. Deze krijgt pas de focus aan het einde van de pagina, vlak voor de footer. De cookiemelding moet als eerste de focus krijgen.

Bevinding 36: Op pagina www.waternet.nl/service-en-contact/help-ons-verbeteren/… verschijnen bij het leeg laten of verkeerd invullen van de invoervelden berichten. De focus blijft onderaan de pagina staan. Dit is geen logische focus volgorde, het is logischer de focus bovenaan het formulier of bij het eerste veld te plaatsen dat verbetert moet worden.
Overigens kan het algemene bericht 'U hebt nog niet alle gegevens goed ingevuld. Controleer uw gegevens hierboven en pas ze aan.' beter bovenaan het formulier worden geplaatst.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Voldoende

Bevinding 37: Onderstaande is een advies:
Op pagina www.waternet.nl/ is onder 'Uitgelicht' de hele card als link gecodeerd. Hierdoor wordt ook de linktekst, die wordt voorgelezen en die wordt gebruikt om de link te activeren, veel langer. Beter is het om één link te gebruiken (bijv. de titel van het artikel) en vervolgens het klikbare gebied te vergroten. De afbeelding kan dan ook als decoratief worden aangemerkt (alt="").

Bevinding 38: Bovenstaande geldt ook voor de cards op www.waternet.nl/service-en-contact/verhuizen/ onder 'Meer over verhuizen'. Het title-attribuut is overbodig op de link.
En ook voor www.waternet.nl/ons-water/

2.4.5 Meerdere manieren (Niveau AA)

Informatie over succescriterium 2.4.5 Meerdere manieren

Uitkomst: Niet getest

Bevinding 39: Dit criterium is niet onderzocht in de quickscan.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 40: De focus is niet zichtbaar op de cards onder 'Uitgelicht' op www.waternet.nl/ .

Bevinding 41: Op pagina www.waternet.nl/service-en-contact/verhuizen/ staan de elementen 'Kies oude/nieuwe woonplaats'. De focus beweegt niet zichtbaar mee op de plaatsen als er met het toetsenbord wordt genavigeerd.
De taalselector op pagina www.waternet.nl/service-en-contact/verhuizen/aanmelden/ heeft hetzelfde probleem.

Bevinding 42: Op de pagina's in het proces op www.waternet.nl/service-en-contact/verhuizen/aanmelden/ kan de 'Volgende' knop de focus ontvangen wanneer deze visueel disabled is. Dit moet niet mogelijk zijn, of de focus moet zichtbaar worden gemaakt.

Bevinding 43: Op pagina www.waternet.nl/service-en-contact/verhuizen/aanmelden/ is onder 'Kies uw adres' de focus niet zichtbaar op de adressuggesties.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 44: Op pagina www.waternet.nl/ heeft het logo van Waternet geen alternatieve tekst. In het tekstalternatief moet alle zichtbare tekst terugkomen, zodat dit element met spraaksoftware bediend kan worden.
Dit komt op alle pagina's voor.

3. Begrijpelijk

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Uitkomst: Onvoldoende

Bevinding 45: Op pagina www.waternet.nl/service-en-contact/help-ons-verbeteren/… verschijnt de tekst 'Dit veld is verplicht' wanneer een veld niet is ingevuld. Dit is een instructie, geen foutmelding. Een foutmelding beschrijft wat er fout is gegaan en heeft de vorm 'Het veld Voornaam is niet ingevuld'.

Bevinding 46: Dit geldt ook voor de foutmeldingen in het proces op www.waternet.nl/service-en-contact/verhuizen/aanmelden/ , zoals de melding 'Vul een geldige postcode in. Bijvoorbeeld 1000 AB.'.

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevinding 47: In het proces op www.waternet.nl/service-en-contact/verhuizen/aanmelden/ hebben sommige velden de placeholdertekst 'DD-MM-JJJJ'. Deze instructie verdwijnt wanneer men begint te typen. De instructie kan het beste aan het label worden toegevoegd.

4. Robuust

4.1 Compatibel

4.1.1 Parsen (Niveau A)

Informatie over succescriterium 4.1.1 Parsen

Uitkomst: Niet getest

Bevinding 48: Dit criterium is niet onderzocht in de quickscan.

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevinding 49: Op pagina www.waternet.nl/service-en-contact/help-ons-verbeteren/… hebben alle tooltips een aria-label 'Info'. Dit omschrijft de knop niet voldoende, hieraan moet nog worden toegevoegd voor welk veld de Info kan worden bekeken.

Bevinding 50: Op pagina www.waternet.nl/service-en-contact/verhuizen/ missen de elementen 'Kies oude/nieuwe woonplaats' een rol. Doordat deze als klikbare span zijn gecodeerd, ontstaan ook andere problemen. Zo beweegt de toetsenbordfocus niet mee, wordt de hele lijst opgelezen, en blijft de toetsenbordfocus steken (er kan niet met tab verder genavigeerd worden). Als hier een HTML-select element gebruikt wordt, wordt dit element waarschijnlijk wel toegankelijk.
De taalselector op pagina www.waternet.nl/service-en-contact/verhuizen/aanmelden/ heeft hetzelfde probleem.

Bevinding 51: In het proces op pagina www.waternet.nl/service-en-contact/verhuizen/aanmelden/ kan bij verschillende stappen de gegevens aangepast worden. Deze knoppen hebben dezelfde naam 'aanpassen'. De naam moet duidelijker worden, door toe te voegen welke specifieke gegevens aangepast kunnen worden.

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Uitkomst: Onvoldoende

Bevinding 52: Op pagina www.waternet.nl/service-en-contact/help-ons-verbeteren/… verschijnen bij het leeg laten of verkeerd invullen van de invoervelden berichten. Dit zijn statusberichten, en moeten als zodanig geprogrammeerd worden, zodat hulpsoftware deze berichten voorleest.
Dit geldt ook voor de foutmeldingen in het proces op www.waternet.nl/service-en-contact/verhuizen/aanmelden/
En meldingen als 'Sorry, we hebben uw adres niet gevonden. Controleer uw postcode en huisnummer.' in datzelfde proces.

****** Tot.: 52 Bevindingen

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

Bronnen

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

Geprint: 2021-12-06 05:48:52 v2.3-010